[英]Ui overflow when Keyboard opens in flutter
在設計中,我使用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方法
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, ... )
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.