關于這個問題自己百度了一大圈也去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: '請輸入搜索內(nèi)容',
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: '請輸入搜索內(nèi)容',
contentPadding: EdgeInsets.all(0),
prefixIcon: Icon(Icons.search),
alignLabelWithHint: true,
//如果跟你預計的居中不理想 可以微調(diào)下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: '請輸入搜索內(nèi)容',
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,
),
),
);
}
}
如果想實現(xiàn)這種效果
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: '請輸入搜索內(nèi)容',
contentPadding: EdgeInsets.all(0),
prefixIcon: Icon(Icons.search,color: Colors.grey,),
alignLabelWithHint: true,
//如果跟你預計的居中不理想 可以微調(diào)下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,
),
),
);
}
}
如果不能居中可以稍微調(diào)下這個
如果不能居中可以稍微調(diào)下這個
decoration: InputDecoration(
hintStyle:TextStyle(
height: 2.5,
) ,
)
使用
return Scaffold(
appBar:PreferredSize(
//設置導航高度與ios一直 ios 默認導航 44 狀態(tài)欄 20恤溶，這里默認是60
preferredSize: Size.fromHeight(44),
child: AppBar(
// leading automaticallyImplyLeading 一起使用可以在root以外有返回的按鈕吧返回按鈕位置給覆蓋乓诽，
leading: null,
automaticallyImplyLeading: false,
// titleSpacing 距離屏幕兩邊的距離默認16
titleSpacing: 8,
title: TextFieldWidget(
),
)
)
);
