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('取消'),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
相关推荐
豆豆豆大王19 分钟前
Android 数据持久化(SharedPreferences)
android
Paper_Love19 分钟前
RK3588-android-reboot命令内核调用流程
android
介一安全21 分钟前
【Frida Android】基础篇12:Native层hook基础——调用原生函数
android·网络安全·逆向·安全性测试·frida·1024程序员节
2501_916008891 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
android·开发语言·ios·小程序·uni-app·iphone·swift
Zach_yuan2 小时前
程序地址空间
android·linux·运维·服务器
带电的小王2 小时前
llama.cpp:Android端测试Qwen2.5-Omni
android·llama.cpp·qwen2.5-omni
明道源码3 小时前
Android Studio 代码编辑区域的使用
android·ide·android studio
__WanG4 小时前
如何编写标准StatefulWidget页面
前端·flutter
小墙程序员4 小时前
从隐私协议了解Android App到底获取了哪些信息
android
小墙程序员4 小时前
Android 5 到 16 期间 service 的发展
android