Flutter TextField设置高度之后文字无法垂直居中

一、需求说明

需要一个搜索框，用于搜索列表的内容展示，我就封装了一个搜索框

二、Bug产生的原因

给 TextField 设置了最小高度，导致了文字垂直方向不居中

三、Bug的解决方案

主要是添加了 isCollapsed: true

class SearchInput extends StatefulWidget {
  final ValueChanged<String> onSearch;

  const SearchInput({Key? key, required this.onSearch}) : super(key: key);

  @override
  State<SearchInput> createState() => _SearchInput();
}

class _SearchInput extends State<SearchInput> {
  ///编辑控制器
  late TextEditingController _controller;

  /// 是否显示删除按钮
  bool _hasDeleteIcon = false;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      textInputAction: TextInputAction.search,
      textAlignVertical: TextAlignVertical.center,
      keyboardType: TextInputType.text,
      decoration: InputDecoration(
        /// 输入框decoration属性
        contentPadding: const EdgeInsets.symmetric(vertical: 0.0, horizontal: 1.0),
        /// 去掉输入框的边框
        border: const OutlineInputBorder(borderSide: BorderSide.none),
        /// 让文字垂直居中
        isCollapsed: true,
        /// 设置搜索图片
        prefixIcon: Container(
          padding: const EdgeInsets.only(left: 0.0),
          child: InkWell(
            onTap: (() {
              widget.onSearch(_controller.text);
            }),
            child: const Icon(Icons.search, color: Color(0xff3390FF)),
          ),
        ),
        prefixIconConstraints: const BoxConstraints(
          minWidth: 30,
          minHeight: 25,
        ),
        hintText: S.current.searchHintText,
        hintStyle: const TextStyle(fontSize: 14, color: Colors.grey),

        /// 设置清除按钮
        suffixIcon: Container(
          padding: EdgeInsetsDirectional.only(
            start: 2.0,
            end: _hasDeleteIcon ? 0.0 : 0,
          ),
          child: _hasDeleteIcon
              ? InkWell(
                  onTap: (() {
                    setState(() {
                      _controller.clear();
                      _hasDeleteIcon = false;
                    });
                  }),
                  child: const Icon(
                    Icons.cancel,
                    size: 18.0,
                    color: Colors.grey,
                  ),
                )
              : const Text(''),
        ),
      ),
      onChanged: (value) => {
        setState(() {
          if (value.isEmpty) {
            _hasDeleteIcon = false;
          } else {
            _hasDeleteIcon = true;
          }
        }),
      },
      onEditingComplete: () {
        FocusScope.of(context).requestFocus(FocusNode());
        /// 调用父组件中的方法
        widget.onSearch(_controller.text);
      },
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}