当前位置：首页 > news >正文

Flutter：input输入框

news 2025/7/5 12:46:00

输入框：

// 是否显示关闭按钮
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 {@overrideState<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;});}}@overrideWidget 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('取消'),)],),)],),);}
}