Flutter技巧：在SingleChildScrollView中按需延伸底部组件至屏幕底部

核心问题是SingleChildScrollView无法让子元素自动填充剩余屏幕空间，当列表内容较少时，灰色背景无法延伸到屏幕底部。我们可以通过CustomScrollView结合SliverFillRemaining实现需求，既保证整页滚动，又能在内容不足时让灰色背景撑满屏幕。

修改步骤： #

1. 替换SingleChildScrollView为CustomScrollView，利用Sliver组件的自适应特性
2. 将顶部固定内容（蓝色余额栏、New Entry区域）用SliverToBoxAdapter包裹，作为滚动列表的固定部分
3. 底部灰色区域用SliverFillRemaining包裹，自动填充屏幕剩余空间；当列表内容过多时，整个页面可正常滚动

修改后的完整代码 #

import 'package:flutter/material.dart';

late int countOfItems;

class TestScreen extends StatefulWidget {
  const TestScreen({Key? key}) : super(key: key);

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      appBar: AppBar(
        title: const Text("This App Title"),
        leading: GestureDetector(
          onTap: () {
            /* Write main menu listener code here */
          },
          child: const Icon(
            Icons.menu,
          ),
        ),
      ),
      body: CustomScrollView(
        slivers: [
          // 顶部固定区域：蓝色余额栏
          SliverToBoxAdapter(
            child: Container(
              padding: const EdgeInsets.symmetric(vertical: 33, horizontal: 25),
              height: 140,
              decoration: BoxDecoration(color: Colors.blue.shade800),
              child: const Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        "Your current balance",
                        style: TextStyle(fontSize: 17, color: Colors.white),
                      ),
                      SizedBox(height: 10),
                      Text(
                        "\$250.00",
                        style: TextStyle(
                            fontSize: 36,
                            color: Colors.white,
                            fontWeight: FontWeight.bold),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
          // 间距
          SliverToBoxAdapter(child: const SizedBox(height: 25)),
          // New Entry标题
          SliverToBoxAdapter(
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 25),
              child: const Text(
                "New entry",
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 18,
                    fontWeight: FontWeight.bold),
              ),
            ),
          ),
          // 间距
          SliverToBoxAdapter(child: const SizedBox(height: 25)),
          // New Entry操作区域
          SliverToBoxAdapter(
            child: Column(
              children: [
                const Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text(
                      "Opt 1",
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 28,
                          fontWeight: FontWeight.bold),
                    ),
                    Text(
                      "Opt 2",
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 28,
                          fontWeight: FontWeight.bold),
                    ),
                    Text(
                      "Opt 3",
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 28,
                          fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
                Container(
                  padding: const EdgeInsets.symmetric(vertical: 33, horizontal: 25),
                  child: const Row(
                    children: [
                      Padding(
                        padding: EdgeInsets.fromLTRB(20, 8, 20, 8),
                        child: Text(
                          "Enter amount:",
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                      Expanded(
                        child: TextField(
                          maxLength: 12,
                          textAlign: TextAlign.center,
                          style: TextStyle(fontSize: 26),
                          decoration: InputDecoration(
                            hintText: '0.00',
                            counterText: "",
                          ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.fromLTRB(15, 0, 10, 0),
                        child: IconButton(
                          icon: Icon(Icons.check_circle),
                          color: Colors.blue,
                          iconSize: 40.0,
                          onPressed: null,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          // 底部灰色区域：自动填充剩余空间
          SliverFillRemaining(
            hasScrollBody: false,
            child: Container(
              padding: const EdgeInsets.fromLTRB(25, 20, 25, 0),
              decoration: BoxDecoration(color: Colors.grey.withOpacity(0.2)),
              child: const Column(
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Text(
                      "Recent items",
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 18,
                          fontWeight: FontWeight.bold),
                    ),
                  ),
                  SizedBox(height: 15),
                  Expanded(child: TestListView()),
                  SizedBox(height: 10),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class TestListView extends StatefulWidget {
  const TestListView({Key? key}) : super(key: key);

  @override
  State<TestListView> createState() => _TestListViewState();
}

class _TestListViewState extends State<TestListView> {
  @override
  void initState() {
    super.initState();
    _getItems();
  }

  void _getItems() {
    // 可切换测试不同状态：-1加载、0空、3少量、10多量
    // countOfItems = -1;
    // countOfItems = 0;
    // countOfItems = 3;
    countOfItems = 10;

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    if (countOfItems == -1) {
      return const Align(
        alignment: Alignment.topCenter,
        child: Padding(
          padding: EdgeInsets.fromLTRB(0, 28, 0, 28),
          child: CircularProgressIndicator(),
        ),
      );
    } else if (countOfItems == 0) {
      return const Padding(
        padding: EdgeInsets.fromLTRB(0, 28, 0, 28),
        child: Text(
          "No items to show",
          style: TextStyle(color: Colors.black, fontSize: 16),
        ),
      );
    }
    return ListView.separated(
      physics: const NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      separatorBuilder: (BuildContext context, int index) => Divider(
        color: Colors.grey.withOpacity(0.2),
        endIndent: 10,
        indent: 10,
      ),
      itemCount: countOfItems,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text("ListTile $index"),
          titleTextStyle: const TextStyle(fontWeight: FontWeight.w500, color: Colors.black),
          visualDensity: const VisualDensity(horizontal: 0, vertical: -4),
        );
      },
    );
  }
}

关键说明： #

• SliverFillRemaining：设置hasScrollBody: false，确保内容不足时填充剩余屏幕空间，内容超屏时触发整页滚动
• TestListView外层加Expanded：让列表在灰色区域内自适应高度，避免无边界约束错误
• 保留原TestListView的shrinkWrap: true和NeverScrollableScrollPhysics：确保列表不单独滚动，跟随整页滚动

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