Flutter中如何实现包含AppBar的Scaffold全屏滚动？

问题根源 #

你当前代码滚动失效的核心原因：

• SingleChildScrollView 内部直接嵌套 Stack，而 Stack 的高度仅由非定位子元素决定，这里只有顶部蓝色容器有高度，定位的白色卡片脱离文档流，导致 SingleChildScrollView 无法识别白色卡片的实际高度，自然无法触发滚动。
• 若要实现包含顶部栏（或AppBar）的全屏滚动，不能把顶部栏放在Scaffold的appBar属性中，必须将其纳入滚动体内部。

修复方案 #

方案：重构布局，用Column+负Margin实现悬浮效果 #

移除Stack和Positioned，改用Column组织内容，通过给白色卡片设置负margin实现悬浮在蓝色栏下方的视觉效果，同时让SingleChildScrollView能正确计算整体内容高度：

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            // 顶部自定义栏（若需官方AppBar可直接替换此处）
            Container(
              width: MediaQuery.of(context).size.width,
              padding: const EdgeInsets.symmetric(vertical: 20),
              child: const Padding(
                padding: EdgeInsets.all(20),
                child: Text(
                  "Dashboard",
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 20,
                      color: Colors.white),
                ),
              ),
              decoration: const BoxDecoration(color: Color(0xff09325E)),
            ),
            // 白色卡片：负margin实现悬浮效果
            Container(
              width: MediaQuery.of(context).size.width - 40, // 适配屏幕宽度
              margin: const EdgeInsets.only(top: -40, left: 20, right: 20),
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(15.0)),
              child: Padding(
                padding: const EdgeInsets.all(20),
                child: Column(
                  children: [
                    const SizedBox(
                        width: double.infinity,
                        height: 100,
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            "Kasus Tertinggi",
                            style: TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 20),
                          ),
                        )),
                    const Divider(color: Color(0xffD3D3D3)),
                    Column(children: [
                      // 列表项1
                      _buildCaseItem(),
                      const Divider(color: Color(0xffD3D3D3)),
                      // 列表项2
                      _buildCaseItem(),
                      const Divider(color: Color(0xffD3D3D3)),
                      // 列表项3
                      _buildCaseItem(),
                      const Divider(color: Color(0xffD3D3D3)),
                      // 列表项4
                      _buildCaseItem(),
                      const Divider(color: Color(0xffD3D3D3)),
                    ])
                  ],
                ),
              ),
            ),
            // 底部间距：避免内容被BottomAppBar遮挡
            const SizedBox(height: 80),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          // Navigator.of(context).pushNamed('/create');
        }),
        tooltip: 'Add Product',
        child: const Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        child: Container(
          height: 60.0,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              IconButton(
                iconSize: 30.0,
                icon: const Icon(Icons.home),
                onPressed: () {
                  // Navigator.of(context).pushNamed('/home');
                },
              ),
              IconButton(
                iconSize: 30.0,
                icon: const Icon(Icons.person),
                onPressed: () {
                  Navigator.of(context).pushNamed('/profile');
                },
              )
            ],
          ),
        ),
      ),
    );
  }

  // 提取重复列表项为独立Widget，减少代码冗余
  Widget _buildCaseItem() {
    return Container(
      margin: const EdgeInsets.only(top: 40),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: const [
          Expanded(
            flex: 2,
            child: Text("1",
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 15)),
          ),
          Expanded(
            flex: 6,
            child: Column(
              children: [
                Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      "POLSEK METRO TAMAN SARI",
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 15),
                    )),
                Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      "Pola Waktu 02.00 - 04.00",
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 15),
                    )),
                Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      "Wilayah: KELAGIAN",
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 15),
                    ))
              ],
            ),
          ),
          Expanded(
              flex: 2,
              child: Column(children: [
                Text("1",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 15)),
                Text("KASUS",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 15)),
              ])),
        ],
      ),
    );
  }
}

核心修复点 #

• 移除Stack和Positioned，改用Column+负Margin实现卡片悬浮，确保SingleChildScrollView能正确计算整体内容高度。
• 将顶部栏纳入滚动体内部，实现包含顶部栏的全屏滚动。
• 提取重复列表项为独立Widget，优化代码结构。
• 适配卡片宽度，避免小屏幕溢出；添加底部间距，防止内容被BottomAppBar遮挡。

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