Flutter如何实现顶部放置容器、底部固定行对齐的UI布局

问题根因 #

• 你当前使用了固定数值（550、650、750等）的顶部内边距定位元素，不同设备的屏幕高度、像素密度存在差异，硬编码数值仅能匹配你所用模拟器的尺寸，换到真机上自然会出现错位。
• 需要固定在底部的组件被放在了SingleChildScrollView内部，滚动容器内的元素会跟随滚动，不可能实现固定在屏幕底部的效果。

修复方案 #

直接利用Column+Expanded的布局特性实现底部固定：整体页面用Column承载，Expanded组件包裹中间的内容区域自动撑满剩余高度，底部需要固定的组件直接放在Column的末尾，即可始终钉在屏幕底部，同时适配所有屏幕尺寸。中间的按钮改用相对定位，避免硬编码数值。

修改后完整代码如下：

class IntroPage extends StatelessWidget {
  const IntroPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF29F76),
      body: Column(
        children: [
          // 中间内容区域，自动撑满除底部外的所有高度
          Expanded(
            child: Stack(
              fit: StackFit.expand,
              children: [
                Image.asset(
                  "assets/intropage.png",
                  fit: BoxFit.fill,
                ),
                // 按钮区域，用相对定位调整位置
                Align(
                  alignment: const Alignment(0, 0.4),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      GestureDetector(
                        onTap: () {
                          Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => const SignUpPage()));
                        },
                        child: Container(
                          width: 180,
                          height: 60,
                          decoration: BoxDecoration(
                              color: Colors.white,
                              border: Border.all(
                                color: Colors.white,
                              ),
                              borderRadius:
                              const BorderRadius.all(Radius.circular(40))),
                          child: const Center(
                            child: Text(
                              "Sign Up",
                              style: TextStyle(
                                  fontSize: 20,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.black),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(height: 40),
                      GestureDetector(
                        onTap: () {
                          Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => const SignInPage()));
                        },
                        child: Container(
                          width: 180,
                          height: 60,
                          decoration: BoxDecoration(
                              color: Colors.white,
                              border: Border.all(
                                color: Colors.white,
                              ),
                              borderRadius:
                              const BorderRadius.all(Radius.circular(40))),
                          child: const Center(
                            child: Text(
                              "Sign In",
                              style: TextStyle(
                                  fontSize: 20,
                                  fontWeight: FontWeight.bold,
                                  color: Color(0xFFFE6B01)),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
          // 底部固定区域，始终停留在屏幕底部
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const <Widget>[
                  Expanded(child: Divider(color: Colors.white, thickness: 2, indent: 20, endIndent: 10,)),
                  Text(
                    "  Please Read  ",
                    style: TextStyle(color: Colors.white),
                  ),
                  Expanded(child: Divider(color: Colors.white, thickness: 2, indent: 10, endIndent: 20,)),
                ],
              ),
              const SizedBox(height: 8),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 6),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    GestureDetector(
                      onTap: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) =>
                                    TermsandConditions()));
                      },
                      child: const Text(
                        "Terms & Conditions",
                        style: TextStyle(
                            color: Colors.white,
                            decoration: TextDecoration.underline),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => PrivacyPolicy()));
                      },
                      child: const Text(
                        "Privacy Policy",
                        style: TextStyle(
                            color: Colors.white,
                            decoration: TextDecoration.underline),
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 20),
            ],
          )
        ],
      ),
    );
  }
}

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