Flutter使用SingleChildScrollView仍出现底部溢出、页面无法滚动问题

问题原因 #

• SingleChildScrollView的直接子容器设置了固定高度height: Height * 1，高度刚好等于屏幕高度，超出屏幕的内容会被直接截断，无法触发滚动逻辑。
• SingleChildScrollView内部的Column使用了Expanded、Spacer这类依赖严格父高度约束的组件，而ScrollView的子元素垂直方向无最大高度限制，会触发布局约束冲突，导致报错。

修复后的代码 #

SingleChildScrollView(
  physics: const AlwaysScrollableScrollPhysics(),
  child: Container(
    // 移除固定高度配置，高度跟随内容自适应
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          color: kPrimaryColor,
          child: Column(
            children: [
              SizedBox(
                height: Status * 1,
              ),
              SizedBox(
                height: Height * 0.065,
              ),
              Padding(
                padding: const EdgeInsets.only(left: 13, bottom: 13),
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    'Create Account',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 30,
                        fontFamily: 'SegoeUI-SemiBold'),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 13),
                child: Text(
                  "Please create an account in order to start using your StalkMe Profile.",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontFamily: 'SegoeUI'),
                ),
              ),
              SizedBox(
                height: Height * 0.04,
              ),
            ],
          ),
        ),
        // 移除外层Expanded包裹，直接放容器
        Container(
          color: kPrimaryColor,
          child: Container(
            width: double.infinity,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(30),
                    topRight: Radius.circular(30))),
            child: Form(
              key: _formKey,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  GestureDetector(
                    onTap: () {
                      print('Login print');
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => LoginScreen()),
                      );
                    },
                    child: Padding(
                      padding: const EdgeInsets.only(
                          top: 17, right: 17, bottom: 17),
                      child: Align(
                          alignment: Alignment.centerRight,
                          child: Text(
                            'LOGIN',
                            style: TextStyle(
                              color: kPrimaryColor,
                              fontSize: 16,
                              fontFamily: 'SegoeUI-SemiBold',
                            ),
                          )),
                    ),
                  ),
                  Container(
                    height: 1,
                    width: double.infinity,
                    color: Color(0xffE6E6E6),
                  ),
                  SizedBox(
                    height: Height * 0.03,
                  ),
                  Container(
                    width: Width * 0.9,
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        'Name',
                        style: TextStyle(
                            color: textGreyColor,
                            fontSize: 16,
                            fontFamily: 'SegoeUI'),
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 11),
                    child: Container(
                      width: Width * 0.9,
                      child: TextFormField(
                        controller: userName,
                        validator: (value) {
                          if (value!.isEmpty) {
                            return 'Please enter a name';
                          }
                          return null;
                        },
                        style: TextStyle(
                            color: textGreyColor,
                            fontFamily: 'SegoeUI'),
                        decoration: new InputDecoration(
                          enabledBorder: new OutlineInputBorder(
                            borderSide: const BorderSide(
                                color: Color(0xffE6E6E6), width: 1),
                          ),
                          filled: true,
                          hintStyle: new TextStyle(
                              color: textGreyColor, fontSize: 15),
                          hintText: "Enter Name",
                          fillColor: Colors.white,
                          focusedBorder: OutlineInputBorder(
                            borderSide: const BorderSide(
                                color: Color(0xffE6E6E6), width: 1),
                            borderRadius: const BorderRadius.all(
                              const Radius.circular(10.0),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: Height * 0.02,
                  ),
                  Container(
                    width: Width * 0.9,
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        'Email Address',
                        style: TextStyle(
                            color: textGreyColor,
                            fontSize: 16,
                            fontFamily: 'SegoeUI'),
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 11),
                    child: Container(
                      width: Width * 0.9,
                      child: TextFormField(
                        controller: userEmail,
                        validator: (value) {
                          if (value!.isEmpty || !value.contains('@')) {
                            return 'Please enter a valid email address';
                          }
                          return null;
                        },
                        style: TextStyle(
                            color: textGreyColor,
                            fontFamily: 'SegoeUI'),
                        decoration: new InputDecoration(
                          enabledBorder: new OutlineInputBorder(
                            borderSide: const BorderSide(
                                color: Color(0xffE6E6E6), width: 1),
                          ),
                          filled: true,
                          hintStyle: new TextStyle(
                              color: textGreyColor, fontSize: 15),
                          hintText: "Enter Email Address",
                          fillColor: Colors.white,
                          focusedBorder: OutlineInputBorder(
                            borderSide: const BorderSide(
                                color: Color(0xffE6E6E6), width: 1),
                            borderRadius: const BorderRadius.all(
                              const Radius.circular(10.0),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: Height * 0.02,
                  ),
                  Container(
                    width: Width * 0.9,
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        'Password',
                        style: TextStyle(
                            color: textGreyColor,
                            fontSize: 16,
                            fontFamily: 'SegoeUI'),
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 11),
                    child: Container(
                      width: Width * 0.9,
                      child: TextFormField(
                        controller: userPassword,
                        validator: (value) {
                          if (value!.isEmpty || value.length < 6) {
                            return 'Please enter a 6 digit password';
                          }
                          return null;
                        },
                        obscureText: true,
                        key: ValueKey('name'),
                        style: TextStyle(
                            color: textGreyColor,
                            fontFamily: 'SegoeUI'),
                        decoration: new InputDecoration(
                          enabledBorder: new OutlineInputBorder(
                            borderSide: const BorderSide(
                                color: Color(0xffE6E6E6), width: 1),
                          ),
                          filled: true,
                          hintStyle: new TextStyle(
                              color: textGreyColor, fontSize: 15),
                          hintText: "Enter Password",
                          fillColor: Colors.white,
                          focusedBorder: OutlineInputBorder(
                            borderSide: const BorderSide(
                                color: Color(0xffE6E6E6), width: 1),
                            borderRadius: const BorderRadius.all(
                              const Radius.circular(10.0),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: Height * 0.05, // 替换原来的Spacer，设置固定间距
                  ),
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context);
                    },
                    child: Container(
                      width: Width * 0.9,
                      height: Height * 0.06,
                      decoration: BoxDecoration(
                          color: Color(0xffebf7f7),
                          borderRadius: BorderRadius.circular(5)),
                      child: Center(
                        child: Text(
                          'GO BACK',
                          style: TextStyle(
                              color: kPrimaryColor,
                              fontSize: 16,
                              fontFamily: 'SegoeUI'),
                        ),
                      ),
                    ),
                  ),
                  GestureDetector(
                    child: Padding(
                      padding:
                          const EdgeInsets.only(top: 8, bottom: 18),
                      child: Container(
                        width: Width * 0.9,
                        height: Height * 0.06,
                        decoration: BoxDecoration(
                            color: kPrimaryColor,
                            borderRadius: BorderRadius.circular(5)),
                        child: Center(
                          child: Text(
                            'CREATE ACCOUNT',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 16,
                                fontFamily: 'SegoeUI'),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    ),
  ),
),

核心调整说明 #

• 移除SingleChildScrollView子Container的固定高度配置，让子容器高度跟随内容自适应
• 删除外层无用的Expanded包裹层，ScrollView内部无需通过Expanded分配高度
• 删除Form内Column的Spacer组件，改用固定高度的SizedBox预留底部与表单之间的间距，避免布局约束冲突
• 添加physics: const AlwaysScrollableScrollPhysics()配置，强制页面在小屏设备上可滚动
• 给所有Column添加mainAxisSize: MainAxisSize.min，让Column高度跟随内容自适应，避免多余留白

问题原示意图 #

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