flutter - 如何更改 TextField 的高度和宽度？

Question

如何自定义TextField'swidth和height?

score 213 · Accepted Answer

要调整宽度，你可以TextField用一个Container小部件包裹你，如下所示：

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

我不太确定你的高度是什么，TextField但你肯定可以看一下TextStyle小部件，你可以用它来操作fontSize和/或height

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

请记住，根据对属性本身的评论，heightin是字体大小的乘数：TextStyle

此文本跨度的高度，作为字体大小的倍数。

当 [height] 为 null 或省略时，行高将直接由字体的度量决定，可能与 fontSize 不同。当 [height] 不为 null 时，文本跨度的行高将是 [fontSize] 的倍数，并且恰好是fontSize * height逻辑像素高。

最后但并非最不重要的一点是，您可能想看看您的decoration财产TextField，这为您提供了很多可能性

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

你可以玩弄InputDecoration和的decoration属性TextField。例如，您可以执行以下操作：

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

score 102 · Accepted Answer

我认为您想更改.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
        ),
      )
    ],
  ),
)

它将显示为：

score 44 · Accepted Answer

截屏：

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,
      ),
    ),
  );
}

score 15 · Accepted Answer

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

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

score 8 · Accepted Answer

如果您想在其中键入文本时动态增加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))),
        ),

score 7 · Accepted Answer

你可以试试中的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)),
  )
),

score 6 · Accepted Answer

6

换成宽度TextField_ SizedBox

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

于 2021-02-11T23:26:30.577 回答

score 3 · Accepted Answer

3

只需将其包裹起来TextField()并SizedBox()给出大小盒子的高度

于 2021-10-20T09:12:49.553 回答

score 2 · Accepted Answer

如果使用“suffixIcon”折叠 TextField 的高度，请添加：suffixIconConstraints

TextField(
                    style: TextStyle(fontSize: r * 1.8, color: Colors.black87),
                    decoration: InputDecoration(
                      isDense: true,
                      contentPadding: EdgeInsets.symmetric(vertical: r * 1.6, horizontal: r * 1.6),
                      suffixIcon: Icon(Icons.search, color: Colors.black54),
                      suffixIconConstraints: BoxConstraints(minWidth: 32, minHeight: 32),
                    ),
                  )

score 1 · Accepted Answer

使用 contentPadding，它会降低文本框或下拉列表的高度

InputDecorator(
                  decoration: InputDecoration(
                      errorStyle: TextStyle(
                          color: Colors.redAccent, fontSize: 16.0),
                      hintText: 'Please select expense',
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(1.0),
                      ),
                      contentPadding: EdgeInsets.all(8)),//Add this edge option
                  child: DropdownButton(
                    isExpanded: true,
                    isDense: true,
                    itemHeight: 50.0,

                    hint: Text(
                        'Please choose a location'), // Not necessary for Option 1
                    value: _selectedLocation,
                    onChanged: (newValue) {
                      setState(() {
                        _selectedLocation = newValue;
                      });
                    },
                    items: citys.map((location) {
                      return DropdownMenuItem(
                        child: new Text(location.name),
                        value: location.id,
                      );
                    }).toList(),
                  ),
                ),

score 1 · Accepted Answer

int numLines = 0;

Container(
     height: numLines < 7 ? 148 * WidgetsConstant.height: numLines * WidgetsConstant.height * 24,
     child: TextFormField(
              controller: _bodyText,
              maxLines: numLines < 7 ? 148 : numLines,
              keyboardType: TextInputType.multiline,
              textInputAction: TextInputAction.newline,        
              onChanged: (String value) {
                setState(() {
                  numLines = '\n'.allMatches(value).length + 1;
                });
              },
          ),
     ),

score 1 · Accepted Answer

摆脱填充的完美方法是使用InputDecoration.collapsed.

GestureDetector它用 a包裹ContainerContainer，并根据需要用尽可能多的 Padding、Border 和 Decoration 来装饰 Container。

GestureDetector(
  onTap: () => _focusNode.requestFocus(),
  child: Container(
    padding: const EdgeInsets.all(10),
    decoration: BoxDecoration(
      color: Colors.grey,
      borderRadius: BorderRadius.circular(4),
    ),
    child: TextField(
      focusNode: _focusNode,
      decoration: const InputDecoration.collapsed(
        hintText: 'Search...',
        border: OutlineInputBorder(
          borderSide: BorderSide(
            width: 0,
            style: BorderStyle.none,
          ),
        ),
      ),
    ),
  ),
);

要显示图标，请将Container子项更改为Row, 并使用Icon和TextField包裹的Expanded。

score 1 · Accepted Answer

1

文本字段（minLines：1，maxLines：5，maxLengthEnforced：true）

于 2020-06-17T11:22:51.677 回答

score 0 · Accepted Answer

0

您可以更改最大值

minLines: 4,
maxLines: 6,

于 2022-01-14T14:09:12.433 回答

score 0 · Accepted Answer

设置minLines: null，maxLines: null并expands:true让 TextField 填充其父小部件的高度：

Container(
  child: TextField(
    minLines: null,
    maxLines: null,
    expands: true
  )
)

请参考这些文档：https ://api.flutter.dev/flutter/material/TextField/expands.html

对于宽度，您可以这样做：

Container(
  width: 100,
  child: TextField(
    
  )
)

让 TextField 填充其父窗口小部件的宽度（在这种情况下为 100 像素）

score 0 · Accepted Answer

要增加 TextField 小部件的高度，只需使用小部件附带的 maxLines: 属性。例如： TextField( maxLines: 5 ) // 它将增加 Textfield 的高度和宽度。

score 0 · Accepted Answer

您可以简单地将文本字段小部件包装在填充小部件中.....像这样，

Padding(
         padding: EdgeInsets.only(left: 5.0, right: 5.0),
          child: TextField(
            cursorColor: Colors.blue,

            decoration: InputDecoration(
                labelText: 'Email',
                hintText: 'xyz@gmail.com',
                //labelStyle: textStyle,
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(5),
                  borderSide: BorderSide(width: 2, color: Colors.blue,)),
              focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: BorderSide(width: 2, color: Colors.green)),
                )

            ),
          ),

flutter - 如何更改 TextField 的高度和宽度？

17 回答 17

Related

Reference