【发布时间】：2020-05-07 22:53:22
【问题描述】：
我完全对 Flutter web 的响应式布局感到困惑。 尝试使用 Columns、Rows 和 TextFormFields 创建一个简单的表单。 我将所有字段包装在 Expanded 列中，但如果我减小浏览器大小，我会得到这样的图片：
如果我设置 Container(height: some value) 而不是 Expanded，我会得到底部溢出。
容器示例（高度：某个值）
return Container(
margin: EdgeInsets.all(22),
child: Card(
child: Container(
margin: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Inspection",
style: Theme.of(context).textTheme.headline5),
Padding(
padding: EdgeInsets.all(8),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
Card(
child: Container(height: 250,
margin: EdgeInsets.all(16),
child: Form(
key: formKey,
child: Column(mainAxisSize: MainAxisSize.min,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text("Inspection details",
style: Theme.of(context)
.textTheme
.headline6),
TextFormField(
controller: nameController,
decoration: InputDecoration(
labelText:
"Inspection Name",
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter Inspection name';
}
return null;
},
),
Row(
children: [
Text("Responsible:"),
Padding(
padding: EdgeInsets.all(8),
),
Expanded(
child: ResponsibleSelector(
dropdownValue:
inspectionState
.inspection
.responsible,
selectionCallback: (value) =>
responsibleController
.text = value,
),
),
],
),
TextFormField(
onTap: () {
FocusScope.of(context)
.requestFocus(
new FocusNode());
_selectDate(context);
},
controller: dateController,
decoration: InputDecoration(
labelText:
"Inspection date",
),
),
],
),
),
),
),
Padding(
padding: EdgeInsets.all(8),
),
Card(
child: Container(height: 400,
margin: EdgeInsets.all(16),
child: Column(
mainAxisAlignment:
MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text("Client details",
style: Theme.of(context)
.textTheme
.headline6),
DropdownButton(
isExpanded: true,
value: _selectedClient,
items: _clientList,
onChanged:
onChangeDropdownItem,
),
// Spacer(),
Expanded(
child: TextFormField(
maxLines: null,
minLines: null,
expands: true,
controller:
contactController,
decoration:
InputDecoration(
labelText:
"Contact person",
),
),
),
]))),
],
),
),
扩展示例：
return Container(
margin: EdgeInsets.all(22),
child: Card(
child: Container(
height: MediaQuery.of(context).size.height,
margin: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Inspection",
style: Theme.of(context).textTheme.headline5),
Padding(
padding: EdgeInsets.all(8),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
Expanded(
child: Card(
child: Container(
margin: EdgeInsets.all(16),
child: Form(
key: formKey,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text("Inspection details",
style: Theme.of(context)
.textTheme
.headline6),
Expanded(
child: TextFormField(
controller: nameController,
decoration: InputDecoration(
labelText:
"Inspection Name",
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter Inspection name';
}
return null;
},
),
),
Expanded(
child: Row(
children: [
Text("Responsible:"),
Padding(
padding: EdgeInsets.all(8),
),
Expanded(
child: ResponsibleSelector(
dropdownValue:
inspectionState
.inspection
.responsible,
selectionCallback: (value) =>
responsibleController
.text = value,
),
),
],
)
),
Expanded(
child: TextFormField(
onTap: () {
FocusScope.of(context)
.requestFocus(
new FocusNode());
_selectDate(context);
},
controller: dateController,
decoration: InputDecoration(
labelText:
"Inspection date",
),
),
),
],
),
),
),
),
),
Padding(
padding: EdgeInsets.all(8),
),
Expanded(
child: Card(
child: Container(
margin: EdgeInsets.all(16),
child: Column(
mainAxisAlignment:
MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text("Client details",
style: Theme.of(context)
.textTheme
.headline6),
DropdownButton(
isExpanded: true,
value: _selectedClient,
items: _clientList,
onChanged:
onChangeDropdownItem,
),
Expanded(
child: TextFormField(
maxLines: null,
minLines: null,
expands: true,
controller:
contactController,
decoration:
InputDecoration(
labelText:
"Contact person",
),
),
),
]))),
)
],
),
),
如何在 Flutter Web 上获得正确的布局？
【问题讨论】：
标签： flutter flutter-web