如何創建帶有后綴圖示的自定義高度文本欄位？現在我創建的 TextField 有對齊問題，即文本和后綴圖示沒有對齊：
Widget _buildPassInput(BuildContext context) {
return Container(
height: 45,
decoration: BoxDecoration(
border: Border.all(
color: CustomColors.primary,
),
),
child: Center(
child: TextField(
controller: _passController,
cursorColor: CustomColors.primary,
textAlignVertical: TextAlignVertical.center,
style: CustomTexts.search,
keyboardType: TextInputType.text,
autofocus: false,
obscureText: _obscureText,
decoration: InputDecoration(
hintText: "Password",
hintStyle: CustomTexts.search,
border: InputBorder.none,
isDense: true,
contentPadding: EdgeInsets.all(8),
suffix: InkWell(
onTap: () {
setState(() {
_obscureText = !_obscureText;
});
},
child: Icon(
_obscureText ? Icons.visibility : Icons.visibility_off,
color: CustomColors.primary,
size: MediaQuery.of(context).size.width * 0.05,
),
),
),
),
),
);
}
默認的 TextField 高度對我不起作用，所以我需要創建一個自定義高度。后綴圖示居中，但文本顯示略低于中心
uj5u.com熱心網友回復：
試試下面的代碼希望對prefixIcon你有幫助。如果你不需要，我也添加了它然后洗掉prefixIcon代碼
參考TextFormField 
uj5u.com熱心網友回復：
var inputBorderDecoration = OutlineInputBorder(
borderRadius: BorderRadius.zero,
borderSide: BorderSide(width: 1, color: Colors.black));
double textHeight = 40;
// define a width if you want, or let the constrains of the parent define it.
double inputWidth = double.infinity;
return Center(
child: Container(
width: inputWidth,
height: textHeight,
color: Colors.green.withOpacity(.2),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Flexible(
child: TextField(
controller: TextEditingController(text: 'hello world'),
style: TextStyle(fontSize: textHeight),
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
enabledBorder: inputBorderDecoration,
focusedBorder: inputBorderDecoration,
filled: true,
fillColor: Colors.red.withOpacity(.5),
),
),
),
FittedBox(
child: InkWell(
onTap: () => print("touch button"),
child: Icon(Icons.check_circle),
),
),
],
)),
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/400734.html
標籤：扑