Flutter中scroll_to_index 实现列表滚动到指定索引的库

scroll_to_index 是一个用于在 Flutter 中实现列表滚动到指定索引的库

依赖

scroll_to_index: ^3.0.1 #滑动位置

使用

class ScrollToIndexExample extends StatefulWidget {
  @override
  _ScrollToIndexExampleState createState() => _ScrollToIndexExampleState();
}

class _ScrollToIndexExampleState extends State<ScrollToIndexExample> {
  late AutoScrollController _controller; // 自动滚动控制器
  static const int ITEM_COUNT = 100; // 列表项总数

  @override
  void initState() {
    super.initState();
    _controller = AutoScrollController(); // 初始化控制器
  }

  @override
  void dispose() {
    _controller.dispose(); // 销毁控制器
    super.dispose();
  }

  // 滚动到指定索引
  Future<void> scrollToIndex(int index) async {
    await _controller.scrollToIndex(index,
        preferPosition:
            AutoScrollPosition.middle, // 目标对齐的位置，begin 左侧  middle居中 end末尾
        duration: Duration(milliseconds: 1000)
        // Duration.zero // 不使用动画，立即滚动

        ); // 滚动到指定位置
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: () {
            scrollToIndex(10); // 滚动到第 10 项
          },
          child: Text('Scroll to Index 10'),
        ),
        Expanded(
          child: ListView.builder(
            controller: _controller, // 使用控制器
            itemCount: 50,
            itemBuilder: (context, index) {
              return AutoScrollTag(
                key: ValueKey(index), // 为每个列表项提供唯一键
                controller: _controller,
                index: index,
                child: Container(
                  height: 50,
                  color: index.isEven ? Colors.blue[100] : Colors.blue[200],
                  child: Center(
                      child: ElevatedButton(
                          onPressed: () {
                            scrollToIndex(index); // 滚动到第 10 项
                          },
                          child: Text('Item $index'))),
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}