我正在设计一个登录页面，当我单击任何文本表单字段时它就会 溢出 ，它会打开 键盘， 并通过这样的溢出警告，请参阅附件。我还希望“加高按钮”图标应位于按钮的右侧。
Widget build(BuildContext context) { return Container( child: Scaffold( body: Stack( fit: StackFit.expand, children: <Widget>[ Container( decoration: BoxDecoration( image: new DecorationImage( image: new AssetImage('assets/login_page_bg_1.jpg'), fit: BoxFit.cover, colorFilter: new ColorFilter.mode( Colors.black.withOpacity(0.55), BlendMode.dstATop))), ), Column( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ Expanded( flex: 1, child: Container( margin: new EdgeInsets.only(top: 42.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Image.asset('assets/logo.png', width: 250.0, height: 200.21), ], ), ), ), Expanded( flex: 2, child: Container( margin: new EdgeInsets.only(bottom: 40.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ //form filed goes here Text('Login As User', textAlign: TextAlign.center, style: TextStyle( fontWeight: FontWeight.bold, fontSize: 35.0)), TextFormField( keyboardType: TextInputType.emailAddress, decoration: InputDecoration( hintText: 'you@example.com', labelText: 'Email Address', ), new Container( // width: MediaQuery.of(context).size.width, child: RaisedButton.icon( color: Color.fromARGB(251, 188, 74, 1), label: Text('LOGIN'), icon: Icon(Icons.send, size: 10.0, color: Colors.black), onPressed: () { this.submit(); }, ),)],),),)],)],),),);
初始状态
错误/溢出状态
发生这种情况的原因是，当键盘出现在屏幕上时，要绘制的画布的高度减小了。一种解决方案是将您的根容器包装在SingleChildScrollView中，如下所示：
Widget build(BuildContext context) { return Scaffold( body: Stack( fit: StackFit.loose, children: <Widget>[ Container( decoration: BoxDecoration( image: new DecorationImage( image: new AssetImage('assets/login_page_bg_1.jpg'), fit: BoxFit.cover, colorFilter: new ColorFilter.mode( Colors.black.withOpacity(0.55), BlendMode.dstATop) ) ), ), Column( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ SizedBox(height: 42,), Expanded( flex: 1, child: Center( child: Image.asset('assets/logo.png', width: 250.0, height: 200.21), ), ), Expanded( flex: 2, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ //form filed goes here Text('Login As User', textAlign: TextAlign.center, style: TextStyle( fontWeight: FontWeight.bold, fontSize: 35.0)), TextFormField( keyboardType: TextInputType.emailAddress, decoration: InputDecoration( hintText: 'you@example.com', labelText: 'Email Address', ) ), new Container( // width: MediaQuery.of(context).size.width, child: RaisedButton.icon( color: Color.fromARGB(251, 188, 74, 1), label: Text('LOGIN'), icon: Icon(Icons.send, size: 10.0, color: Colors.black), onPressed: () { //this.submit(); }, ),)],)), SizedBox(height: 40,) ],)],),);
当内容的高度大于视口的可用高度时，它将使屏幕可滚动。
