Flutter 如何以編程方式滾動到列表中的下一項？

Question

我想讓我的列表由箭頭按鈕控制，一個向前移動一項，一個向后移動一項，像這樣

我嘗試了許多軟件包和解決方案，但大多數都到列表的末尾或固定的索引號我想要的是列表移動到列表中的下一個項目

Answer 1

僅當您知道要滾動的確切寬度時才能完成。 使用scrollController

ScrollController scrollController = ScrollController(
  initialScrollOffset: 100, // or whatever offset you wish
  keepScrollOffset: true,
);

Answer 2

您可以使用提供AutoScrollTag的scroll_to_index package 。

class ST extends StatefulWidget {
  const ST({Key? key}) : super(key: key);

  @override
  _STState createState() => _STState();
}

class _STState extends State<ST> {
  final AutoScrollController controller = AutoScrollController();

  late List<Widget> items;

  int _currentFocusedIndex = 0;

  @override
  void initState() {
    items = List.generate(
      33,
      (index) => AutoScrollTag(
        key: ValueKey(index),
        controller: controller,
        index: index,
        child: Container(
          height: 100,
          width: 100,
          alignment: Alignment.center,
          color: index.isEven ? Colors.deepOrange : Colors.deepPurple,
          child: Text(index.toString()),
        ),
      ),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          IconButton(
            onPressed: () {
              _currentFocusedIndex--;
              if (_currentFocusedIndex < 0) {
                _currentFocusedIndex = items.length - 1;
              }

              controller.scrollToIndex(_currentFocusedIndex,
                  preferPosition: AutoScrollPosition.begin);

              setState(() {});
            },
            icon: const Icon(Icons.arrow_back_ios_new_sharp),
          ),
          Expanded(
            child: ListView(
              scrollDirection: Axis.horizontal,
              controller: controller,
              children: items,
            ),
          ),
          IconButton(
            onPressed: () {
              _currentFocusedIndex++;
              if (_currentFocusedIndex > items.length) {
                _currentFocusedIndex = 0;
              }
              controller.scrollToIndex(_currentFocusedIndex,
                  preferPosition: AutoScrollPosition.begin);
              setState(() {});
            },
            icon: const Icon(Icons.arrow_forward_ios_sharp),
          ),
        ],
      ),
    );
  }
}