Flutter登录页顶部Logo与文字无法滚动问题修复咨询

开发Flutter登录界面时，出现屏幕顶部的Logo和登录文字无法向下滚动，但下方用户名、密码输入框等内容可正常滚动的问题。尝试用SingleChildScrollView和ListView包裹Column结构未解决，直接用SingleChildScrollView包裹后无报错但程序停止运行。

原代码 #

Scaffold(
  body: OrientationBuilder(
    builder: (BuildContext context, Orientation orientation) {
      return SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            UIHelper.getsizedBox(40),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                  child: Align(
                    alignment: Alignment.topCenter,
                    child: Image.asset(
                      Constants.loginLogo,
                      fit: BoxFit.contain,
                      width: 100,
                      height: 100,
                    ),
                  ),
                )
              ],
            ),
            UIHelper.getsizedBox(60),
            Align(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    Constants.login,
                    style: Constants.loginText(),
                    textAlign: TextAlign.center,
                  ),
                  Text(
                    Constants.welcomeBackText,
                    style: Constants.welcomeBack(),
                    textAlign: TextAlign.center,
                  )
                ],
              ),
            ),
            UIHelper.getsizedBox(30),
            Expanded(
              child: Column(
                children: [
                  Flexible(
                    child: SingleChildScrollView(
                      child: Column(
                        children: [
                          UIHelper.getUserTextField(),
                          UIHelper.getsizedBox(10),
                          UIHelper.getPasswordTextField(),
                          Padding(
                            padding: const EdgeInsets.all(12.0),
                            child: Padding(
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 10),
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Checkbox(
                                        activeColor:
                                            Constants.checkboxActiveColor,
                                        value: isChecked,
                                        onChanged: (bool? value) {
                                          setState(() {
                                            isChecked = value ?? false;
                                          });
                                        },
                                      ),
                                      Text(
                                        Constants.rememberMeText,
                                        style:
                                            Constants.rememberMeTextStyle(),
                                      ),
                                    ],
                                  ),
                                  InkWell(
                                    child: Text(
                                      Constants.sifremiUnuttumText,
                                      style: const TextStyle(
                                          color: Colors.amber),
                                    ),
                                    onTap: () {},
                                  )
                                ],
                              ),
                            ),
                          ),
                          Column(
                            children: [
                              ElevatedButton(
                                onPressed: () {},
                                style: Constants.loginButtonStyle(),
                                child: Constants.loginButtonTextStyle(),
                              ),
                              UIHelper.getsizedBox(10),
                              Constants.anotherLoginTextStyle(),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  IconButton(
                                    onPressed: () {},
                                    icon: const Icon(Icons.facebook),
                                  ),
                                  IconButton(
                                    onPressed: () {},
                                    icon: Constants.googleLogo,
                                    style: const ButtonStyle(
                                        iconSize:
                                            MaterialStatePropertyAll(30)),
                                  ),
                                ],
                              ),
                              SizedBox(
                                width: 410,
                                height: 75,
                                child: Image.asset(
                                  'images/camp.jpg',
                                  fit: BoxFit.cover,
                                ),
                              )
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      );
    },
  ),
);

问题根源 #

• SingleChildScrollView的子组件不能包含Expanded：Expanded依赖父组件提供确定的可用空间，而SingleChildScrollView的高度是无限的，会导致布局计算异常甚至程序崩溃。
• 嵌套SingleChildScrollView：页面同时存在两层滚动容器，会导致滚动事件冲突，部分区域无法响应滚动。

修复步骤 #

1. 移除外层Column中的Expanded组件，让所有内容直接作为SingleChildScrollView的子元素。
2. 删除内层的Flexible和SingleChildScrollView，统一由外层的SingleChildScrollView处理整个页面的滚动。

修改后的代码 #

Scaffold(
  body: OrientationBuilder(
    builder: (BuildContext context, Orientation orientation) {
      return SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            UIHelper.getsizedBox(40),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                  child: Align(
                    alignment: Alignment.topCenter,
                    child: Image.asset(
                      Constants.loginLogo,
                      fit: BoxFit.contain,
                      width: 100,
                      height: 100,
                    ),
                  ),
                )
              ],
            ),
            UIHelper.getsizedBox(60),
            Align(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    Constants.login,
                    style: Constants.loginText(),
                    textAlign: TextAlign.center,
                  ),
                  Text(
                    Constants.welcomeBackText,
                    style: Constants.welcomeBack(),
                    textAlign: TextAlign.center,
                  )
                ],
              ),
            ),
            UIHelper.getsizedBox(30),
            // 移除原有的Expanded和内层滚动容器
            Column(
              children: [
                UIHelper.getUserTextField(),
                UIHelper.getsizedBox(10),
                UIHelper.getPasswordTextField(),
                Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 10),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Checkbox(
                              activeColor: Constants.checkboxActiveColor,
                              value: isChecked,
                              onChanged: (bool? value) {
                                setState(() {
                                  isChecked = value ?? false;
                                });
                              },
                            ),
                            Text(
                              Constants.rememberMeText,
                              style: Constants.rememberMeTextStyle(),
                            ),
                          ],
                        ),
                        InkWell(
                          child: Text(
                            Constants.sifremiUnuttumText,
                            style: const TextStyle(color: Colors.amber),
                          ),
                          onTap: () {},
                        )
                      ],
                    ),
                  ),
                ),
                Column(
                  children: [
                    ElevatedButton(
                      onPressed: () {},
                      style: Constants.loginButtonStyle(),
                      child: Constants.loginButtonTextStyle(),
                    ),
                    UIHelper.getsizedBox(10),
                    Constants.anotherLoginTextStyle(),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        IconButton(
                          onPressed: () {},
                          icon: const Icon(Icons.facebook),
                        ),
                        IconButton(
                          onPressed: () {},
                          icon: Constants.googleLogo,
                          style: const ButtonStyle(
                              iconSize: MaterialStatePropertyAll(30)),
                        ),
                      ],
                    ),
                    SizedBox(
                      width: 410,
                      height: 75,
                      child: Image.asset(
                        'images/camp.jpg',
                        fit: BoxFit.cover,
                      ),
                    )
                  ],
                ),
              ],
            ),
          ],
        ),
      );
    },
  ),
);

内容的提问来源于stack exchange，提问作者Mustafa-Aygar