Flutter中ListView怎样根据index滚动到相应位置

计算机软件开发 · 2024-9-12 10:44:55

好久没有写文章，这一年由于河南村镇银行那破事，不得不腾出大量时间来wq和讨钱。
由于迩来有个Message的需求，点击消息的引用笔墨要滚动到相应的那一项去，以是去pub.dev找了一下相对应的库。纪录一下~
一共试用了三个库。
一、flutter_list_view

1.1  pubspec.yaml引用

dependencies:  flutter_list_view: ^1.1.181.2 代码中利用

1.2.1 创建Controller
FlutterListViewController controller = FlutterListViewController();1.2.2 利用FlutterListView
FlutterListView.separated( itemBuilder: (context, index){    return MessageItemWidget(); }, itemCount: messageList.length, separatorBuilder: (BuildContext context, int index) {    return Divider(color: Colors.grey, height: 0.5,); }, controller: controller,  );1.2.3 点击引用时，调用滚动方法
   controller.sliverController.animateToIndex(       index, duration: Duration(milliseconds: 100),          curve: Curves.easeIn);1.2.4 利用体验
这个库，点击消息引用后可以滚动，但是滚动的不是很精准。
二、indexed_list_view

2.1  pubspec.yaml引用

dependencies:  indexed_list_view: ^2.0.22.2 代码中利用

2.2.1 创建Controller
var controller = IndexedScrollController(keepScrollOffset: false);2.2.2 利用FlutterListView
  IndexedListView.separated(    physics: BouncingScrollPhysics(),    itemBuilder: (context, index) {       return MessageItemWidget();    },    minItemCount: 0,    maxItemCount: messageList.length-1,    emptyItemBuilder: (context, index) => null,    padding: EdgeInsets.only(top: 0.0),    separatorBuilder: (BuildContext context, int index) {       return Divider(color: Colors.grey, height: 0.5,);    },    controller: controller, );2.2.3 点击引用时，调用滚动方法
controller.animateToIndex(index);2.2.4 利用体验
这个库，点击消息引用后可以滚动，而且假如数据许多的话性能也很好，但是它是个infinite(无穷的list)。而且不能设置，以是放弃了。

Similar to a ListView, but lets you programmatically jump to any item, by index. The index jump happens instantly, no matter if you have millions of items.
Limitation: The list is always infinite both to positive and negative indexes. In other words, it can be scrolled indefinitely both to the top and to the bottom.

三、最终用了它：scroll_to_index

3.1  pubspec.yaml引用

dependencies:  scroll_to_index: ^3.0.13.2 代码中利用

3.2.1 创建Controller
var controller = AutoScrollController();3.2.2 利用FlutterListView
   ListView.separated(       itemBuilder: (context, index) {          return AutoScrollTag(             key: ValueKey(index),             controller: controller,             index: index,             child: MessageItemWidget(),          );       },       itemCount: itemCount <= 0 ? 0 : itemCount,       separatorBuilder: (BuildContext context, int index) {          return Divider(color: Colors.grey, height: 0.5,);       },       controller: controller,    );3.2.3 点击引用时，调用滚动方法
controller.scrollToIndex(index);3.2.4 利用体验
这个库，点击消息引用后可以滚动，而且滚动也是很精准的，也不是无穷的list，完全实用。

Flutter中ListView怎样根据index滚动到相应位置

所属分类: 问答交流

新帖推荐: 30日

推荐作品