与前缀和后缀图标相比,文本表单字段中的提示文本有点升高(感觉好像与两个图标相比是向上的)。
我还附上了我用于此 TextFormfield 的代码:
TextFormField(
style:
w400.size12.copyWith(color: BrandColor.foodsearchViewTextColor),
cursorColor: BrandColor.foodsearchViewTextColor,
decoration: InputDecoration(
prefixIcon: Padding(
padding: const EdgeInsets.only(right: 18.0),
child: IconButton(
icon: SvgPicture.asset(
SvgAssets.food_search_icon,
color: BrandColor.foodsearchViewTextColor,
),
onPressed: null,
),
),
suffixIcon: Padding(
padding: const EdgeInsets.only(right: 14.0),
child: IconButton(
icon: SvgPicture.asset(
SvgAssets.food_searchview_suffix,
color: BrandColor.foodsearchViewTextColor,
),
onPressed: null,
),
),
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
focusedErrorBorder: InputBorder.none,
border: InputBorder.none,
hintText: foodSearchText,
hintStyle: w400.size12.copyWith(
color: BrandColor.foodsearchViewTextColor, fontSize: 13)),
),
我也尝试过用中心小部件包装文本表单字段,但它没有解决问题。 如果有人可以提供帮助,我将非常感激
您可以像这样在
contentPadding
中使用 InputDecoration
参数
contentPadding: EdgeInsets.symmetric(vertical: 15)
或
contentPadding: EdgeInsets.only(top: 15)
您可以借助
theme
中的
MaterialApp
全局设置 contentPadding
theme: ThemeData(
inputDecorationTheme: InputDecorationTheme(
contentPadding: EdgeInsets.symmetric(vertical: 15),
),
),
终于找到合适的处理方法了。
我们可以使用
TextButton
作为后缀图标。大多数时候我们需要将文本/加载应用于后缀。我们可以为其提供任何类型的小部件。
这是代码示例,
TextFormField(
onSaved: (code) {
log(code!);
},
textAlign: TextAlign.center,
onChanged: (value) {},
decoration: InputDecoration(
hintText: "Enter your coupon code here",
suffixIcon: TextButton(
child: const Text(
"Apply",
style: TextStyle(color: primaryColor),
),
onPressed: () {},
),
),
),
输出:
对我来说,内容填充和 textAlign 属性不是解决方案,因为我还使用自定义字体。
我的解决方案是在前缀图标小部件周围引入填充,并对左、右、上、下的偏移值进行调整,以找到 TextFormField 文本和前缀图标之间的完美对齐。
示例:
TextFormField(
style: TextStyle(
color: darkBlueColor,
fontWeight: FontWeight.w500,
fontSize: 16.0,
fontFamily: 'Neue'),
textAlign: TextAlign.start,
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
prefixIcon: const Padding(
padding:
EdgeInsets.only(left: 8.0, right: 8.0, top: 2.0, bottom: 8.0),
child: Icon(
Icons.email,
color: Colors.white,
size: 28.0,
),
),
hintText: hintText,
hintStyle: TextStyle(
color: Colors.grey.shade400,
fontWeight: FontWeight.normal,
fontSize: 14.0,
fontFamily: 'Neue'),
border: const OutlineInputBorder(),
))
您可以尝试将以下属性添加到文本字段:
1-
textAlignVertical: TextAlignVertical.center
2- 在 InputDecoration 中添加
contentPadding: EdgeInsets.only(top: 0)
3- 在图标按钮中添加
padding: EdgeInsets.only(top: 0)
TextField(
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
contentPadding: EdgeInsets.only(top: 0),
prefixIcon: Icon(
Icons.search,
),
hintStyle: TextStyle(
fontSize: 20,
),
suffixIcon: IconButton(
padding: EdgeInsets.only(top: 0),
icon: Icon(Icons.cancel),
onPressed: null,
),
hintText: "Search"
)
)