Flutter 使用stack层叠布局时背景视图被键盘顶出或图片拉伸问题

移动端有图片背景视图的应用有很多,这是一个常见问题,出现的问题如下GIF:


Flutter 使用stack层叠布局时背景视图被键盘顶出或图片拉伸问题_第1张图片
animation.gif

大家仔细看背景图片在键盘升起的时候被挤压,可以理解为,视图在根据键盘的位置在动态改变自己的位置,这样的效果是我们不想要的,而且很卡顿

return Scaffold(
      body: Container(
          child: Stack(
        children: [
          InkWell(
            child: Container(
              width: ScreenUtil().setWidth(750),
              height: ScreenUtil().setHeight(1334),
              child: Image.asset(
                'images/login_background.png',
                fit: BoxFit.fill,
              ),
            ),
            onTap: (){
              cunrrentNode.unfocus();
            },
          ),
          Positioned(
            top: 0,
            left: 0,
            child: Column(
              children: [
                _logoWidget(),
                _titleWidgt(),
                _userNameWidget(),
                _passwordWidget()
              ],
            ),
          )
        ],
      )),
    );

大家可以看到我的层级结构是Scaffold->Container->Stack->InkWell+Column
此时就会出现上面GIF视图的效果,怎么解决捏,办法如下,Scaffold有个属性resizeToAvoidBottomPadding将其设置为false,代码如下

return Scaffold(
      resizeToAvoidBottomPadding: false,//防止键盘谈起的时候导致背景视图升起*********
      body: Container(
          child: Stack(
        children: [
          InkWell(
            child: Container(
              width: ScreenUtil().setWidth(750),
              height: ScreenUtil().setHeight(1334),
              child: Image.asset(
                'images/login_background.png',
                fit: BoxFit.fill,
              ),
            ),
            onTap: (){
              cunrrentNode.unfocus();
            },
          ),
          Positioned(
            top: 0,
            left: 0,
            child: Column(
              children: [
                _logoWidget(),
                _titleWidgt(),
                _userNameWidget(),
                _passwordWidget()
              ],
            ),
          )
        ],
      )),
    );

添加之后,背景视图不会被拉伸了,而且卡顿也消失了,希望帮助到大家,求喜欢,求关注!

你可能感兴趣的:(Flutter 使用stack层叠布局时背景视图被键盘顶出或图片拉伸问题)