Flutter 如何实现静态容器背景 仅登录表单可滚动且适配键盘弹出

需求目标 #

• 带半透明装饰圆圈的灰色背景全程固定，不随页面滚动、不随键盘弹出偏移
• 仅登录表单区域支持垂直滚动，保证键盘弹出时输入框不被遮挡

原代码的异常表现 #

• 键盘弹出时，承载装饰圆圈的背景容器会整体向上偏移
• 给Scaffold添加resizeToAvoidBottomInset: true配置后，登录表单完全失去滚动能力，不符合预期

问题根源 #

原有代码的Stack结构中，背景层通过MediaQuery.of(context).size动态获取屏幕尺寸设置宽高。当Scaffold开启resizeToAvoidBottomInset时，整体body区域会根据键盘高度动态收缩，直接导致两个问题：

1. 背景层因为绑定了随键盘变化的动态尺寸，跟着body区域一起被向上推送，出现偏移
2. body收缩后的高度和滚动表单的剩余可用高度几乎一致，滚动视图没有多余的可滑动空间，因此完全无法滚动

修正实现步骤 #

1. 保留Scaffold的resizeToAvoidBottomInset: true配置，让表单区域自动适配键盘高度，不被键盘遮挡
2. 调整背景层的尺寸计算逻辑，不再使用随键盘动态变化的尺寸参数，让背景层固定在屏幕最底层，不受键盘弹出的影响
3. 给登录表单的SingleChildScrollView动态添加底部内边距，保证键盘弹出时滚动区域有足够的可滑动空间

关键代码调整点 #

• 背景层实现：

  Widget _crearFondo() {
    final circulo = Container(
      width: 90.0,
      height: 90.0,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(100.0),
          color: Color.fromRGBO(255, 255, 255, 0.05)),
    );
    return Stack(
      children: [
        // 用double.infinity占满屏幕，不绑定随键盘变化的动态尺寸
        Container(
            height: double.infinity, 
            width: double.infinity, 
            color: Colors.grey[850]
        ),
        // 装饰圆位置保持原有设计不变
        Positioned(top: 50.0, left: 30.0, child: circulo),
        Positioned(top: 150.0, right: 50.0, child: circulo),
        Positioned(bottom: 180.0, right: 20.0, child: circulo),
        Positioned(bottom: 280.0, left: 40.0, child: circulo),
      ],
    );
  }
  

• 登录表单滚动区域实现：

  Widget _loginForm(context) {
    final bloc = InheritedProvider.loginBlocInherit(context);
    final size = MediaQuery.of(context).size;
    // 获取当前弹出的键盘高度
    final bottomInset = MediaQuery.of(context).viewInsets.bottom;
    return SingleChildScrollView(
      // 动态给滚动区域加底部内边距，留出滚动空间
      padding: EdgeInsets.only(bottom: bottomInset),
      child: Column(
        children: <Widget>[
          SafeArea(child: Container(height: size.height * 0.05)),
          SizedBox(height: size.height * 0.05),
          welcomeBackForm(),
          SizedBox(height: 55.0),
          _formEmail(bloc),
          SizedBox(height: 30.0),
          _formPassword(),
          SizedBox(height: 38),
          _button(),
          SizedBox(height: 50),
          _crearCuenta(),
        ],
      ),
    );
  }
  

实现效果 #

• 灰色背景和装饰圆圈全程固定在屏幕底层，无论是否弹出键盘都不会出现上下偏移
• 登录表单区域会在键盘弹出时自动向上滚动，保证输入框、操作按钮始终处于可视区域
• 无键盘时的页面布局和原有设计完全一致

内容的提问来源于stack exchange，提问作者Kondos