键盘颤抖时UI溢出

Far*_*ana 3 android dart flutter

在设计中,我使用Expanded将屏幕分为三部分,但在第二部分中,textfield当用户尝试输入某些像素溢出设计时,我一直在尝试使用SingleChildScrollViewExpanded与容器小部件一起使用,以消除渲染问题但我的设计消失了。

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),
              ),
            ],
          )
        ],
      ),
    );
Run Code Online (Sandbox Code Playgroud)

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(),),
                );
              }),
            ),
           ),)],
      );
    }
Run Code Online (Sandbox Code Playgroud)

这是试图实现的设计

在此处输入图片说明

但是它溢出了一些像素

在此处输入图片说明

And*_*sky 5

常见问题。有几种解决方案

  1. 您可以将主体(Stack)包裹在SingleChildScrollView
  2. 您可以尝试以下resizeToAvoidBottomInset参数Scaffold
Scaffold(
  resizeToAvoidBottomInset: false, ... )
Run Code Online (Sandbox Code Playgroud)