如何更改 TextField 的高度和宽度？
Posted
技术标签:
【中文标题】如何更改 TextField 的高度和宽度？【英文标题】：How to change TextField's height and width? 【发布时间】：2018-10-28 06:11:46 【问题描述】：如何自定义TextField的width和height？
【问题讨论】：
【参考方案1】：要调整宽度，您可以使用 Container 小部件包裹您的 TextField，如下所示：
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
)
)
)
请记住，TextStyle 中的 height 是字体大小的乘数，根据属性本身的 cmets：
此文本跨度的高度，作为字体大小的倍数。
当[height]为null或省略时，将确定行高 直接通过字体的度量，这可能与 fontSize 不同。 当 [height] 不为 null 时，文本跨度的行高将为 [fontSize] 的倍数并且正好是
fontSize * height逻辑像素 高。
最后但并非最不重要的一点是，您可能想看看TextField 的decoration 属性，它为您提供了很多可能性
编辑：如何更改TextField的内部填充/边距
您可以使用InputDecoration 和TextField 的decoration 属性。例如，您可以这样做：
TextField(
decoration: const InputDecoration(
contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
)
)
【讨论】：
是的，我可以更新 height/fontSize 属性，但是 TextField 中有默认填充，它加起来会增加额外的高度和宽度，如何自定义它。？ 您可以将decoration 属性用于这些目的。将其设置为null，所有基本样式都将消失。
谢谢，它完全删除了所有内容。但我只需要自定义 TextField 中的默认顶部和底部填充/边距。
好吧，OPs 的问题并不是很明确地说明他到底想达到什么目标以及如何实现。 TextField 的高度和宽度。只有在我的答案下方添加评论后，他才提到他对TextField 的内部填充感兴趣。因此，我不确定您的评论是否真的有效，因为有很多方法可以给猫剥皮，而可能解决您问题的方法不一定能解决其他问题。
将 contentPadding 与 isDense 一起使用：True 以获得最佳效果。InputDecoration( isDense: true, contentPadding: EdgeInsets.all(10))【参考方案2】：
您可以尝试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)),
)
),
【讨论】：
【参考方案3】：截图：
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,
),
),
);
【讨论】：
谢谢。 maxLines：maxlines 工作。我现在可以看到大量输入的数据。 是的，这就是我要找的，maxLines 非常适合我的情况！【参考方案4】：我认为您想更改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
),
)
],
),
)
会显示为：
【讨论】：
我需要增加文本框的大小。增加 Container 确实可以让我看到大量输入的数据。 isDense 选项对我来说可以降低文本字段的高度。谢谢@Jay Dhamsaniya【参考方案5】：TextField(minLines: 1, maxLines: 5, maxLengthEnforced: true)
【讨论】：
【参考方案6】：如果您使用“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),
),
)
【讨论】：
【参考方案7】：要增加 TextField 小部件的高度，只需使用小部件附带的 maxLines: 属性。例如： 文本域（ 最大线数：5 ) // 它会增加 Textfield 的高度和宽度。
【讨论】：
【参考方案8】：您可以简单地将文本字段小部件包装在填充小部件中..... 像这样，
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)),
)
),
),
【讨论】：
通常你会使用 SizedBox【参考方案9】：使用 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(),
),
),
【讨论】：
【参考方案10】：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;
);
,
),
),
【讨论】：
【参考方案11】：将TextField 包裹在SizedBox 中作为宽度
SizedBox(
height: 40,
width: 150,
child: TextField(),
)
【讨论】：
【参考方案12】：如果您想在 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))),
),
【讨论】：
优秀。正是我需要的。 谢谢，正是我想要的！！【参考方案13】：这个答案有效，但是当输入字段处于错误状态时会发生冲突，为了更好的方法和更好的控制，您可以使用它。
InputDecoration(
isCollapsed: true,
contentPadding: EdgeInsets.all(9),
)
【讨论】：
【参考方案14】：只需将TextField() 包裹在SizedBox() 中并给出大小框的高度
【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。【参考方案15】：摆脱填充的完美方法是使用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。
【讨论】：
【参考方案16】：你可以改变最大值
minLines: 4,
maxLines: 6,
【讨论】：
以上是关于如何更改 TextField 的高度和宽度？的主要内容，如果未能解决你的问题，请参考以下文章