FlutterがAndroidのゴミ箱へのドラッグ削除効果を実装 - DraggableとDragTargetの詳細解説

ここに画像の説明を挿入します

記事ディレクトリ

ドラッグ可能の概要
DragTarget の概要
DragTarget は Draggable によって渡されたデータをどのように受信しますか?

ドラッグ可能の概要

Draggable は、ユーザーがジェスチャーを通じてサブウィジェットをドラッグできるようにする Flutter フレームワークのウィジェットです。これは、ユーザーが指定したウィジェットを画面上でドラッグできるジェスチャベースの方法です。ドラッグ可能についての詳細は次のとおりです。

コンストラクタ

ドラッグ可能なコンストラクター

Draggable<T>({
    
    
  Key? key,
  required this.child,
  this.feedback,
  this.data,
  this.axis,
  this.childWhenDragging,
  this.feedbackOffset = Offset.zero,
  this.dragAnchor = DragAnchor.child,
  this.affinity,
  this.onDragStarted,
  this.onDragEnd,
  this.onDraggableCanceled,
  this.maxSimultaneousDrags,
  this.canDrag = true,
  this.gestureRecognizer,
  this.dragAnchorStrategy = DefaultDragAnchorStrategy,
})

パラメータの説明

child (ウィジェット): ドラッグされた子ウィジェット。
フィードバック (ウィジェット?): ドラッグ時に表示されるフィードバックウィジェット。 null の場合、フィードバックコンポーネントとして子を使用します。
データ (T?): ドラッグ中に DragTarget に渡されるデータ。
axis (軸?): ドラッグの軸を制限します。 Axis.horizontal (水平方向) または Axis.vertical (垂直方向) を指定できます。
childWhenDragging (ウィジェット?): ドラッグ時に子を置き換えるウィジェット。 null の場合、ドラッグ中に子が表示されます。
FacebookOffset (オフセット): ドラッグジェスチャに対するフィードバックコンポーネントのオフセット。
ドラッグアンカー (DragAnchor): ドラッグアンカーポイントの位置を制御します。 DragAnchor.child (デフォルト、アンカーポイントは子ウィジェットの中心にあります) または DragAnchor.pointer (アンカーポイントはドラッグジェスチャの位置にあります) にすることができます。
アフィニティ (軸?): 軸への位置合わせを指定するために使用されます。軸は、Axis.horizontal または Axis.vertical です。
onDragStarted (VoidCallback?): ドラッグ開始時のコールバック関数。
onDragEnd (DraggableDetailsCallback?): ドラッグ終了時のコールバック関数。
onDraggableCanceled (DraggableCanceledCallback?): ドラッグがキャンセルされたときのコールバック関数。
maxSimultaneousDrags (int?): 同時ドラッグの最大数。
canDrag (bool): ドラッグを許可するかどうか。 false の場合、Draggable はドラッグジェスチャに応答しません。
gestureRecognizer (DragGestureRecognizer?): カスタムドラッグジェスチャ検出用のジェスチャ認識エンジン。
ragAnchorStrategy (DragAnchorStrategy): ドラッグアンカーポイントを制御するために使用される戦略。

使用例

Draggable<int>(
  data: 42,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: Center(
      child: Text("Drag me"),
    ),
  ),
  feedback: Container(
    width: 120,
    height: 120,
    color: Colors.blue.withOpacity(0.5),
    child: Center(
      child: Text("Dragging..."),
    ),
  ),
  onDragStarted: () {
    
    
    // 拖动开始时执行的操作
    print("Drag started!");
  },
  onDragEnd: (details) {
    
    
    // 拖动结束时执行的操作
    print("Drag ended!");
  },
);

この例では、ユーザーが「ドラッグしてください」というテキストを含む青いコンテナをドラッグすると、onDragStarted コールバックがトリガーされ、「ドラッグが開始されました!」と出力されます。ドラッグの終了時に、onDragEnd コールバックがトリガーされ、「ドラッグは終了しました!」と出力されます。」。ドラッグされたデータは 42 で、DragTarget を通じて受信して処理できます。

DragTarget の概要

DragTarget は、ドラッグ操作を受け取り、ドラッグプロセス中に渡されたデータを処理する Flutter フレームワークのウィジェットです。これは、ドラッグオブジェクトの受け取り方法と処理方法を指定できるようにする方法として、Draggable と組み合わせて使用されます。

以下は DragTarget の詳細な紹介です。

コンストラクタ

DragTarget<T>(
  {
    
    Key? key,
  required this.builder,
  this.onWillAccept,
  this.onAccept,
  this.onLeave,
  this.hitTestBehavior = HitTestBehavior.deferToChild,
  this.feedback,
  this.child,
})

パラメータの説明

builder (Widget Function(BuildContext, List<T?>, List): DragTarget のサブウィジェットを構築するために使用されます。 builder は 3 つのパラメーター、つまり BuildContext、現在ドラッグされているデータリスト、および以前に受信したデータリストを受け入れます。
onWillAccept (bool Function(T)?): ドラッグオブジェクトが DragTarget 領域に入ったときに呼び出され、ドラッグオブジェクトを受け入れるかどうかを決定するために使用されます。 true が返された場合は、onAccept が呼び出されます。
onAccept (void Function(T)?): ドラッグオブジェクトが DragTarget 領域に解放されたときに呼び出され、受け入れられたドラッグデータを処理するために使用されます。
onLeave (void Function(T)?): ドラッグオブジェクトが DragTarget 領域から出るときに呼び出されます。
hitTestBehavior (HitTestBehavior): クリックテストの動作を決定するために使用されます。デフォルト値は HitTestBehavior.deferToChild で、クリックテストが子コンポーネントに委任されることを意味します。
フィードバック (ウィジェット?): ドラッグ時にフィードバックウィジェットをカスタマイズするために使用されます。
child (Widget?): DragTarget エリア内に配置された子ウィジェット用。

使用例

DragTarget<int>(
  builder: (BuildContext context, List<int?> candidateData, List<dynamic> rejectedData) {
    
    
    return Container(
      width: 200,
      height: 200,
      color: Colors.grey,
      child: Center(
        child: Text("Drop here"),
      ),
    );
  },
  onWillAccept: (data) {
    
    
    // 在拖动对象进入 DragTarget 区域时调用
    // 返回 true 表示接受拖动对象
    return true;
  },
  onAccept: (data) {
    
    
    // 在拖动对象被释放到 DragTarget 区域内时调用
    // 处理接受的拖动数据
    print("Accepted data: $data");
  },
  onLeave: (data) {
    
    
    // 在拖动对象离开 DragTarget 区域时调用
  },
)

この例では、DragTarget は、「ここにドロップ」というテキストが表示された 200x200 の灰色のコンテナです。ドラッグオブジェクトがこのコンテナに入ると、 onWillAccept が呼び出され、ドラッグオブジェクトを受け入れるかどうかが決定されます。 true が返された場合、ドラッグオブジェクトが解放されたときに onAccept が呼び出され、受け入れられたドラッグデータが処理されます。 onLeave は、ドラッグオブジェクトが DragTarget 領域から出るときに呼び出されます。このアプローチは、DragTarget が Draggable からデータを受信して処理する、ドラッグアンドドロップインタラクションを実装するために使用できます。

DragTarget は Draggable によって渡されたデータをどのように受信しますか?

DragTarget は、onAccept コールバック関数を通じて Draggable から渡されたデータを受け取ります。このコールバック関数は、ドラッグオブジェクトが DragTarget 領域に放されたときに呼び出されます。

以下は、Draggable と DragTarget を使用してデータを送受信する方法を示す簡単な例です。

import 'package:flutter/material.dart';

void main() {
    
    
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Draggable and DragTarget Example'),
        ),
        body: MyDraggableAndDragTarget(),
      ),
    );
  }
}

class MyDraggableAndDragTarget extends StatefulWidget {
    
    
  @override
  _MyDraggableAndDragTargetState createState() => _MyDraggableAndDragTargetState();
}

class _MyDraggableAndDragTargetState extends State<MyDraggableAndDragTarget> {
    
    
  String data = 'Initial Data';

  @override
  Widget build(BuildContext context) {
    
    
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Draggable<String>(
          data: 'Dragged Data',
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
            child: Center(
              child: Text('Drag Me'),
            ),
          ),
          feedback: Container(
            width: 100,
            height: 100,
            color: Colors.blue.withOpacity(0.5),
            child: Center(
              child: Text('Dragging...'),
            ),
          ),
          childWhenDragging: Container(
            width: 100,
            height: 100,
            color: Colors.blue.withOpacity(0.5),
          ),
        ),
        SizedBox(height: 20),
        DragTarget<String>(
          builder: (BuildContext context, List<String?> candidateData, List<dynamic> rejectedData) {
    
    
            return Container(
              width: 150,
              height: 150,
              color: Colors.grey,
              child: Center(
                child: Text('Drop Here'),
              ),
            );
          },
          onWillAccept: (data) {
    
    
            // 当拖动对象进入 DragTarget 区域时调用
            // 返回 true 表示接受拖动对象
            return true;
          },
          onAccept: (data) {
    
    
            // 当拖动对象被释放到 DragTarget 区域内时调用
            // 处理接受的拖动数据
            setState(() {
    
    
              this.data = data ?? 'No Data';
            });
          },
          onLeave: (data) {
    
    
            // 当拖动对象离开 DragTarget 区域时调用
          },
        ),
        SizedBox(height: 20),
        Text('Received Data: $data'),
      ],
    );
  }
}

この例では、Draggable にはドラッグできるテキストボックスが含まれています。 DragTarget は灰色のコンテナで、このコンテナ上にテキストボックスをドラッグすると、ドラッグされたデータを受け取り、受け取ったデータを画面に表示します。

結論 Flutter は、Google が開発したオープンソースの UI ツールキットで、これを使用すると、プラットフォーム固有のコードを大量に記述せずに、さまざまなプラットフォーム上で高品質で美しいアプリケーションを作成できます。 Flutter のあらゆる側面を学び、掘り下げていきます。基礎知識から高度なテクニック、UIデザインからパフォーマンスの最適化まで、一緒に議論して学び、一緒にFlutterの素晴らしい世界に入りましょう！