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

关于这个问题自己百度了一大圈也去flutter的GitHub上看相关资料都没有找到有效的解决方案,最终自己摸索了几个小时搞定了。以下代码有多余的自行减删。

如果你需要改变导航上面两遍的间距 修改 AppBar里面的 titleSpacing, 这里默认的是16,如果你是子页面有返回按钮想要隐藏的画可以设置AppBar leading: null, automaticallyImplyLeading: false,

本来是想着在外层增加一个 Container自定义高度 设置下

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,
            helperStyle: TextStyle(
                fontSize: 14
            ),

//            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,

          ),

      ),
    );
  }
}

image.png

很明显 hintText 位置没有居中。解决方案打开注释 enabledBorder focusedBorder 即可

image.png
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,

          ),

      ),
    );
  }
}

另一种解决方案是从TextField 入手去掉 Container decoration

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,
           helperStyle: TextStyle(
               fontSize: 14
           ),

           enabledBorder: OutlineInputBorder(
             /*边角*/
             borderRadius:BorderRadius.circular(20),
             borderSide: BorderSide(
               color: Colors.grey, //边线颜色为白色
               width: 1, //边线宽度为2
             ),
           ),
           focusedBorder: OutlineInputBorder(
             borderSide: BorderSide(
               color: Colors.grey, //边框颜色为白色
               width: 1, //宽度为5
             ),
             borderRadius:BorderRadius.circular(20),

           ),
         ),


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

         ),

     ),
   );
 }
}

如果想实现这种效果


image.png
class TextFieldWidget extends StatelessWidget {
  @override
   Widget build(BuildContext context) {
    return Container(

      padding: EdgeInsets.only(left:0,right: 8),
      decoration: BoxDecoration(
        color: Colors.black12,
        borderRadius:BorderRadius.circular(8),
//        border: Border.all(color: Colors.transparent)
      ),
      height: 33,
      child:  TextField(
        autofocus: false,
        minLines: 1,
        enableInteractiveSelection: false,

        decoration: InputDecoration(
          hintText: '请输入搜索内容',
          contentPadding: EdgeInsets.all(0),
          prefixIcon: Icon(Icons.search,color: Colors.grey,),
          alignLabelWithHint: true,
//如果跟你预计的居中不理想 可以微调下height的值
          hintStyle:TextStyle(
            height: 2.1,
          ) ,
          border: const OutlineInputBorder(
            gapPadding: 0,
            borderSide: BorderSide(
              width: 0,
              style: BorderStyle.none,
            ),
          ),
        ),


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

        ),

      ),
    );
  }
}

如果不能居中可以稍微调下这个

如果不能居中可以稍微调下这个
 decoration: InputDecoration(
   hintStyle:TextStyle(
            height: 2.5,
          ) ,
)

使用

    return Scaffold(

        appBar:PreferredSize(
          //设置导航高度与ios一直 ios 默认导航 44 状态栏 20,这里默认是60
            preferredSize: Size.fromHeight(44),
            child: AppBar(
//              leading  automaticallyImplyLeading 一起使用可以在root以外有返回的按钮吧返回按钮位置给覆盖,
              leading: null,
              automaticallyImplyLeading: false,
//            titleSpacing 距离屏幕两边的距离默认16
              titleSpacing: 8,

              title:  TextFieldWidget(
              ),
            )
        )

    );

推荐阅读更多精彩内容