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'))),
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}