Flutter排行榜如何实现「定位到我」功能 过滤滚动列表展示当前用户及前后排名

核心逻辑梳理 #

要实现当前用户位于展示列表中间，需按以下步骤执行：

1. 先定位当前用户在全量排行榜列表中的索引位置
2. 计算截取范围：起始位置为「当前索引-5」（不能小于0），结束位置为「当前索引+4」（不能超过列表最大索引）
3. 截取对应范围的元素赋值给过滤列表，同步更新缩放状态

代码修改 #

1. 变量补充 #

你需要先定义当前用户的标识，示例假设当前用户ID为8（可替换为实际业务中的当前用户ID）：

bool _isZoomed = false;
List<int> items = [
  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
];
List<int> _filteredItems = [];
// 新增当前用户ID，替换为你的实际当前用户值
int currentUserId = 8;

2. 功能函数修正 #

zoomOnMe() {
  // 找到当前用户在全量列表中的索引
  int currentIndex = items.indexWhere((user) => user == currentUserId);
  // 处理未找到当前用户的边界情况
  if (currentIndex == -1) return;
  
  // 计算截取的起止索引，自动处理边界
  int startIndex = (currentIndex - 5).clamp(0, items.length - 1);
  int endIndex = (currentIndex + 4).clamp(0, items.length - 1);
  
  // 截取对应范围的元素
  _filteredItems = items.sublist(startIndex, endIndex + 1);
  _isZoomed = true;
  
  setState(() {});
}

3. 组件代码修正 #

原组件中判断条件用了_isSearching，和你定义的_isZoomed不匹配，修改如下：

TextButton(
  onPressed: zoomOnMe,
  child: const Text('Zoom on me'),
),
Expanded(
  child: ListView.builder(
    shrinkWrap: true,
    itemCount: _isZoomed == true ? _filteredItems.length : items.length,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text(
          _isZoomed == true
              ? _filteredItems[index].toString()
              : items[index].toString(),
        ),
      );
    },
  ),
)

可选：滚动定位实现（无需过滤列表） #

如果不需要过滤列表，只是滚动到当前用户位置并展示前后对应数量的用户，可以用ScrollController控制滚动位置：

1. 定义ScrollController：final ScrollController _scrollController = ScrollController();
2. ListView绑定controller：controller: _scrollController,
3. zoomOnMe函数中计算滚动偏移量，调用_scrollController.animateTo(...)滚动到对应位置即可。

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