Flutter增加TextFormField的高度
Posted
技术标签:
【中文标题】Flutter增加TextFormField的高度【英文标题】：Flutter increase height of TextFormField 【发布时间】：2018-11-04 11:42:18 【问题描述】：我正在创建一个 Flutter 应用程序。我做了这样的设计。
我的电子邮件和密码高度的 TextFormField 表单域很小。我希望它与按钮的大小相同。
final email = TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
initialValue: 'sathyabaman@gmail.com',
style: new TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
decoration: InputDecoration(
hintText: 'Email',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0)
),
),
);
文本表单字段高度的语法是什么。
【问题讨论】：
你可以使用SizedBox属性来改变宽度和高度
如果要添加多行，使用maxLines: 5
【参考方案1】：
您可以使用此代码自定义您的 TextFormField
new SizedBox(
width: 200.0,
height: 300.0,
child: const Card(child: const Text('Hello World!')),
)
【讨论】：
const Cart(...) 应该是new TextFormField(...)，对吧？
您可以用您的TextFormField 替换Card 孩子而不是Text('Hello World!')。显示在答案中。
在宽度值处使用 double.infinity 来获得动态宽度 :)
它不起作用，我们可以通过其他方式为文本字段指定高度吗？【参考方案2】：
只需调整 InputDecoration 中的 contentPadding 即可。
final email = TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
initialValue: 'sathyabaman@gmail.com',
style: new TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
decoration: InputDecoration(
hintText: 'Email',
contentPadding: const EdgeInsets.symmetric(vertical: 25.0, horizontal: 10.0),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
),
);
【讨论】：
我想将其高度降低到小于默认高度，但它不起作用。为什么？ 我们如何使内容填充位于 inputtextform 字段的中心？ @Sokheang Khun 我使用负值来减少填充，但不确定这是否是一种实用的方法【参考方案3】：除了添加额外的永久填充来覆盖errorText，还有另一种选择——这可能会弄乱许多设计师的原始项目。
您可以创建 source's TextFormField 的修改版本。
为此，您可以：
-
复制粘贴source's
TextFormField中的所有内容。
重命名您的自定义TextFormField，以避免与原始名称冲突。
您可能还应该重命名内部状态类。
在 VS Code 中，您可以使用 Ctrl + H 将 TextFormField 替换为 TextFormFieldWithErrorTextOption。
向TextFormField 的构造函数添加另一个参数（在this line 下方），例如errorTextPresent：
// `true` is the current implicit default, i.e., showing the `errorText`
bool errorTextPresent = true
TextField：
-
来自：
decoration: effectiveDecoration.copyWith(field.errorText)
decoration: effectiveDecoration.copyWith(
errorText: errorTextPresent ? field.errorText : null)
TextFormField 一样使用新的TextFormField：
TextFormFieldWithErrorTextOption(
errorTextPresent: false, // `false` will disable the `errorText`
...
),
【讨论】：
我也为此创建了一个 Flutter 问题。这是#52634【参考方案4】：你可以通过改变 minLines 值来改变高度，试试这个
TextFormField(
keyboardType: TextInputType.multiline,
controller: _opTextController,
decoration: InputDecoration(
isDense: true,
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black)
)
),
maxLines: 5,
minLines: 3,
// controller: cpfcontroller,
)
【讨论】：
你的答案不清楚。请提供代码说明。 嘿@Momoro 如果您不想将静态高度传递给 TextFormField 如果 minLines 为 1 且 maxlines 为 2，则可以使用此代码，那么单行 TextFormField 将可见且其高度将当用户在字段中写入更多单词时动态增加。它的高度将增加到 2 行，因为 maxLines =2 如果您最初想显示更大的 TextFormField 然后增加 minLines 。如果您仍然不清楚，请告诉我【参考方案5】：只需添加一个容器。根据您的要求调整容器的高度，并使 textformfield 成为容器的子项。
【讨论】：
这是我发现减少默认高度的唯一方法。问题是关于增加高度。无论如何，要减小默认大小，您还必须考虑验证错误并在验证返回错误字符串时增加高度。例如：Container(height: validator == null ? 40 : 62, width: double.infinity, child: TextFormField(...).【参考方案6】：
使用这两行来控制TextFormField 内部InputDecoration 的高度。
isDense: true,
contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 0),
完整示例
Material(
elevation: 4,
shadowColor: Colors.blue,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: Padding(
padding: const EdgeInsets.only(left: 12),
child: TextFormField(
controller: searchProvider.searchController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: 'hintText',
isDense: true, // important line
contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 0),// control your hints text size
hintStyle: TextStyle(letterSpacing: 2, color: Colors.black54, fontWeight: FontWeight.bold),
fillColor: Colors.white30 ,
filled: true,
border: OutlineInputBorder(borderRadius: BorderRadius.circular(30), borderSide: BorderSide.none)),
),
),
),
【讨论】：
【参考方案7】：将TextFormField 上的expands 属性设置为true，然后将TextFormField 放入SizedBox 和height
SizedBox(
height: 40.0,
child: TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
expands: true //Setting this attribute to true does the trick
initialValue: 'sathyabaman@gmail.com',
style: new TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
decoration: InputDecoration(
hintText: 'Email',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0)
),
),
),
)
【讨论】：
【参考方案8】：截图：
代码：
您需要使用SizedBox 和TextField.maxLines 属性。
@override
Widget build(BuildContext context)
final height = 100.0;
return Scaffold(
body: SizedBox( // <--- SizedBox
height: height,
child: TextField(
cursorColor: Colors.red,
maxLines: height ~/ 20, // <--- maxLines
decoration: InputDecoration(
filled: true,
hintText: 'Hint text',
fillColor: Colors.grey,
),
),
),
);
【讨论】：
【参考方案9】： Expanded(
child: TextFormField(
controller: emailAddressController,
obscureText: false,
decoration: InputDecoration(
labelText: 'Email Address',
labelStyle: TextStyle(
fontFamily: 'Lexend Deca',
color: Color(0xFF95A1AC),
fontSize: 14,
fontWeight: FontWeight.normal,
),
hintText: ' Enter your email here ...',
hintStyle: TextStyle(
fontFamily: 'Lexend Deca ',
color: Color(0xFF95A1AC),
fontSize: 14,
fontWeight: FontWeight.normal,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFDBE2E7),
width: 2,
),
borderRadius: BorderRadius.circular(8),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFDBE2E7),
width: 2,
),
borderRadius: BorderRadius.circular(8),
),
filled: true,
fillColor: Colors.white,
contentPadding:
EdgeInsetsDirectional.fromSTEB(
10, 10, 0, 10),
),
style: TextStyle(
fontFamily: ' Lexend Deca',
color: Color(0xFF2B343A),
fontSize: 14,
fontWeight: FontWeight.normal,
),
),
)
【讨论】：
以上是关于Flutter增加TextFormField的高度的主要内容，如果未能解决你的问题，请参考以下文章
Flutter - 键盘隐藏时TextFormField变为空白
更改 FLUTTER 中 TextFormField 的默认边框颜色
Flutter 扩展/占用 TextFormField 以填充屏幕的其余部分