需求:
输入想要搜索的模板关键词,下方展示对应的模板
点击删除按钮,清除搜索内容
当输入框里面有值的时候,实时展示输入框右边的清除图标。
import 'package:flutter/material.dart';
// 模版页面的搜索框
class SearchInput extends StatefulWidget {
const SearchInput({super.key});
State<SearchInput> createState() => _SearchInputState();
}
class _SearchInputState extends State<SearchInput> {
TextEditingController _textEditingController = TextEditingController();
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(10),
height: 66.0,
child: TextField(
controller: _textEditingController,
// 实时知道输入框里面值的变化
onChanged: (value){
setState(() {
});
},
style: TextStyle(color: Color(0xffaaaaaa)),
decoration: InputDecoration(
filled: true,
fillColor: Color(0xff333333),
prefixIcon: Icon(Icons.search,color: Color(0xffaaaaaa),),
hintText: "搜索你想要的模板",
hintStyle: const TextStyle(color: Color(0xffaaaaaa)),
contentPadding: const EdgeInsets.symmetric(vertical: 10.0),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(33)
)
),
suffixIcon: _textEditingController.text.isNotEmpty
? IconButton(
icon: Icon(Icons.clear,color: Color(0xffaaaaaa),),
onPressed: (){
setState(() {
_textEditingController.clear();
});
},
) : null
),
),
);
}
}