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

Question

如何自定义

TextField

的

width

和

height

？

Answer 1

要调整宽度，您可以用

TextField

小部件包裹

SizedBox

，如下所示：

const SizedBox(
  width: 100.0,
  child: TextField(),
)

我不太确定当谈到

TextField

的高度时你想要什么，但你绝对可以看看

TextStyle

小部件，用它你可以操纵

fontSize

和/或

 height

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

请记住，

height

中的

TextStyle

是字体大小的乘数，根据属性本身的注释：

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

当[height]为空或省略时，将确定行高直接通过字体的度量，该度量可能与 fontSize 不同。当 [height] 为非空时，文本范围的行高将为 [fontSize] 的倍数并且恰好是
fontSize * height
逻辑像素高。

最后但并非最不重要的一点是，您可能想看看您的

decoration

属性

TextField

，这给了您很多可能性

编辑：如何更改

TextField

的内部填充/边距

您可以使用

InputDecoration

和

decoration

的

TextField

属性。例如，你可以这样做：

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

Answer 2

我认为您想更改 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 3

截图：

您可以通过多种方式做到这一点：

使用

maxLines

+

expands

:

SizedBox(
  width: 240, // <-- TextField width
  height: 120, // <-- TextField height
  child: TextField(
    maxLines: null,
    expands: true,
    keyboardType: TextInputType.multiline,
    decoration: InputDecoration(filled: true, hintText: 'Enter a message'),
  ),
)

仅使用

maxLines

：

Widget _buildTextField() {
  final maxLines = 5;

  return Container(
    margin: EdgeInsets.all(12),
    height: maxLines * 24.0,
    child: TextField(
      maxLines: maxLines,
      keyboardType: TextInputType.multiline,
      decoration: InputDecoration(filled: true, hintText: 'Enter a message'),
    ),
  );
}

Answer 4

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

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

Answer 5

将

TextField

包裹在

SizedBox

中以获得宽度

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

Answer 6

如果您想在输入文本时增加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 7

您可以尝试

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 8

如果您使用“suffixIcon”折叠 TextField 的高度，请添加：后缀图标约束

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

Answer 9

只需将

TextField()

包裹在

SizedBox()

中并给出大小盒子的高度

Answer 10

使用 contentPadding 而不是 SizeBox 或 Container 调整高度

Container(
        width: width * 0.85,
        child: TextFormField(
          textInputAction: TextInputAction.next,
          textAlignVertical: TextAlignVertical.center,
          decoration: InputDecoration(
            contentPadding: const EdgeInsets.symmetric(vertical: 10), //Imp Line
            isDense: true,
            border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(5),
                borderSide: const BorderSide(
                  width: 0.5,
                  color: Constants.secondaryColourLight,
                )),
          ),),)

80k ka code hein 80k ka

Answer 11

使用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(),
                  ),
                ),

Answer 12

设置

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 像素）

Answer 13

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
    constraints: BoxConstraints(maxHeight:48,maxWidth: 327,),
  ),
);

Answer 14

最后，我使用这个技巧得到了解决方案。

提供sizedbox的高度和宽度，并将expand属性设置为true。另外，将 maxLines 设置为 null，将 minLines 设置为 null。

SizedBox(
      height: SizeConfig.screenWidth * 0.1377,
      child: TextFormField(
        validator: validator,
        enabled: isEnabled,
        expands: true,
        maxLines: null,
        minLines: null,
      ),
    );

Answer 15

TextField( minLines: 1, maxLines: 5, maxLengthEnforced: true)

Answer 16

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

Answer 17

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

InputDecoration.collapsed

。

它用

GestureDetector

包裹

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

。

Answer 18

提供一个 maxLines 并在 InputDecoration 中添加一个带有 width 和 height 的 BoxConstraints。

TextField(
  maxLines: 10,
  decoration: InputDecoration(
    border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
    constraints: BoxConstraints.tightFor(width: 300, height: 100),
  ),
);

Answer 19

要增加 TextField Widget 的高度，只需使用该 widget 附带的 maxLines: 属性。例如：文本域（最大行数：5 ) // 它将增加文本字段的高度和宽度。

Answer 20

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

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

            decoration: InputDecoration(
                labelText: 'Email',
                hintText: '[email protected]',
                //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)),
                )

            ),
          ),

Answer 21

0
投票

您可以更改最大值

minLines: 4,
maxLines: 6,

Answer 22

0
投票

对于高度，您可以简单地使用

maxLines

。

Answer 23

只需添加： contentPadding:EdgeInsets.对称（垂直：15，水平：15），

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

问题描述投票：0回答：23

23个回答

截图：

使用
`maxLines`
+
`expands`
:

仅使用
`maxLines`
：

最新问题

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

问题描述 投票：0回答：23

23个回答

截图：

使用 maxLines + expands:

仅使用maxLines：

最新问题

问题描述投票：0回答：23

使用
`maxLines`
+
`expands`
:

仅使用
`maxLines`
：