在设计中,我使用 Expanded 将屏幕分成三部分,但在第二部分有一个 textfield
当用户尝试输入一些设计溢出一些像素的东西时,我一直在尝试使用 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 方法
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(),),
);
}),
),
),)],
);
}
这是设计要达到的目的
但它会溢出一些像素
最佳答案
常见问题。有几个解决方案
- 你可以在
SingleChildScrollView
中包裹 body (Stack
) - 您可以尝试
Scaffold
的resizeToAvoidBottomInset
参数:
Scaffold(
resizeToAvoidBottomInset: false, ... )
关于android - 键盘在 flutter 中打开时 Ui 溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56336118/