如何让Flutter页面最后一个Widget始终固定在屏幕底部？

问题分析 #

你当前的布局嵌套了多层滚动组件（CustomScrollView → SliverToBoxAdapter → SingleChildScrollView → ListView），且在ListView中使用Spacer、Flexible这类依赖父组件约束的widget，在shrinkWrap: true的ListView中无法发挥预期的填充作用。当内容较少时，整个内容区域高度不足，导致底部日期容器无法贴到屏幕底部。

解决方案 #

核心思路是利用SliverFillRemaining组件自动填充CustomScrollView的剩余空间，结合Column组织内容，确保内容不足时底部组件被推到底部，内容过多时正常滚动。

修改后的代码如下：

Scaffold(
  body: CustomScrollView(
    slivers: [
      SliverAppBar(
        bottom: PreferredSize(
          preferredSize: const Size(0, 1),
          child: Container(),
        ),
        pinned: false,
        expandedHeight: MediaQuery.of(context).size.height * 0.4,
        centerTitle: true,
        flexibleSpace: Stack(
          children: [
            Positioned.fill( // 替换原Positioned，确保图片铺满AppBar
              child: FlexibleSpaceBar(
                background: Image.network(
                  loadedEvent.imageUrl,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Positioned(
              bottom: -1,
              left: 0,
              right: 0,
              child: Container(
                height: 20,
                decoration: const BoxDecoration(
                  color: Color(0xfffffcf2),
                  borderRadius: BorderRadius.vertical(
                    top: Radius.circular(20),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
      SliverFillRemaining(
        hasScrollBody: true, // 内容过多时允许整体滚动
        child: Container(
          color: const Color(0xfffffcf2),
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text(
                loadedEvent.title,
                textAlign: TextAlign.center,
                style: const TextStyle(
                  fontSize: 40,
                  fontWeight: FontWeight.bold,
                  letterSpacing: 1.0,
                ),
              ),
              const SizedBox(height: 20), // 用SizedBox精准控制间距
              Expanded( // 让描述区域占据中间剩余空间
                child: SingleChildScrollView( // 描述内容过长时内部滚动
                  child: RichText(
                    text: TextSpan(
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 18.0,
                      ),
                      text: loadedEvent.description,
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 20),
              Container(
                color: Colors.black,
                padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                child: Text(
                  loadedEvent.date,
                  style: const TextStyle(color: Colors.white),
                ),
              ),
            ],
          ),
        ),
      ),
    ],
  ),
);

关键调整点 #

• 移除多余的SingleChildScrollView和ListView嵌套，简化布局层级
• 使用SliverFillRemaining填充CustomScrollView的剩余空间，确保内容不足时底部组件自动贴底
• 采用Column + Expanded组合：Expanded让描述区域占据中间所有可用空间，内容过长时内部通过SingleChildScrollView实现滚动
• 用SizedBox替代Spacer，更精准控制元素间的间距
• 将SliverAppBar中图片的Positioned改为Positioned.fill，确保图片完全覆盖AppBar区域

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