一、需求说明
需要一个搜索框,用于搜索列表的内容展示,我就封装了一个搜索框
二、Bug产生的原因
给 TextField 设置了最小高度,导致了文字垂直方向不居中
三、Bug的解决方案
主要是添加了 isCollapsed: true
class SearchInput extends StatefulWidget {
final ValueChanged<String> onSearch;
const SearchInput({Key? key, required this.onSearch}) : super(key: key);
@override
State<SearchInput> createState() => _SearchInput();
}
class _SearchInput extends State<SearchInput> {
///编辑控制器
late TextEditingController _controller;
/// 是否显示删除按钮
bool _hasDeleteIcon = false;
@override
void initState() {
super.initState();
_controller = TextEditingController();
}
@override
Widget build(BuildContext context) {
return TextField(
controller: _controller,
textInputAction: TextInputAction.search,
textAlignVertical: TextAlignVertical.center,
keyboardType: TextInputType.text,
decoration: InputDecoration(
/// 输入框decoration属性
contentPadding: const EdgeInsets.symmetric(vertical: 0.0, horizontal: 1.0),
/// 去掉输入框的边框
border: const OutlineInputBorder(borderSide: BorderSide.none),
/// 让文字垂直居中
isCollapsed: true,
/// 设置搜索图片
prefixIcon: Container(
padding: const EdgeInsets.only(left: 0.0),
child: InkWell(
onTap: (() {
widget.onSearch(_controller.text);
}),
child: const Icon(Icons.search, color: Color(0xff3390FF)),
),
),
prefixIconConstraints: const BoxConstraints(
minWidth: 30,
minHeight: 25,
),
hintText: S.current.searchHintText,
hintStyle: const TextStyle(fontSize: 14, color: Colors.grey),
/// 设置清除按钮
suffixIcon: Container(
padding: EdgeInsetsDirectional.only(
start: 2.0,
end: _hasDeleteIcon ? 0.0 : 0,
),
child: _hasDeleteIcon
? InkWell(
onTap: (() {
setState(() {
_controller.clear();
_hasDeleteIcon = false;
});
}),
child: const Icon(
Icons.cancel,
size: 18.0,
color: Colors.grey,
),
)
: const Text(''),
),
),
onChanged: (value) => {
setState(() {
if (value.isEmpty) {
_hasDeleteIcon = false;
} else {
_hasDeleteIcon = true;
}
}),
},
onEditingComplete: () {
FocusScope.of(context).requestFocus(FocusNode());
/// 调用父组件中的方法
widget.onSearch(_controller.text);
},
);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
}