flutter - 如何减少 Flutter 中 TextformField 中标签文本和底线之间的填充？

Question

这就是我所拥有的：

这就是我要的：

我想删除标签文本和底线之间的空格，该怎么做？

Answer 1

有了你可以随心所欲的InputDecorationTheme风格。TextformField还有填充物。

看看这个： https ://api.flutter.dev/flutter/material/InputDecorationTheme-class.html

MaterialApp(
        theme: ThemeData(
          inputDecorationTheme: InputDecorationTheme(
            border: OutlineInputBorder(),
            contentPadding: EdgeInsets.symmetric(
              vertical: 22,
              horizontal: 26,
            ),
            labelStyle: TextStyle(
              fontSize: 35,
              decorationColor: Colors.red,
            ),
        ),
)

Answer 2

您应该在 TextField 的装饰中使用contentPadding参数。例如：

    TextField(
        decoration:InputDecoration(
          hintText:"LABEL",
          contentPadding: EdgeInsets.only(top:0.0,bottom:0.0)
        ),
       ),

您可以根据需要设置内容填充以获得所需的结果。

Answer 3

另一个有用的道具InputDecoration是alignLableWithHint. 这会将起始位置降低到与文本/提示文本相同的级别。

通常标签位置较高，即使 contentPadding 设置为 0

    TextField(
       decoration:InputDecoration(
         hintText:"some label",
         alignLabelWithHint: true,
       ),
     ),