[英]Ui overflow when Keyboard opens in flutter
In design, I have divided screen in three-part using Expanded but in Second part have a textfield
when user try to input something the design overflows by some pixel, I have been trying to use SingleChildScrollView
inside Expanded with container widget to get rid of the rendering problem but my design disappears. 在设计中,我使用Expanded将屏幕分为三部分,但在第二部分有一个textfield
当用户尝试输入设计溢出某些像素的东西时,我一直在尝试使用Expanded中的SingleChildScrollView
与容器小部件来摆脱渲染问题但我的设计消失了。
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: _buildBackground(),
),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 13,
//child:_toolBar('VENUE LOGIN')
child:MyWidget(headerText: 'Player Option',)
),
Expanded(
flex: 70,
child: Container(
margin: EdgeInsets.only(top: width*0.03),
decoration: BoxDecoration(color: Colors.transparent),child: PlayerOptionContainer(),),
),
Expanded(
flex: 17,
child: _bottomView1(width),
),
],
)
],
),
);
PlayerOptionWidget method PlayerOptionWidget方法
Widget PlayerOptionContainer(){
return Column(
children: <Widget>[
Expanded(flex:25,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(flex: 30,child: _logoContainer(width),),
Expanded(flex: 70,child: searchContainer(),),
],),),
Expanded(flex:75,child: Container(
decoration: BoxDecoration(color: Colors.transparent),
child: GridView.count(
crossAxisCount: 3,
children: List.generate(20, (index) {
return Container(
margin: EdgeInsets.only(left: width*0.02, bottom: width*0.02, right: width*0.02),
decoration: BoxDecoration(
color: MyColors.yellowBg,
borderRadius: new BorderRadius.circular(12.0),
),
child: Center(child: MyFeedTile(),),
);
}),
),
),)],
);
}
This is the design trying to achieve 这是试图实现的设计
But it gets overflow by some pixel 但它会被一些像素溢出
Common problem. 常见问题。 There are a couple solutions 有几种解决方案
Stack
) in SingleChildScrollView
您可以在SingleChildScrollView
包装body( Stack
) resizeToAvoidBottomInset
parameter of Scaffold
: 您可以尝试Scaffold
resizeToAvoidBottomInset
参数: Scaffold(
resizeToAvoidBottomInset: false, ... )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.