Flutter如何使widget始终保持在屏幕底部_flutter固定底部

Flutter如何使widget始终保持在屏幕底部

问题描述

在登录或者注册页面，需要在底部展示一些隐私政策或者是隐私协议，就是用了一种Stack布局方式，但是使用这种方式在没有键盘弹出的时候看起来一起正常，但是只要有软键盘弹出就会把底部使用Positioned包裹的Widget给顶起来。

先来看下代码：

Scaffold(
//resizeToAvoidBottomPadding: false,
  backgroundColor: Color(0xfff5f5f5),
  body: Stack(
    children: <Widget>[
      Column(
        children: <Widget>[
          Image.asset('images/login/login_bg.png',fit: BoxFit.fill,),
          SizedBox(height: 34.0,),
          _setMessage('用户', '用户名/手机号', _editingController_username, Image.asset('images/login/login_my.png',width: 24.0,height: 24.0,),false),
          _setMessage('密码', '请输入密码', _editingController_password, Image.asset('images/login/login_password.png',width: 24.0,height: 24.0,), true),
          _submitBtn,
        ],
      ),
      Positioned(
          left: 0,
          right: 0,
          bottom:0,
          child: _bottomWidgets
      )
    ],
  ),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

运行效果：

现在给出两个解决方案

###如何解决

解决方式1、

如果登录页面内容需要滚动，可以使用Listview进行包裹，然后对立面的内容设置为屏幕高度

ListView(
  children: <Widget>[
    Container(
      height: MediaQuery.of(context).size.height,
      child: Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              Image.asset('images/login/login_bg.png',fit: BoxFit.fill,),
              SizedBox(height: 34.0,),
              _setMessage('用户', '用户名/手机号', _editingController_username, Image.asset('images/login/login_my.png',width: 24.0,height: 24.0,),false),
              _setMessage('密码', '请输入密码', _editingController_password, Image.asset('images/login/login_password.png',width: 24.0,height: 24.0,), true),
              _submitBtn,
            ],
          ),
          Positioned(
              left: 0,
              right: 0,
              bottom:0,
              child: _bottomWidgets
          )
        ],
      ),
    ),
//                          _bottomWidgets
  ],
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

通过这样子操作之后，底部的widget不会再随着软键盘弹出

解决方式2、

直接使用Scaffold里面的两个属性resizeToAvoidBottomInset、resizeToAvoidBottomPadding
这两个使用任何一个都可以，设置为false的情况下，底部的Widget就会固定，不会跟随键盘弹起。

使用方式如下：

Scaffold(
  resizeToAvoidBottomInset: false,
//resizeToAvoidBottomPadding: false,
  backgroundColor: Color(0xfff5f5f5),
  body:Stack(
    children: <Widget>[
      Column(
        children: <Widget>[
          Image.asset('images/login/login_bg.png',fit: BoxFit.fill,),
          SizedBox(height: 34.0,),
          _setMessage('用户', '用户名/手机号', _editingController_username, Image.asset('images/login/login_my.png',width: 24.0,height: 24.0,),false),
          _setMessage('密码', '请输入密码', _editingController_password, Image.asset('images/login/login_password.png',width: 24.0,height: 24.0,), true),
          _submitBtn,
        ],
      ),
      Positioned(
          left: 0,
          right: 0,
          bottom:0,
          child: _bottomWidgets
      )
    ],
  ),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

设置为进行验证：