Flutter:input输入框

输入框:

js 复制代码
// 是否显示关闭按钮
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), // 文字颜色
)

实现下图功能的完整代码


js 复制代码
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('取消'),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
相关推荐
叶羽西4 小时前
Android CarService调试操作
android
千里马-horse4 小时前
在android中 spdlog库的log如何在控制台上输出
android·c++·spdlog
Zender Han4 小时前
《从零搭建现代 Android 模块化架构项目(2025 最新实践)》
android·架构
Digitally4 小时前
如何从电脑上卸载安卓应用程序
android·电脑
Mr YiRan5 小时前
多线程性能优化基础
android·java·开发语言·性能优化
liyi_hz20085 小时前
O2OA (翱途)开发平台新版本发布预告:架构升级、性能跃迁、功能全面进化
android·java·javascript·开源软件
Huangyi5 小时前
第一节:Flow的基础知识
android·前端·kotlin
hweiyu006 小时前
Android基础入门教程(视频教程)
android
冻咸鱼9 小时前
MySQL中表操作
android·sql·mysql·oracle
技术小黑屋_10 小时前
从零搭建 Android ADB MCP Server:让 AI 助手直接操控你的 Android 设备
android·adb