Flutter：如何实现键盘弹出时Widget自动上移？

要实现键盘弹出时页面Widget自动上移，核心是让内容具备滚动能力并配合Flutter的键盘适配机制，以下是可行的修改方案：

步骤1：用SingleChildScrollView包裹核心布局 #

将原代码中的Column用SingleChildScrollView包裹，这样当键盘弹出导致页面高度不足时，内容可以滚动，确保输入区域可见。同时调整Column的mainAxisSize为MainAxisSize.min（滚动视图中max尺寸无意义），并设置crossAxisAlignment保证内容左对齐，替代原代码中重复的SizedBox(width: double.infinity)。

步骤2：确保Scaffold的键盘适配开关开启 #

显式设置Scaffold的resizeToAvoidBottomInset: true（默认值为true，但显式声明可避免因主题或其他配置覆盖导致的失效）。

修改后的完整代码 #

Scaffold(
  backgroundColor: Colors.white,
  resizeToAvoidBottomInset: true, // 显式开启键盘适配
  body: SafeArea(
    child: Form(
      key: formKey,
      child: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(horizontal: Sizes.sixteen), // 可选：添加横向padding优化布局
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start, // 保证文本左对齐，替代width: double.infinity
          children: [
            const SizedBox(height: Sizes.twenty),
            Text(
              appInfo.appName,
              style: Theme.of(context)
                  .textTheme
                  .headlineMedium!
                  .copyWith(
                    color: Theme.of(context).colorScheme.primary,
                    fontWeight: FontWeight.w800,
                  ),
            ),
            const SizedBox(height: Sizes.forty),
            Text(
              tr(context)
                  .enterVerificationCodeTitle
                  .toUpperCase(),
              style: const TextStyle(
                  fontSize: Sizes.twenty,
                  fontWeight: FontWeight.w700),
            ),
            const SizedBox(height: 10),
            Text(
              tr(context)
                  .enterVerificationCodeBody(widget.phoneNumber),
              style: const TextStyle(fontSize: Sizes.sixteen),
            ),
            Container(
              padding:
                  const EdgeInsets.symmetric(vertical: Sizes.ten),
              child: Pinput(
                defaultPinTheme: defaultPinTheme,
                focusedPinTheme: focusedPinTheme,
                length: 6,
                onTap: () {
                  if (widget.error != null) {
                    controller.text = "";
                  }
                },
                onSubmitted: widget.verifyCode,
                focusNode: focusNode,
                controller: controller,
                cursor: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Container(
                      margin: const EdgeInsets.only(bottom: 9),
                      width: 22,
                      height: 1,
                      color: Theme.of(context).colorScheme.primary,
                    ),
                  ],
                ),
                androidSmsAutofillMethod:
                    AndroidSmsAutofillMethod.none,
                pinAnimationType: PinAnimationType.none,
                pinputAutovalidateMode:
                    PinputAutovalidateMode.disabled,
                validator: (pin) {
                  if (widget.error == null &&
                      pin != null &&
                      pin.length == 6) {
                    widget.verifyCode(pin);
                  }
                  return null;
                },
              ),
            ),
            const SizedBox(height: Sizes.twentyHeight),
            SizedBox(
              width: double.infinity,
              child: CustomElevatedButton(
                title: tr(context).validate.toUpperCase(),
                backgroundColor: null,
                foregroundColor: null,
                onPressed: () {
                  focusNode.unfocus();
                  formKey.currentState!.validate();
                },
              ),
            ),
            const SizedBox(height: Sizes.twentyHeight),
            TextButton(
              onPressed: widget.delayBeforeNewCode > 0
                  ? null
                  : widget.resendCode,
              child: Text(
                widget.delayBeforeNewCode > 0
                    ? tr(context).delayHint(
                        widget.delayBeforeNewCode.toString())
                    : tr(context).resendCode,
                textAlign: TextAlign.center,
                style: const TextStyle(
                    fontSize: 16, fontWeight: FontWeight.w600),
              ),
            ),
            if (widget.error != null)
              ErrorText(
                message: widget.error?.getErrorText(context, null),
              ),
          ],
        ),
      ),
    ),
  ),
)

为什么之前的方法无效？ #

直接调整padding或MediaQuery无法解决根本问题：原布局使用Column且无滚动能力，键盘弹出时页面高度被压缩，底部控件会被键盘遮挡。SingleChildScrollView提供了滚动容器，配合resizeToAvoidBottomInset会自动计算键盘高度并调整布局，确保焦点所在的输入框始终可见。

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