输入框:
// 是否显示关闭按钮
bool _showClear = false;
// 文字编辑控制器,监听搜索框的变化。
final TextEditingController _controller = TextEditingController();
// 输入框发生变化事件
void _onChange(String value){
if(value.length > 0){
setState(() {
_showClear = true;
});
}else{
setState(() {
_showClear = false;
});
}
}
TextField(
controller: _controller, // 文字编辑控制器,配合_onChange方法使用
onChanged: _onChange, // 监听输入框的变化
autofocus: true, // 是否自动聚焦光标
cursorColor: Colors.green, // 默认边框的颜色
decoration: const InputDecoration( // 装饰器
contentPadding: EdgeInsets.only(left: 10, bottom: 10), // 内容偏移
border: InputBorder.none, // 隐藏默认边框
hintText: '搜索', // 默认提示问题
),
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w300, color: Colors.black), // 文字颜色
)
实现下图功能的完整代码
class SearchBar extends StatefulWidget {
@override
State<SearchBar> createState() => SearchBarState();
}
class SearchBarState extends State<SearchBar> {
// 是否显示关闭按钮
bool _showClear = false;
// 文字编辑控制器,监听搜索框的变化。
final TextEditingController _controller = TextEditingController();
// 输入框发生变化事件
void _onChange(String value){
if(value.length > 0){
setState(() {
_showClear = true;
});
}else{
setState(() {
_showClear = false;
});
}
}
@override
Widget build(BuildContext context) {
return Container(
height: 84,
color: mainThemeColor,
child: Column(
children: [
const SizedBox(
height: 40,
), // 上半部分留空,时间栏
Container(
height: 44,
color: Colors.redAccent,
child: Row(
children: [
Container(
width: screenWidth(context) - 60,
height: 34,
margin: const EdgeInsets.only(left: 10),
padding: const EdgeInsets.only(left: 10, right: 10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(6.0)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Image(
image: AssetImage('images/icon.png'),
width: 20,
color: Colors.grey,
),
Expanded(
flex: 1,
child: TextField(
controller: _controller, // 文字编辑控制器,配合_onChange方法使用
onChanged: _onChange, // 监听输入框的变化
autofocus: true, // 是否自动聚焦光标
cursorColor: Colors.green, // 默认边框的颜色
decoration: const InputDecoration( // 装饰器
contentPadding: EdgeInsets.only(left: 10, bottom: 10), // 内容偏移
border: InputBorder.none, // 隐藏默认边框
hintText: '搜索', // 默认提示问题
),
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w300, color: Colors.black), // 文字颜色
)
),
_showClear ? GestureDetector(
onTap: (){
setState(() {
_controller.clear();// 只会把内容清空,不会触发_onChange回调
_onChange('');
});
},
child: const Icon(
Icons.close,
color: Colors.grey,
weight: 20,
),
) : Container()
],
),
),
const SizedBox(
width: 10,
),
GestureDetector(
onTap: (){
Navigator.pop(context);
},
child: const Text('取消'),
)
],
),
)
],
),
);
}
}