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('取消'),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}