Flutter键盘弹出时中间组件滚动异常及布局需求

要实现键盘弹出时底部注册按钮被遮挡、登录表单保持居中且可滚动的效果，只需调整页面结构并正确配置resizeToAvoidBottomInset，具体修改如下：

核心思路 #

• 设置Scaffold的resizeToAvoidBottomInset: true，让键盘弹出时自动调整页面内容高度，底部注册按钮会被键盘自然遮挡。
• 重构中间登录表单区域的布局：移除嵌套的Center组件，改用Column的mainAxisAlignment: MainAxisAlignment.center让表单在未弹出键盘时保持居中，同时让SingleChildScrollView占满父级容器空间，确保键盘弹出后表单可滚动。

修改后的完整代码 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    resizeToAvoidBottomInset: true, // 开启键盘适配
    body: Column(
      children: [
        if (AppConfig.showLogo)
          Container(
            child: AppConfig.logo,
          ),
        Expanded(
          flex: 90,
          child: SingleChildScrollView(
            physics: const AlwaysScrollableScrollPhysics(), // 强制允许滚动
            child: Padding(
              padding: EdgeInsets.symmetric(
                  horizontal: Dimens.d20.responsive(),
                  vertical: Dimens.d10.responsive()),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: [
                  BlocConsumer<AuthNewBloc, AuthNewState>(
                    listenWhen: (prev, next) =>
                        prev.notification != next.notification,
                    listener: (context, state) {},
                    buildWhen: (prev, next) =>
                        prev.status != next.status ||
                        prev.isBusy != next.isBusy,
                    builder: (context, state) {
                      return state.status.when(
                        initial: () => const Text('Initial'),
                        loading: () => const CircularProgressIndicator(),
                        loadFailed: (_) => const Text('Failed'),
                        loadSuccess: (_) => LoginForm(
                          userType: _userType!,
                          showForgotPassword: true,
                          onLogin: _login,
                          onNavigate: _navigate,
                          countryList: state.countryCodes,
                        ),
                      );
                    },
                  ),
                ],
              ),
            ),
          ),
        ),
        if (AppConfig.allowRegister)
          Expanded(
              flex: 13,
              child: RegisterButton(
                userType: _userType!,
              ))
      ],
    ),
  );
}

关键修改点说明 #

1. 添加resizeToAvoidBottomInset: true：这会让Scaffold在键盘弹出时，将底部内容（注册按钮区域）推至键盘下方，实现遮挡效果。
2. 移除Center组件，改用Column居中：原代码中Center会让SingleChildScrollView仅包裹表单内容，导致无法滚动。改为在SingleChildScrollView内部用Column设置mainAxisAlignment: MainAxisAlignment.center，既保证表单居中，又让SingleChildScrollView占满父级空间，键盘弹出后表单高度超出可视区域时即可滚动。
3. 添加AlwaysScrollableScrollPhysics()：确保即使表单高度未超出可视区域，也允许滚动操作，提升交互一致性。

内容的提问来源于stack exchange，提问作者Farhana Naaz Ansari