关于这个问题自己百度了一大圈也去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(
),
)
)
);
