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

计算机软件开发 2024-9-12 10:44:55 59 0 来自 中国
好久没有写文章,这一年由于河南村镇银行那破事,不得不腾出大量时间来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,完全实用。
您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-10-18 20:30, Processed in 0.158042 second(s), 32 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表