Flutter 滚动到指定Item

关于ListView 滚动到指定Item，有很多第三方，如scrollable_positioned_list,但相较而言，flutter_scrollview_observer 使用更为方便，侵入性更小。

文档中提及它可以支持 ListView、GridView，甚至 CustomSrollView，但这里只对ListView 作了简单试用，记录一下。

@override
void initState() {
  super.initState();

  scrollController = ScrollController();
  observerController = ListObserverController(controller: scrollController);
}

将创建的ListObserverController 实例传递给 ListViewObserver

 ListViewObserver(
  controller: observerController,
  child: _buildListView(),
  onObserve: (resultModel) {
  
    //当前页面首个Item
    print('firstChild.index -- ${resultModel.firstChild?.index}');
    //当前页面显示的所有Item
    print('displaying -- ${resultModel.displayingChildIndexList}');
  },
)

创建的ScrollController 实例传递给ListView

_buildListView() {
  return ListView.builder(
    controller: scrollController,
    itemBuilder: (context, index) {
      return Card(child: ListTile(title: Text(index.toString())));
    },
    itemExtent: 70,
    itemCount: 50,
  );
}

滚动到指定下标位置

// 无动画滚动至下标位置
observerController.jumpTo(index: 100)

// 动画滚动至下标位置
observerController.animateTo(
  offset: (double offset) {
    return 200;
  },
  index: 48,
  duration: const Duration(milliseconds: 250),
  curve: Curves.ease,
);

滚动至相应位置时，item 一般位于顶部，所以可以设置offset 向下偏移。