我是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中之前,它运行良好。
如果有人可以帮助我并解释为什么它不再起作用了,我将非常感激:)
答案 0 :(得分:5)
解决方案:
将顶级Stack
放在Center
小部件中。
body: Center(child: Stack(
children: _buildBody(),
)));
提示进行调试:
使用Flutter Inspector
查找布局出现问题的地方。
我稍微编辑了您的代码(以便在本地工作),然后进行了检查。它显示如下
根据代码,我们有一个Stack
和SingleChildScrollView
(请参阅显示小部件堆栈的图的右侧)。由于大小由SingleChildScrollView
(其中的内容)确定,因此Stack
仅占用很小的空间,默认情况下,它的对齐位置为top
。因此,将其放在Center
下,整个堆栈视图将居中。
答案 1 :(得分:4)
使用LayoutBuilder小部件来包装所有小部件,并在列中居中的小部件之前和之后使用Spacer小部件
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AppBar'),
),
body: LayoutBuilder(builder: (context, constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(minWidth: constraints.maxWidth, minHeight: constraints.maxHeight),
child: IntrinsicHeight(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Spacer(),
Container(
child: //your widget
),
Spacer()
]
),
)
)
);
})
);
}
}
答案 2 :(得分:2)
只需将Column
包装在Center
中。我在应用程序中使用了它,而且似乎Column
的内容也居于SingleChildScrollView
内。
答案 3 :(得分:1)
ArtiomLK在评论中提出了一种对我有帮助的解决方案:
将SingleChildScrollView
包装在Center
中。小部件树为:
Center( child: SingleChildScrollView( child: Column(...)))
没有其他人提供帮助。
答案 4 :(得分:1)
还有另一种方法可以实现:
Center(
child: ListView(
shrinkWrap: true,
children: []
)
)
答案 5 :(得分:1)
官方文档中有关于此内容的部分:
将SingleChildScrollView与列一起使用
来源:https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html
但是我发现结合使用上述方法效果更好。即将Column
限制为最小大小(MainAxisSize.min
)。这应该很好,因为SingleChildScrollView
将在滚动发生之前占据屏幕上尽可能多的空间。
Widget _buildPortraitPage() {
return Center(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min, // <-- notice 'min' here. Important
children: [
Flexible(
child: Image.asset('assets/images/my-image.png'),
),
Flexible(
child: Text('My content'),
),
],
),
),
);
}
Flutter中的布局引擎很难弄清楚。
答案 6 :(得分:1)
您可以像这样使用“中心”小部件
返回中心( 子级:SingleChildScrollView() )