如何实现Flutter列表指定项的动态顶部/底部锚定效果？

需求梳理 #

核心是让长列表中的选中项始终保持可见，交互逻辑如下：

• 页面初始化时，若选中项不在可视范围内，自动固定在底部
• 滚动至选中项进入可视区域后，它恢复自由滚动状态
• 选中项移出可视区域时，根据滚动方向自动切换固定在顶部或底部

现有方案的问题 #

你拆分列表为前、中、后三部分，用SliverPinnedHeader固定顶部的方式，无法实现底部固定和动态切换固定位置的需求，且无法适配选中项高度不固定的场景。

解决方案：滚动监听+Stack布局 #

通过监听滚动事件判断选中项的可视状态，结合Stack布局实现动态固定效果，保证固定状态与自由状态下的Widget是同一个实例，尺寸与状态完全一致。

代码实现

import 'package:flutter/material.dart';

class PinnedListItemPage extends StatefulWidget {
  final int pinnedIndex;
  final List<Widget> items;

  const PinnedListItemPage({
    super.key,
    required this.pinnedIndex,
    required this.items,
  });

  @override
  State<PinnedListItemPage> createState() => _PinnedListItemPageState();
}

class _PinnedListItemPageState extends State<PinnedListItemPage> {
  late final ScrollController _scrollController;
  final GlobalKey _pinnedItemKey = GlobalKey();
  // 固定状态：0=不固定，1=固定顶部，2=固定底部
  int _pinState = 2;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController()..addListener(_onScroll);
    // 初始获取选中项高度（可选，若需处理遮挡可保留）
    WidgetsBinding.instance.addPostFrameCallback((_) => _updateItemHeight());
  }

  void _updateItemHeight() {
    final renderBox = _pinnedItemKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox != null) {
      // 若需根据高度调整列表滚动偏移，可在此保存高度
    }
  }

  void _onScroll() {
    final renderBox = _pinnedItemKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox == null) return;

    final viewport = RenderAbstractViewport.of(renderBox);
    // 计算选中项顶部刚好进入视图的滚动偏移
    final topRevealOffset = viewport.getOffsetToReveal(renderBox, 0.0).offset;
    // 计算选中项底部刚好离开视图的滚动偏移
    final bottomRevealOffset = viewport.getOffsetToReveal(renderBox, 1.0).offset;
    final currentScrollOffset = _scrollController.offset;

    setState(() {
      if (currentScrollOffset <= topRevealOffset) {
        // 选中项在视图下方，固定在底部
        _pinState = 2;
      } else if (currentScrollOffset >= bottomRevealOffset) {
        // 选中项在视图上方，固定在顶部
        _pinState = 1;
      } else {
        // 选中项在可视区域内，取消固定
        _pinState = 0;
      }
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 原始列表
          ListView.builder(
            controller: _scrollController,
            itemCount: widget.items.length,
            itemBuilder: (context, index) {
              if (index == widget.pinnedIndex) {
                // 给选中项绑定GlobalKey，用于获取位置信息
                return KeyedSubtree(
                  key: _pinnedItemKey,
                  child: widget.items[index],
                );
              }
              return widget.items[index];
            },
          ),
          // 动态显示的固定选中项
          if (_pinState != 0)
            Positioned(
              top: _pinState == 1 ? 0 : null,
              bottom: _pinState == 2 ? 0 : null,
              left: 0,
              right: 0,
              child: widget.items[widget.pinnedIndex],
            ),
        ],
      ),
    );
  }
}

关键说明

1. GlobalKey的作用：绑定选中项Widget，通过其RenderObject获取选中项在视口中的位置信息，判断是否需要固定。
2. 滚动监听逻辑：计算选中项顶部进入视图、底部离开视图的滚动偏移，对比当前滚动位置，切换固定状态。
3. Stack布局：将原始列表与固定Widget叠加，固定状态下直接复用列表中的同一个Widget实例，保证尺寸、状态完全一致。
4. 初始状态处理：默认设置为底部固定，符合页面初始化时选中项不在视野内的需求。

优化建议

• 若页面存在状态栏或底部导航栏，可在Positioned中添加top: MediaQuery.of(context).padding.top或bottom: MediaQuery.of(context).padding.bottom，避免遮挡。
• 若列表项是有状态Widget，确保widget.items中的实例是唯一的，避免状态丢失。

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