flutter textfield hinttext居中对齐完美解决

flutter 导航自定义搜索高度TextField hintText向上移动的问题

解决方案1

///搜索控件widget
class TextFieldWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
//      padding: EdgeInsets.only(left:8,right: 8),
      decoration: BoxDecoration(
        borderRadius:BorderRadius.circular(20),
        border: Border.all(color: Colors.grey)
      ),
      height: 40,
        child:  TextField(
          autofocus: false,
          minLines: 1,
          enableInteractiveSelection: false,

          decoration: InputDecoration(
//            border: InputBorder.none, // 去掉下滑线
            hintText: '请输入搜索内容',
            contentPadding: EdgeInsets.all(0),
            prefixIcon: Icon(Icons.search),
              alignLabelWithHint: true,
//如果跟你预计的居中不理想 可以微调下height的值
            hintStyle:TextStyle(
            height: 2.0,
             ) ,
            enabledBorder: OutlineInputBorder(
              /*边角*/
              borderRadius:BorderRadius.circular(20),
              borderSide: BorderSide(
                color: Colors.white, //边线颜色为白色
                width: 1, //边线宽度为2
              ),
            ),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(
                color: Colors.white, //边框颜色为白色
                width: 1, //宽度为5
              ),
              borderRadius:BorderRadius.circular(20),

            ),
          ),


          style: TextStyle(
            fontSize: 14,
              textBaseline:TextBaseline.alphabetic,

          ),

      ),
    );
  }
}

解决方案2

import 'package:flutter/material.dart';
///搜索控件widget
class TextFieldWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left:8,right: 8),
      decoration: BoxDecoration(
        borderRadius:BorderRadius.circular(20),
        border: Border.all(color: Colors.grey)
      ),
      height: 36,
        child:  TextField(
          autofocus: false,
          minLines: 1,
          enableInteractiveSelection: false,

          decoration: InputDecoration(
//            border: InputBorder.none, // 去掉下滑线
            hintText: '请输入搜索内容',
            contentPadding: EdgeInsets.all(0),
            prefixIcon: Icon(Icons.search,color: Colors.grey,),
              alignLabelWithHint: true,
            helperStyle: TextStyle(
                fontSize: 14
            ),
//如果跟你预计的居中不理想 可以微调下height的值
            hintStyle:TextStyle(
            height: 2.0,
             ) ,
            enabledBorder: OutlineInputBorder(
              /*边角*/
              borderRadius:BorderRadius.circular(20),
              borderSide: BorderSide(
                color: Colors.white, //边线颜色为白色
                width: 1, //边线宽度为2
              ),
            ),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(
                color: Colors.white, //边框颜色为白色
                width: 1, //宽度为5
              ),
              borderRadius:BorderRadius.circular(20),

            ),
          ),


          style: TextStyle(
            fontSize: 14,
              textBaseline:TextBaseline.alphabetic,

          ),

      ),
    );
  }
}

//如果跟你预计的居中不理想 可以微调下height的值
            hintStyle:TextStyle(
            height: 2.0,
             ) ,