Flutter中SingleChildScrollView包裹Container滚动失效怎么办

加了SingleChildScrollView仍出现溢出，核心错误是你给滚动视图的子Container设置了固定全屏幕高度：

height: MediaQuery.of(context).size.height

SingleChildScrollView的滚动逻辑是：当子组件高度超过视口（屏幕可见区域）高度时，才会允许滚动来展示超出部分。你现在强行把Container高度锁死和视口高度完全一致，而Container本身有顶部106px的内边距，内部Column的文本、输入框、按钮、固定间距加起来的总高度早就超过了锁死的Container高度，自然会报溢出，滚动逻辑也完全不会触发。
之前你做短表单没出问题，本质是短表单的总内容高度没超过你锁死的屏幕高度，一旦内容变多、或者小屏设备上可视区域变小（比如软键盘弹出），溢出就会出现。

直接删掉Container上那行固定高度的代码即可，修复后的核心结构如下：

class RegisterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.fromLTRB(47, 106, 47, 40), // 建议给底部加个内边距，避免按钮贴到屏幕最下方
          // 移除 height: MediaQuery.of(context).size.height 这行
          child: Column(
            children: [
              // 原有Row、标题、第三方登录入口、Form表单等所有代码保持不变即可
              Row(
                children: [
                Text(
                  'Create account',
                  style: TextStyle(color: Color(0xFFFD007C),
                    fontFamily: 'MontBlanc',
                    fontSize: 28,
                  ),
                ),
                ],
              ),
              SizedBox(height: 19),
              Row(
                children: [
                  Text(
                    'Or sign in with',
                    style: TextStyle(
                      fontFamily: 'TisaSansPro',
                      color: Color(0xFFACACAC),
                    ),
                  ),
                  SizedBox(width: 10),
                  ClipRect(
                    child: Container(
                      height: 20,
                      width: 20,
                      child: Image.asset('assets/icons8-google-48.png'),
                    ),
                  ),
                  SizedBox(width: 10),
                  Icon(
                    Icons.facebook,
                    color: Color(0xFF4267B2),
                  ),
                  SizedBox(width: 10),
                  Icon(
                    Icons.apple,
                    color: Color(0xFF555555),
                  ),
                ],
              ),
              SizedBox(height: 39),
              Form(
                child: Column(
                  children: [
                    TextFormField(
                      decoration: InputDecoration(
                        labelText: 'Email address',
                        floatingLabelBehavior: FloatingLabelBehavior.always,
                        hintText: 'abcdef@gmail.com',
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: BorderSide(color: Color(0xFFECC2D6)),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: BorderSide(color: Color(0xFFFD007C)),
                        ),
                      ),
                    ),
                    SizedBox(height: 36),
                    TextFormField(
                      obscureText: true,
                      decoration: InputDecoration(
                        labelText: 'Password',
                        floatingLabelBehavior: FloatingLabelBehavior.always,
                        hintText: 'Input your password',
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: BorderSide(color: Color(0xFFECC2D6)),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: BorderSide(color: Color(0xFFFD007C)),
                        ),
                      ),
                    ),
                    SizedBox(height: 82),
                    Container(
                      height: 45,
                      width: MediaQuery.of(context).size.width,
                      child: ElevatedButton(
                        onPressed: () => Navigator.pushNamed(context, route.loginPage),
                        style: ElevatedButton.styleFrom(primary: Color(0xFFFD007C), elevation: 4.0),
                        child: Text(
                          'Register',
                          style: TextStyle(
                            color: Colors.white,
                            fontFamily: 'TisaSansPro',
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

• 给两层Column都加上mainAxisSize: MainAxisSize.min属性，避免Column默认撑满父组件的多余高度，滚动逻辑更顺滑
• 如果遇到软键盘弹出遮挡输入框的情况，确认Scaffold的resizeToAvoidBottomInset属性为true（这是默认值，除非你之前手动设置为false），页面会自动在软键盘弹出时调整滚动区域
• 按钮的宽度不用手动拿MediaQuery去设，只要给Container加width: double.infinity就会自动匹配父组件的宽度，适配性更好

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