【发布时间】：2018-11-15 23:36:33
【问题描述】：
我目前正在为类似信息亭的设备编写 Flutter 应用程序。此设备将以横向模式安装，底部集成了条码扫描器。
设备将几乎所有时间都花在一个布局上：
目前，整个 body 都在 SingleChildScrollView 中。当用户点击文本输入框时，这允许视图“向上滑动”。然后当键盘关闭时，视图会“滑动”下来。
我想要做的是将底部的“扫描票据下方”行固定到视图的底部，至少在可见时（当键盘没有覆盖它时）。到目前为止，它是一个 flex 布局，还没有完全深入。
查看带有调试油漆的图像：粉红色框应位于底部，其上方的所有内容都应位于可滚动视图中。
我开始搞乱一些选项。我不想要固定的位置，因为我们最终还将在具有各种屏幕尺寸的 iDevices 上提供该解决方案。
这是我目前的脚手架主体：
Container(
constraints: BoxConstraints.expand(),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.only(top: 50.0, bottom: 20.0),
child: Text(_message ?? "Welcome!",
textAlign: TextAlign.center,
style:
TextStyle(fontSize: 45.0, color: Colors.black)),
),
Padding(
padding: EdgeInsets.all(20.0),
child: Text("Scan ticket below or Search for your Transaction",
style:
TextStyle(fontSize: 25.0, color: Colors.black)),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
flex: 4,
child: Container(
margin: EdgeInsets.symmetric(
horizontal: 50.0, vertical: 25.0),
color: skidataThemeData.primaryColor,
padding: const EdgeInsets.symmetric(
horizontal: 25.0, vertical: 25.0),
child: Center(
child: new TextFormField(
//This autofocus works, but during transition from successful plate val to
//this page, the keyoard is activated during transition causing an overflow on the
//applyValidationScreen.
//autofocus: true,
style: new TextStyle(
decorationColor:
skidataThemeData.accentColor,
fontSize: 90.0,
color: skidataThemeData.accentColor),
textAlign: TextAlign.center,
onSaved: (String value) {
this._data.plateNumber = value;
},
decoration: new InputDecoration(
hintText: "Enter Data",
hintStyle: new TextStyle(
color: Colors.white),
fillColor:
skidataThemeData.accentColor,
contentPadding: EdgeInsets.all(1.0),
border: InputBorder.none),
validator: (value) {
if (value.isEmpty) {
return 'Field cannot be blank.';
}
},
autocorrect: false,
),
))),
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(25.0),
child: RaisedButton(
padding: EdgeInsets.all(15.0),
color: skidataThemeData.accentColor,
onPressed: () async {
FocusScope.of(context)
.requestFocus(new FocusNode());
setState(() {
_message = '';
});
if (_formKey.currentState.validate()) {
// If the form is valid, we want to show a Snackbar
Scaffold.of(context).showSnackBar(
new SnackBar(
content: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
new CircularProgressIndicator(
valueColor:
new AlwaysStoppedAnimation<
Color>(
skidataThemeData
.primaryColor),
),
Text(
'Search for matching record..',
style: new TextStyle(
color: skidataThemeData
.primaryColor))
],
),
backgroundColor:
skidataThemeData.accentColor,
duration: Duration(seconds: 10)),
);
await new Future.delayed(
const Duration(milliseconds: 1000));
Scaffold.of(context)
.hideCurrentSnackBar();
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) =>
new SvalKioskApp()),
);
} else {
setState(() {
_message = "";
});
}
},
child: new Text('Search for Record',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25.0, color: Colors.black)),
),
))
]),
Container(
color: Colors.pink,
child: Padding(
padding: const EdgeInsets.only(top:40.0),
child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
Expanded(
flex: 1,
child: Container(
alignment: Alignment.centerRight,
padding: EdgeInsets.symmetric(
horizontal: 10.0, vertical: 5.0),
child: Image.asset(
'images/downarrow.png',
fit: BoxFit.contain,
),
)),
Expanded(
flex: 5,
child: Center(
child: Text("Scan Physical Ticket Below!",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 45.0)))),
Expanded(
flex: 1,
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(
horizontal: 10.0, vertical: 5.0),
child: Image.asset(
'images/downarrow.png',
fit: BoxFit.contain,
),
)),
]),
),
)
]),
),
)
【问题讨论】：
-
您可以使用堆栈小部件来完成此操作
-
这是我尝试过的。我创建了堆栈，可滚动小部件位于顶部，底部固定小部件位于底部。但是，当键盘打开时，固定的底部小部件随后移动到固定到视口的底部，然后位于键盘上方。如果我将 Saffold 上的 resizeToAvoidBottomPadding 设置为 false，则固定底部小部件根本不会显示。