Flutter：在ListView.builder中逐条跳转到特定数据

Question

ListView中是否可以逐项跳转到特定的数据？

class Test extends StatelessWidget {
  Test({Key? key}) : super(key: key);

  final _list = <String>[
    "INFWARS_CH01_EP01",
    "INFWARS_CH01_EP02",
    "INFWARS_CH01_EP03",
    "INFWARS_CH01_EP04",
    "INFWARS_CH01_EP05",
  ];

  void _scrollToItem() {
    final specificItem = "INFWARS_CH01_EP04";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: _list.length,
        itemBuilder: (context, index) {
          final data = _list[index];
          return Text(data);
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _scrollToItem(),
      ),
    );
  }
}

如您所见，我想使用 _scrollToItem 函数 not by index or by position.

通过特定数据 "INFWARS_CH01_EP04" 跳转到 ListView 中的特定项目

因此 INFWARS_CH01_EP04 的项目 ListView 将位于顶部（滚动）。目前排在首位的是 INFWARS_CH01_EP01.

可以吗？

Answer 1

要滚动到特定项目，您可以：

使用indexOf()方法查找特定项目：
使用 scrollable_positioned_list 包滚动到该项目。

这是一个完整的工作示例：

class Test extends StatelessWidget {
  Test({Key? key}) : super(key: key);
  ItemScrollController _scrollController = ItemScrollController();

  final _list = <String>[
    "INFWARS_CH01_EP01",
    "INFWARS_CH01_EP02",
    "INFWARS_CH01_EP03",
    "INFWARS_CH01_EP04",
  ];

  void _scrollToItem() {
    final specificItem = "INFWARS_CH01_EP04";
    _scrollController.jumpTo(index: _list.indexOf(specificItem));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ScrollablePositionedList.builder(
        itemScrollController: _scrollController,
        itemCount: _list.length,
        itemBuilder: (context, index) {
          final data = _list[index];
          return Text(data);
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _scrollToItem(),
      ),
    );
  }
}

另请参阅：

Answer 2

我用这个包修复它：https://pub.dev/packages/scroll_to_index

因此您可以在 ListView 中通过索引/项目数据滚动/跳转到特定项目。

class Test extends StatelessWidget {
  Test({Key? key}) : super(key: key);
  AutoScrollController _scrollController = AutoScrollController();

  final _list = <String>[
    "INFWARS_CH01_EP01",
    "INFWARS_CH01_EP02",
    "INFWARS_CH01_EP03",
    "INFWARS_CH01_EP04",
  ];

  void _scrollToItem() async {
    final specificItem = "INFWARS_CH01_EP04";
    final index = _list.indexOf(specificItem);
    await _scrollController.scrollToIndex(
      index,
      preferPosition: AutoScrollPosition.begin,
    );
    await _scrollController.highlight(index);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        controller: _scrollController,
        itemCount: _list.length,
        itemBuilder: (context, index) {
          final data = _list[index];
          return AutoScrollTag(
              key: ValueKey(index),
              controller: _scrollController,
              index: index,
              child: Text(data),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _scrollToItem(),
      ),
    );
  }
}

Flutter：在ListView.builder中逐条跳转到特定数据

Flutter: Jump to specific item by item data in ListView.builder

listview

scroll

jump-list

flutter