並べ替えリスト Reorderable List
行をつかんで上下にドラッグすると、他の行がよけて順番を入れ替えられるリスト。
本物の Flutter ウィジェットが動きます(初回は数秒かかります)
どんなもの?
ToDo の優先順位やプレイリストの曲順を、指で直接並べ替えられます。
ReorderableListView を使い、各行に重複しない key を付けます。
PC やWebでは右端に自動でつかむ場所(≡)が出て、スマホでは行の長押しで持ち上がります。
並べ替え結果は onReorderItem で受け取ります(古い onReorder と違い、位置のずれを補正済みの番号が来ます)。
こんなときに
- ユーザーが自分で決める順番がある(優先度・お気に入りの並び・曲順)
避けたい場面
- 日付順や名前順など、自動で決まる順番の一覧
最小コード
ReorderableListView(
onReorderItem: (oldIndex, newIndex) {
setState(() => items.insert(newIndex, items.removeAt(oldIndex)));
},
children: [
for (final item in items)
ListTile(key: ValueKey(item.id), title: Text(item.title)),
],
)使うウィジェット
ReorderableListViewReorderableDragStartListener