import 'package:flutter/material.dart';
class SearchBarWidget extends StatefulWidget {
final ValueChanged onchangeValue;
final VoidCallback onEditingComplete;
const SearchBarWidget({this.onchangeValue, this.onEditingComplete, Key key})
: super(key: key);
@override
SearchBarWidgetState createState() => SearchBarWidgetState();
}
class SearchBarWidgetState extends State {
///编辑控制器
TextEditingController _controller;
///是否显示删除按钮
bool _hasDeleteIcon = false;
@override
void initState() {
super.initState();
_controller = TextEditingController();
}
var _type = '姓名';
Widget buildTextField() {
//theme设置局部主题
return Container(
// height: 400,
child: _inputText(),
);
}
Widget _inputText() {
return TextField(
controller: _controller,
textInputAction: TextInputAction.search,
keyboardType: TextInputType.text,
maxLines: 1,
textAlign: TextAlign.left,
//光标
cursorColor: Color(0xff2fcfbb),
decoration: InputDecoration(
//设置搜索图片
prefixIcon: Padding(
padding: EdgeInsets.all(3.0),
child: Image.asset(
"images/search_icon.png",
width: 10.0,
height: 10.0,
),
),
prefixIconConstraints: BoxConstraints(
//设置搜索图片左对齐
minWidth: 30,
minHeight: 25,
),
border: InputBorder.none,
//无边框
hintText: " 请输入老人姓名",
hintStyle: new TextStyle(fontSize: 15, color: Colors.grey),
//设置清除按钮
suffixIcon: Container(
padding: EdgeInsetsDirectional.only(
start: 2.0,
end: _hasDeleteIcon ? 0.0 : 0,
),
child: _hasDeleteIcon
? new InkWell(
onTap: (() {
setState(() {
/// 保证在组件build的第一帧时才去触发取消清空内容
WidgetsBinding.instance
.addPostFrameCallback((_) => _controller.clear());
_hasDeleteIcon = false;
});
}),
child: Icon(
Icons.cancel,
size: 18.0,
color: Colors.grey,
),
)
: new Text(''),
),
),
onChanged: (value) {
setState(() {
if (value.isEmpty) {
_hasDeleteIcon = false;
} else {
_hasDeleteIcon = true;
}
widget.onchangeValue(_controller.text);
});
},
onEditingComplete: () {
FocusScope.of(context).requestFocus(FocusNode());
widget.onEditingComplete();
},
style: new TextStyle(fontSize: 14, color: Colors.black),
);
}
@override
Widget build(BuildContext context) {
return Container(
//背景与圆角
decoration: new BoxDecoration(
color: Color(0xFFF0F0F0),
borderRadius: new BorderRadius.all(new Radius.circular(30)),
),
alignment: Alignment.center,
padding: EdgeInsets.fromLTRB(10.0, 0.0, 0.0, 0.0),
child: buildTextField(),
);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
}