如何更新颤振TextField的高度和宽度？

Question

如何在Flutter中自定义TextField布局的高度和宽度？

Answer 1

我想你想改变内部填充/保证金的TextField。

您可以通过添加isDense: true和contentPadding: EdgeInsets.all(8)属性来做到这一点，如下所示：

Container(
  padding: EdgeInsets.all(12),
  child: Column(
    children: <Widget>[
      TextField(
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'Default TextField',
        ),
      ),
      SizedBox(height: 16,),
      TextField(
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'Densed TextField',
          isDense: true,                      // Added this
        ),
      ),
      SizedBox(height: 16,),
      TextField(
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'Even Densed TextFiled',
          isDense: true,                      // Added this
          contentPadding: EdgeInsets.all(8),  // Added this
        ),
      )
    ],
  ),
)

它将显示为：

Answer 2

截屏：

Widget _buildTextField() {
  final maxLines = 5;

  return Container(
    margin: EdgeInsets.all(12),
    height: maxLines * 24.0,
    child: TextField(
      maxLines: maxLines,
      decoration: InputDecoration(
        hintText: "Enter a message",
        fillColor: Colors.grey[300],
        filled: true,
      ),
    ),
  );
}

Answer 3

要调整宽度,您可以TextField使用Container小部件包装,如下所示:

new Container(              
  width: 100.0,
  child: new TextField()
)

我不确定你在追求高度时所追求的是什么,TextField但你绝对可以看看TextStyle小部件,你可以用它来操纵fontSize和/或height

new Container(              
  width: 100.0,
  child: new TextField(                                 
    style: new TextStyle(
      fontSize: 40.0,
      height: 2.0,
      color: Colors.black                  
    )
  )
)

请记住,height在TextStyle字体大小的乘数中,根据对属性本身的评论:

此文本的高度跨度,作为字体大小的倍数.

如果应用于根[TextSpan],则此值将行高度(后续文本基线之间的最小距离)设置为字体大小的倍数.

最后但并非最不重要的一点,您可能想要了解一下decoration您的属性TextField,这为您提供了很多可能性

编辑:如何更改内部填充/边距TextField

你可以玩它InputDecoration的decoration属性TextField.例如,你可以这样做:

new TextField(                                
    decoration: const InputDecoration(
        contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
    )
)

Answer 4

如果您想在其中键入文本时动态增加TextFormField 的高度。将maxLines设置为null。例如：-

TextFormField(
          onSaved: (newText) {
            enteredTextEmail = newText;
          },

          obscureText: false,
          keyboardType: TextInputType.emailAddress,
          validator: validateName,
          maxLines: null,
          // style: style,
          decoration: InputDecoration(
              contentPadding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),
              hintText: "Enter Question",
              labelText: "Enter Question",
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0))),
        ),

Answer 5

包裹宽度TextField​ SizedBox

SizedBox(
  height: 40,
  width: 150,
  child: TextField(),
)

Answer 6

您可以margin在Container. 将TextField 内部包裹起来Container并调整margin属性。

new Container(
  margin: const EdgeInsets.only(right: 10, left: 10),
  child: new TextField( 
    decoration: new InputDecoration(
      hintText: 'username',
      icon: new Icon(Icons.person)),
  )
),

Answer 7

这个答案有效，但是当输入字段处于错误状态时会发生冲突，为了更好的方法和更好的控制，您可以使用它。

InputDecoration(
    isCollapsed: true,
    contentPadding: EdgeInsets.all(9),
)