好久没有写文章,这一年由于河南村镇银行那破事,不得不腾出大量时间来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,完全实用。 |