如何为自定义ListView中的按钮分配索引以使用scroll_to_index功能？

步骤1：初始化滚动控制器 #

在页面的State类中声明scroll_to_index要求的AutoScrollController，同时把所有按钮的展示文本按页面上的展示顺序合并到一个统一列表里，方便后续搜索匹配索引：

import 'package:scroll_to_index/scroll_to_index.dart';

class _YourPageState extends State<YourPage> {
  final AutoScrollController _scrollController = AutoScrollController();
  // 按页面展示顺序存储所有按钮的文本
  final List<String> allButtonTexts = [];

  @override
  void initState() {
    super.initState();
    // 按顺序添加所有分组的按钮文本
    allButtonTexts.addAll(inEngTaskList().genCond);
    // 其他分组的按钮文本也按展示顺序依次添加
    // allButtonTexts.addAll(inEngTaskList().otherGroup);
  }

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

步骤2：给列表绑定控制器，为按钮添加索引标记 #

修改inEngTaskBody方法，传入滚动控制器，每个按钮用AutoScrollTag包裹，手动指定对应索引即可，原有自定义的onPressed逻辑完全不需要改动。中间插入的标题、分割线等非按钮元素不需要加AutoScrollTag，不会影响索引匹配逻辑：

Widget inEngTaskBody(BuildContext context, AutoScrollController controller) {
  return ListView(
    controller: controller, // 绑定滚动控制器
    scrollDirection: Axis.vertical,
    children: <Widget>[
      const Center(
        child: Text(
          'General Condition',
          style: TextStyle(
            decoration: TextDecoration.underline,
            fontSize: 25,
          ),
        ),
      ),
      // 第一个按钮，对应索引0
      AutoScrollTag(
        key: const ValueKey(0),
        controller: controller,
        index: 0,
        child: OutlinedButton(
          child: Text(inEngTaskList().genCond[0]),
          onPressed: () {/* 保留原有自定义逻辑 */},
        ),
      ),
      const SizedBox(height: 10),
      // 第二个按钮，对应索引1
      AutoScrollTag(
        key: const ValueKey(1),
        controller: controller,
        index: 1,
        child: OutlinedButton(
          child: Text(inEngTaskList().genCond[1]),
          onPressed: () {/* 保留原有自定义逻辑 */},
        ),
      ),
      const SizedBox(height: 10),
      // 第三个按钮，对应索引2
      AutoScrollTag(
        key: const ValueKey(2),
        controller: controller,
        index: 2,
        child: OutlinedButton(
          child: Text(inEngTaskList().genCond[2]),
          onPressed: () {/* 保留原有自定义逻辑 */},
        ),
      ),
      const SizedBox(height: 10),
      // 后续其他分组的标题、按钮都按这个规则处理，按钮按展示顺序依次递增索引即可
    ],
  );
}

页面body赋值修改为：

body: inEngTaskBody(context, _scrollController)

步骤3：实现搜索跳转逻辑 #

在搜索栏的文本变化或提交回调中，匹配到对应的按钮索引后调用滚动方法即可：

void _searchAndScroll(String keyword) {
  // 忽略大小写匹配按钮文本
  final targetIndex = allButtonTexts.indexWhere(
    (text) => text.toLowerCase().contains(keyword.toLowerCase())
  );
  if (targetIndex != -1) {
    // 滚动到对应位置，可自定义对齐位置、动画时长
    _scrollController.scrollToIndex(
      targetIndex,
      preferPosition: AutoScrollPosition.begin,
      duration: const Duration(milliseconds: 300),
    );
  }
}

可选优化：减少重复代码 #

如果不想手动给每个按钮加AutoScrollTag，可以定义按钮配置类统一管理，既保留自定义onPressed的能力，也不用重复写布局代码：

// 定义按钮配置类
class ButtonConfig {
  final String text;
  final VoidCallback onPressed;
  ButtonConfig({required this.text, required this.onPressed});
}

// 页面中声明配置列表
final List<ButtonConfig> genCondButtons = [
  ButtonConfig(text: inEngTaskList().genCond[0], onPressed: () {/* 自定义逻辑1 */}),
  ButtonConfig(text: inEngTaskList().genCond[1], onPressed: () {/* 自定义逻辑2 */}),
  ButtonConfig(text: inEngTaskList().genCond[2], onPressed: () {/* 自定义逻辑3 */}),
];

// 构建列表时直接循环生成当前分组的所有按钮
...
const Center(
  child: Text(
    'General Condition',
    style: TextStyle(
      decoration: TextDecoration.underline,
      fontSize: 25,
    ),
  ),
),
// 循环生成按钮
...genCondButtons.asMap().entries.map((entry) {
  final index = entry.key;
  final config = entry.value;
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      AutoScrollTag(
        key: ValueKey(index),
        controller: controller,
        index: index,
        child: OutlinedButton(
          onPressed: config.onPressed,
          child: Text(config.text),
        ),
      ),
      const SizedBox(height: 10),
    ],
  );
}),
...

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