我是Flutter的新手,所以我制作了一个简单的表格来训练自己。我意识到在iPhone上进行调试时,虚拟键盘触发了一个错误:“RenderFlex在底部溢出了29个像素”。我通过将Container包装在SingleChildScrollView中解决了此问题。
现在的问题是我专栏的内容不再居中。我不知道为什么...
这是我的代码,可帮助您了解:
List<Widget> _buildBody() {
var listWidget = List<Widget>();
SingleChildScrollView singleChild = SingleChildScrollView(
padding: EdgeInsets.only(top: 1.0),
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.all(30.0),
padding: EdgeInsets.all(10.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 50.0),
child: Image.asset(
'assets/github.png',
width: 100.0,
height: 100.0,
),
),
Container(
margin: EdgeInsets.only(bottom: 10.0),
child: TextFormField(
controller: _usernameController,
autofocus: true,
decoration: InputDecoration(
hintText: 'Username',
suffixIcon: Icon(Icons.account_circle)))),
Container(
child: TextFormField(
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(
hintText: 'Password', suffixIcon: Icon(Icons.vpn_key)),
),
),
Container(
margin: EdgeInsets.only(top: 10.0),
child: RaisedButton(
splashColor: Colors.greenAccent,
color: Colors.blue,
child: Text('Submit'),
onPressed: () {
_handleSubmit();
},
),
)
],
),
),
));
listWidget.add(singleChild);
if (_requesting) {
var modal = new Stack(
children: [
new Opacity(
opacity: 0.3,
child: const ModalBarrier(dismissible: false, color: Colors.grey),
),
new Center(
child: new CircularProgressIndicator(),
),
],
);
listWidget.add(modal);
}
return listWidget;
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Github Login'),
),
body: Stack(
children: _buildBody(),
));
}
我在列中添加了属性“mainAxisAlignment:MainAxisAlignment.center”。在将其包装到SingleChildScrollView中之前,它运行良好。
如果有人可以帮助我并向我解释为什么它不再起作用了,我将非常感激:)
最佳答案
解决方案:
将顶级Stack
放入Center
小部件中。
body: Center(child: Stack(
children: _buildBody(),
)));
调试提示:
使用
Flutter Inspector
查找布局出错的地方。我稍微编辑了您的代码(以便在本地工作),然后进行了检查。它显示如下
我们每个代码都有一个
Stack
和SingleChildScrollView
(请参阅显示小部件堆栈的图的右侧)。由于大小由SingleChildScrollView
(其中的内容)确定,因此Stack
仅占据很小的空间,默认情况下,它与top
对齐。因此,将其放在Center
下,整个Stack View 将位于中心。