Flutter中TextFormField弹出键盘时底部按钮被遮挡的溢出问题解决

我的登录和注册页面存在溢出问题，已经尝试设置scrollPadding，但键盘仍会遮挡屏幕底部的文本和Button组件。页面代码如下：

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:jimmys_app_demo/Plugins/authentication_service.dart';
import 'package:jimmys_app_demo/screens/item_page.dart';
import 'package:jimmys_app_demo/screens/signup_page.dart';
import 'package:page_transition/page_transition.dart';
import 'package:provider/provider.dart';
import 'package:getwidget/getwidget.dart';
import '../utils/show_snack_bar.dart';
import 'order_confiramtion.dart';

class SignInPage extends StatelessWidget {
  final TextEditingController emailController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  void verifySignIn(String email, String password, BuildContext context) {
    if (email.isEmpty) {
      showSnackBar(context, 'Enter your email');
    } else if (password.isEmpty) {
      showSnackBar(context, 'Enter your password');
    } else {
      context.read<AuthenticationService>().signIn(email, password, context);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: const BoxConstraints.expand(),
      decoration: const BoxDecoration(
        image: DecorationImage(
            image: AssetImage("assets/images/bg.jpg"),
            fit: BoxFit.cover,
            opacity: 0.2),
      ),
      child: Scaffold(
        backgroundColor: Colors.red.withOpacity(0.5),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                padding: const EdgeInsets.only(bottom: 20),
                child: const GFImageOverlay(
                  height: 175,
                  width: 175,
                  shape: BoxShape.circle,
                  image: AssetImage('assets/images/JimmysVarsityLogo.jpg'),
                  boxFit: BoxFit.cover,
                ),
              ),

              Container(
                margin: const EdgeInsets.only(left: 20, right: 20),
                child: TextFormField(
                  scrollPadding: const EdgeInsets.only(bottom: 100),
                  style: const TextStyle(color: Colors.black),
                  controller: emailController,
                  decoration: InputDecoration(
                    hintText: "Email",
                    hintStyle: const TextStyle(color: Colors.black),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(30),
                      borderSide: const BorderSide(
                        color: Colors.black,
                        width: 1.5,
                      ),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(30),
                      borderSide: const BorderSide(width: 2),
                    ),
                    prefixIcon: const Icon(
                      Icons.email_outlined,
                      color: Colors.black,
                    ),
                    iconColor: Colors.black,
                    focusColor: Colors.black,
                  ),
                ),
              ),

              Container(
                margin: const EdgeInsets.only(
                    left: 20, right: 20, top: 10, bottom: 10),
                child: TextFormField(
                  scrollPadding: const EdgeInsets.only(bottom: 200),
                  style: const TextStyle(color: Colors.black),
                  controller: passwordController,
                  obscureText: true,
                  decoration: InputDecoration(
                    hintText: "Password",
                    hintStyle: const TextStyle(color: Colors.black),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(30),
                      borderSide: const BorderSide(
                        color: Colors.black,
                        width: 1.5,
                      ),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(30),
                      borderSide: const BorderSide(width: 2),
                    ),
                    prefixIcon: const Icon(
                      Icons.lock_outline,
                      color: Colors.black,
                    ),
                    iconColor: Colors.black,
                    focusColor: Colors.black,
                  ),
                ),
              ),

              GFButton(
                onPressed: () {
                  verifySignIn(
                    emailController.text.trim(),
                    passwordController.text.trim(),
                    context,
                  );
                },
                shape: GFButtonShape.pills,
                color: Colors.black,
                text: "Sign In",
                size: GFSize.LARGE,
                blockButton: true,
              ),
              const SizedBox(height: 24),
              const Text("Don't have an account?",
                  style: TextStyle(color: Colors.black)),
              const Padding(padding: EdgeInsets.all(5)),
              GFButton(
                onPressed: () {
                  Navigator.of(context).push(
                      MaterialPageRoute(builder: (context) => (SignUpPage())));
                },
                text: "Sign Up",
                borderSide: const BorderSide(color: Colors.black),
                color: Colors.transparent,
                shape: GFButtonShape.pills,
                size: GFSize.LARGE,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

修复方法 #

1. 用SingleChildScrollView包裹页面内容 #

当前页面使用Column且无滚动容器，键盘弹出时底部元素会被遮挡。将Center替换为SingleChildScrollView，并通过SizedBox控制顶部间距替代mainAxisAlignment: MainAxisAlignment.center：

修改后的body部分代码：

body: SingleChildScrollView(
  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 40),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      // 用SizedBox控制顶部间距，适配不同屏幕
      const SizedBox(height: 60),
      // 原有的Logo组件
      Container(
        padding: const EdgeInsets.only(bottom: 20),
        child: const GFImageOverlay(
          height: 175,
          width: 175,
          shape: BoxShape.circle,
          image: AssetImage('assets/images/JimmysVarsityLogo.jpg'),
          boxFit: BoxFit.cover,
        ),
      ),
      // 后续的输入框、按钮等组件保持不变...
    ],
  ),
),

2. 确认Scaffold的resizeToAvoidBottomInset属性 #

确保Scaffold的resizeToAvoidBottomInset为true（默认值），该属性会让页面在键盘弹出时自动调整布局：

Scaffold(
  resizeToAvoidBottomInset: true,
  backgroundColor: Colors.red.withOpacity(0.5),
  // ...其他代码
)

3. 移除无效的scrollPadding设置 #

单个TextFormField的scrollPadding无法解决整体页面的遮挡问题，直接删除这些冗余设置即可。

4. 优化按钮宽度适配（可选） #

如果小屏设备上按钮宽度溢出，可通过MediaQuery限制按钮宽度：

Container(
  width: MediaQuery.of(context).size.width * 0.85,
  child: GFButton(
    // 按钮原有属性
  ),
)

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