Flutter 如何以编程方式滚动到列表中的下一个项目？

Question

我想让我的列表由箭头按钮控制，一个向前移动一项，一个向后移动一项，类似这样

我尝试了很多包和解决方案，但大多数都到了列表的末尾或固定的索引号，我想要的是让列表移动到列表中的下一项

Answer 1

只有知道要滚动的确切宽度才能做到这一点。使用 scrollController

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

Answer 2

您可以使用 scroll_to_index 包提供 AutoScrollTag。

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

Flutter 如何以编程方式滚动到列表中的下一个项目？

Flutter how to Programmatically scroll to the next item in the list?

listview

flutter

flutter-layout