[英]How to expand TextField in Container vertically to cover all available space in Flutter
我想扩展一个TextField
以垂直覆盖所有空间,它的Container
正在扩展但TextField
没有,这是设计:
蓝色是Container
区。 但TextField
没有扩展
这是我正在使用的代码:
Container(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Title"),
Container(
margin: EdgeInsets.only(top: 8),
child: TextField(
controller: c_title,
decoration: Styles.getInputFieldStyle(""),
),
),
Container(
margin: EdgeInsets.only(top: 16),
child: Text("Feedback"),
),
Expanded(
child: Container(
color: Colors.blue,
margin: EdgeInsets.only(top: 8),
child: TextField(
decoration: Styles.getInputFieldStyle(""),
controller: c_feedback,
keyboardType: TextInputType.multiline,
),
),
),
Container(
margin: EdgeInsets.only(top: 16),
width: double.infinity,
child: RaisedButton(
onPressed: (){_onSubmitPressed();},
child: Text("Submit"),
textColor: Colors.white,
color: MyColors.theme_red,
),
)
],
),
);
使用 Flutter 1.5.4,您只需执行以下操作:
Expanded(
child: TextField(
expands: true,
maxLines: null,
),
)
它将占据所有垂直自由空间。
你需要这个。
TextFormField(
decoration: InputDecoration(hintText: "Enter your very long text here"),
maxLines: double.maxFinite.floor(),
),
编辑:这是您的最终解决方案。
Container(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Title"),
Container(
margin: EdgeInsets.only(top: 8),
child: TextField(
controller: c_title,
decoration: Styles.getInputFieldStyle(""),
),
),
Container(
margin: EdgeInsets.only(top: 16),
child: Text("Feedback"),
),
Expanded(
child: LayoutBuilder(
builder: (_, __) {
return Container(
color: Colors.blue,
margin: EdgeInsets.only(top: 8),
child: TextField(
decoration: Styles.getInputFieldStyle(""),
controller: c_feedback,
maxLines: double.maxFinite.floor(),
keyboardType: TextInputType.multiline,
),
);
},
),
),
Container(
margin: EdgeInsets.only(top: 16),
width: double.infinity,
child: RaisedButton(
onPressed: () {
_onSubmitPressed();
},
child: Text("Submit"),
textColor: Colors.white,
color: MyColors.theme_red,
),
)
],
),
),
无法展开TextField
或TextFormField
以填充屏幕,因为它具有maxLines
属性。
通过在TextField
或TextFormField
使用maxLines
属性,它将根据分配的行数扩展其大小。
所以这应该适合你
Expanded(
child: TextField(
keyboardType: TextInputType.multiline,
maxLines: 20,
),
),
下面的代码可以帮助你 -
使用“maxLines”和“keyboardType:TextInputType.multiline”扩展文本字段
new Container(
child: TextFormField(
textAlign: TextAlign.start,
style: new TextStyle(
fontSize: 14.0, color: Colors.black),
keyboardType: TextInputType.multiline,
focusNode: nodeTwo,
textInputAction: TextInputAction.next,
maxLines: 4,
maxLength: 200,
decoration: InputDecoration(
labelText: 'Add Description',
alignLabelWithHint: true ,
hintText: 'Enter Description',
hintStyle: TextStyle(fontWeight:
FontWeight.w300,fontSize: 14.0),
errorStyle: TextStyle(color: Colors.redAccent),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0))),
)
只需将 maxLines 设置为 null:
TextField(
maxLines: null,
),
如果您的 textField 小部件是 Column 的子小部件并且设置expands: true
。
可以设置textAlignVertical: TextAlignVertical.top
使文本在顶部垂直对齐。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.