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

如何定制 TextField的 width和 height？

330981 次浏览
小开
最佳答案

为了调整宽度，你可以用一个 SizedBox小部件来包装你的 TextField，像这样:

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

请记住，TextStyle中的 height是字体大小的乘数，如对属性本身的注释所示:

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

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

最后但并非最不重要的，您可能想看一看 TextField的 decoration属性，这给了您很多可能性

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

您可以使用 TextField的 InputDecoration和 decoration属性。例如，你可以这样做:

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

您可以在 Container中尝试 margin属性。将 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)),
)
),
小开

截图:

enter image description here

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

我认为你想改变 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
),
)
],
),
)

它将显示如下:

How to update flutter TextField's height and width / Inner Padding?

小开

TextField (minLines: 1，maxLines: 5，maxLengthEnforce: true)

小开

如果使用“后缀图标”折叠 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),
),
)
小开

要增加 TextField 小部件的高度，只需使用小部件附带的 maxLines: properties。例如: 文本字段( MaxLines: 5 )//它将增加 Textfield 的高度和宽度。

小开

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

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


),
),
小开

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

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

在 SizedBox中包装 TextField以获得宽度

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

如果您想增加 TextFormField 动态的的高度，同时在其中键入文本。设置 MaxLines到 空。喜欢

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

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

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

简单地将 TextField()包裹在 SizedBox()中，并给出尺寸盒的高度

小开

去除填充的最佳方法是使用 InputDecoration.collapsed。

它用 Container包装 GestureDetector，并根据需要用尽可能多的填充、边框和装饰来装饰容器。

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和一个用 Expanded包装的 TextField。

小开

你可以改变 Max

minLines: 4,
maxLines: 6,
小开

设置 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像素)

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

最后，我用这个方法得到了我的解决方案。

提供尺寸框的高度和宽度，并设置属性为 真实。同时，设置为 MaxLines 为 null，minLines 为 null。

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

使用 contentPadd 而不是 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

小开

提供一个 MaxLines并在 输入装饰中添加一个带有 宽度和 身高的 盒子约束。

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

提交答案