Flutter Key的原理和使用(一) 没有Key会发生什么
Flutter Key的原理和使用(二) Widget 和 Element 的对应关系
Flutter Key的原理和使用(三) LocalKey的三种类型
Flutter Key的原理和使用(四) GlobalKey 的用法
Flutter Key的原理和使用(五) 需要key的实例:可拖动改变顺序的Listview
之前呢,我们介绍了flutter中的几种key,它们相应的原理和使用方式, 这次就来复习一下,看看一个需要用到key的实例.
ReorderableListView
你可能使用过ListView组件,它可以调整,显示和滚动项目列表. 但是不能做的一件事就是在列表中移动项目.幸运的是,有ReorderableListView.
ReorderableListView是不个不常用的ListView组件.它是一个用户可以通过拖动来重新排序其项目的列表组件. 有了它,我们可以通过长按项目来在ListView的滚动方向移动它,将其放在新的位置.
它有一个要求: 所有列表项都必须有一个Key
并且必须实现onReorder方法,它是用户在重新排序列表时调用的回调方法,看一下没有实现这个回调的效果:
ReorderableListView(
children: [
Box(Colors.blue, key: ValueKey(1)),
Box(Colors.green, key: ValueKey(2)),
Box(Colors.red, key: _globalKey),
],
onReorder: (oldIndex, newIndex) {
print('从位置$oldIndex移动到$newIndex');
},
)
可以看到虽然我们交换了红绿两个box,但是松手之后UI并没有变化,就是因为没有没有实现onReorder.
onReorder: (oldIndex, newIndex) , 分别有两个参数,oldIndex和newIndex, 它们代表的含义就是,拖动的widget拖动前和拖动后的index. 看一下打印结果:
从位置2移动到1
说明是从第2个位置移动到了第1个位置(最开始是第0的位置).
每当发生这样改变的时候,我们就需要把list组件修改.
修改一下我们的代码,移除旧位置的widget,在新的位置插入它:
final boxList = [
Box(Colors.blue, key: ValueKey(1)),
Box(Colors.green, key: ValueKey(2)),
Box(Colors.red, key: ValueKey(3)),
];
Widget listWidget() {
return ReorderableListView(
children: boxList,
onReorder: (oldIndex, newIndex) {
print('从位置$oldIndex移动到$newIndex');
final box = boxList.removeAt(oldIndex);
boxList.insert(newIndex, box);
},
);
}
这样就达到了我们移动widget的目的.
但其实将widget从上向下移动的时候,有一个问题,我再移动一下大家看一下:
相应的打印: 从位置0移动到2.
简单看一下原因:
| index | widget |
|---|---|
| 0 | box1 |
| 1 | box2 |
| 2 | box2 |
我们刚才移动的顺序是将box1移动到box2的后面 , 体现在这里就是从0移动到box2后面,也就是说是移动到了2的位置,因为box2的位置是1嘛. 不知道大家有没有理解.
当然了,如果从起始位置移动到最后,就会出现数组越界的报错:
════════ Exception caught by animation library ═════════════════════════════════════════════════════
The following RangeError was thrown while notifying status listeners for AnimationController:
Invalid value: Not in inclusive range 0..2: 3
When the exception was thrown, this was the stack:
#0 List.insert (dart:core-patch/growable_array.dart:11:7)
#1 _MyHomePageState.listWidget.<anonymous closure> (package:flutter_key/home_page.dart:53:17)
#2 SliverReorderableListState._dropCompleted (package:flutter/src/widgets/reorderable_list.dart:646:24)
#3 _DragInfo._dropCompleted (package:flutter/src/widgets/reorderable_list.dart:1163:22)
#4 _DragInfo.startDrag.<anonymous closure> (package:flutter/src/widgets/reorderable_list.dart:1134:9)
...
The AnimationController notifying status listeners was: AnimationController#aca1a(⏮ 0.000; paused; DISPOSED)
════════════════════════════════════════════════════════════════════════════════════════════════════
所以在向下移动的时候,我们要额外处理一下,新的index要减1,之后再进行删除和插入操作:
if(newIndex>oldIndex){
newIndex --;
}
横向列表,就是向右的操作要处理
ReorderableListView的缺点
在拖了几下之后,发现了几个缺点:
- 长按才能触发拖动,容易误触.
- ReorderableListView仍然是一个Listview,就是说它是会滚动的,当列表很长可以滚动的时候,会有很多误操作.
- 一维的ListView,我们都知道listview只能在滚动方向来滑动,ReorderableListView也是一样,不能上下左右来回拖动.
其实我们可以通过自己来实现一个这样的组件.
拖动的话,我们可以通过Draggable来实现,它是一个支持拖拽的widget.
为了避免滚动.可以使用Column和Row.
之后有时间, 会实现一个支持拖动的列表组件,来更好的实现这个效果.