なぞって範囲選択 Drag to Select
写真を長押しして、そのまま指をなぞると、なぞった範囲の写真がまとめて選ばれる。
本物の Flutter ウィジェットが動きます(初回は数秒かかります)
どんなもの?
Google フォトや iOS の写真アプリで、何十枚もの写真を1枚ずつ押さずに選べる操作です。
GestureDetector の onLongPressStart で選択を始め、onLongPressMoveUpdate で指の位置から
何番目の写真の上にいるかを計算し(列数と1マスの大きさから求める)、
押し始めた写真から今の写真まで、読む順の範囲をまとめて選択します。
選んだ写真は少し縮めてチェックを付けると、選ばれていることがひと目で分かります。
こんなときに
- 写真やファイルの一覧から、たくさんまとめて選ばせたい
避けたい場面
- 選ぶ物が数個しかない(1つずつ押せば十分)
最小コード
GestureDetector(
onLongPressStart: (d) => anchor = indexAt(d.localPosition),
onLongPressMoveUpdate: (d) {
final i = indexAt(d.localPosition);
setState(() => selected = {
for (var k = min(anchor, i); k <= max(anchor, i); k++) k,
});
},
child: GridView.builder(...),
)
int indexAt(Offset p) {
final size = width / columns;
return (p.dy ~/ size) * columns + (p.dx ~/ size);
}使うウィジェット
GestureDetector(onLongPress)GridView