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(
              ),
            )
        )

    );

推荐阅读更多精彩内容

  • Flutter是Google开发的一套全新的跨平台、开源UI框架(本质上就是sdk)。 支持iOS、Android...
    HarveyLegend阅读 7,184评论 1 43
  • 在上一篇文章中以简单的方式对Flutter自己提供的演示进行了一个简单的分析,当然那是远远不够。本来打算为大家带来...
    奇葩AnJoiner阅读 567评论 0 4
  • 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本文链接:...
    壹尘子阅读 3,570评论 1 1
  • 当我堕落到与这些人为伍的时候,没有语言可以描述我灵魂的隐痛…… 我感觉自己要成为一位博学多识、卓越优秀的人的希望在...
    宛丘花卷阅读 168评论 1 2
  • 我万分幸运并深深地感恩感恩,感恩遇到李硯善董事长,感恩董事长研发的水灵子产品,福慧千万家,带给世人健康幸福,改造水...
    唐亞濤阅读 30评论 0 0
  • 这个世界真的挺复杂的,很多事情其实并没有表面上那么简单那么美好,学会看透不说透,多了解自己,做好自己该做的,过好自...
    我是winki阅读 97评论 0 0
  • 曾几何时,摸着自己凸起的肚腩,告诉自己要控制体重,于是兴冲冲的跑到家旁边的一兆韦德办了一张会员卡,然而,直到最后过...
    海洋思维杨简宁阅读 98评论 0 2
  • 今天周末,幼儿园组织爬山,算是给2018年做一个郑重的告别仪式吧! 早上起来真冷,广东现在的天气就是冬夏两季随时切...
    中山一诺线切割阅读 156评论 0 1