我是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小部件中。
Stack
Center
body: Center(child: Stack( children: _buildBody(), )));
调试技巧:
使用Flutter Inspector找到在布局是怎么了。
Flutter Inspector
我稍微编辑了您的代码(以便在本地工作),然后进行了检查。如下所示, 我们有一个Stack和SingleChildScrollView每个代码(请参阅图的右侧,其中显示了小部件堆栈)。由于大小是由SingleChildScrollView(其中的内容)确定的,因此Stack仅占用很少的空间,默认情况下,它的对齐方式为top。因此,将其放在下面Center,整个堆栈视图将居中。
SingleChildScrollView
top