如何用自定义SliverFooter实现底部带ListView且Footer固定的ListView

我明白你想要的效果：不管列表内容是多是少，Footer都能牢牢固定在屏幕底部；当内容超过一屏时，Footer会跟着滚动到列表末尾。你的思路用自定义Sliver来处理视口剩余空间是完全正确的，我帮你完善这个实现，给出完整可运行的代码：

首先是完整的SliverFooter及其对应的RenderObject实现：

import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

class SliverFooter extends SingleChildRenderObjectWidget {
  /// 创建一个填充视口剩余空间的Sliver，用于将子组件固定在底部
  const SliverFooter({Key? key, Widget? child}) : super(key: key, child: child);

  @override
  RenderSliverFooter createRenderObject(BuildContext context) => RenderSliverFooter();
}

class RenderSliverFooter extends RenderSliverSingleBoxAdapter {
  @override
  void performLayout() {
    // 计算视口在当前Sliver之前已经被占据的空间，得到剩余可用空间
    final remainingViewportSpace = constraints.viewportMainAxisExtent - constraints.precedingScrollExtent;
    // 确保剩余空间不会为负数（当列表内容超过一屏时）
    final availableSpace = remainingViewportSpace > 0 ? remainingViewportSpace : 0;

    if (child != null) {
      // 先布局Footer子组件，让它获取自身需要的高度
      child!.layout(
        constraints.asBoxConstraints(minExtent: 0, maxExtent: double.infinity),
        parentUsesSize: true,
      );
      final footerHeight = child!.size.height;

      // 计算Sliver需要占据的空间：如果剩余空间足够，就用剩余空间减去Footer高度，把Footer推到底部；
      // 如果剩余空间不够（列表内容超过一屏），就只占据Footer自身的高度，让它跟着列表滚动到底部
      final sliverOccupiedSpace = availableSpace > footerHeight ? availableSpace - footerHeight : 0;
      final totalPaintExtent = availableSpace > footerHeight ? availableSpace : footerHeight;

      geometry = SliverGeometry(
        scrollExtent: 0, // 这个Sliver不需要额外的滚动空间
        paintExtent: totalPaintExtent, // 绘制时占据的总空间
        maxPaintExtent: totalPaintExtent,
        layoutExtent: sliverOccupiedSpace, // 布局时占据的空间，用来把Footer推到底部
        hitTestExtent: totalPaintExtent,
        hasVisualOverflow: false,
      );
    } else {
      geometry = SliverGeometry.zero;
    }
  }
}

接下来是使用这个SliverFooter的示例组件，用CustomScrollView来组合列表内容和Footer：

class StickyFooterListView extends StatelessWidget {
  final List<String> listItems;
  final Widget bottomFooter;

  const StickyFooterListView({
    Key? key,
    required this.listItems,
    required this.bottomFooter,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        // 你的列表内容，这里用SliverList示例
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) => ListTile(
              title: Text('列表项 ${listItems[index]}'),
              tileColor: index % 2 == 0 ? Colors.grey[100] : Colors.white,
              padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 20),
            ),
            childCount: listItems.length,
          ),
        ),
        // 固定在底部的Footer
        SliverFooter(child: bottomFooter),
      ],
    );
  }
}

// 测试用的主函数
void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('固定底部Footer示例')),
      body: StickyFooterListView(
        // 可以试试把数量改成20，看超过一屏时的效果
        listItems: ['1', '2', '3', '4', '5'],
        bottomFooter: Container(
          height: 60,
          color: Colors.deepOrange,
          child: const Center(
            child: Text('我是固定底部的Footer', style: TextStyle(color: Colors.white, fontSize: 18)),
          ),
        ),
      ),
    ),
  ));
}

实现原理说明： #

1. 空间计算：RenderSliverFooter会先算出当前视口还剩下多少可用空间（列表内容没占满的部分）。
2. Footer布局：先让Footer自身布局，获取它的高度。
3. 空间分配：如果剩余空间足够容纳Footer，就用剩余空间减去Footer高度，让Sliver占据这部分空白，把Footer“推”到屏幕底部；如果列表内容已经占满甚至超过一屏，剩余空间为负，这时候就让Footer跟着列表滚动到底部，不会再强制固定在屏幕底部。

这样就完美实现了你想要的效果：内容不足时Footer贴底，内容过多时Footer随列表滚动到末尾。

内容的提问来源于stack exchange，提问作者S.D.