<

スワイプで閉じる機能を実装する

「スワイプして閉じる」パターンは、多くのモバイル アプリで一般的です。 たとえば、メール アプリを作成する場合、 ユーザーがスワイプして離れられるようにしたい場合があります 電子メール メッセージをリストから削除します。

Flutter が提供することでこのタスクが簡単になります。Dismissibleウィジェット。 次の手順でスワイプして閉じる方法を実装する方法を学習します。

  1. 項目のリストを作成します。
  2. それぞれのアイテムを包みますDismissibleウィジェット。
  3. 「置き去り」インジケーターを提供します。

1. アイテムのリストを作成する

まず、項目のリストを作成します。詳細については リストの作成方法に関する説明、 に従ってください長いリストの操作レシピ。

データソースを作成する

この例では、 20 個のサンプル項目を使用したいとします。 単純にするために、文字列のリストを生成します。

final items = List<String>.generate(20, (i) => 'Item ${i + 1}');

データソースをリストに変換する

各項目を画面上にリスト表示します。ユーザーはそうしません これらのアイテムはまだスワイプして削除できます。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)

2.各アイテムを閉じることができるウィジェットで囲みます

このステップでは、 ユーザーが、Dismissibleウィジェット。

ユーザーがアイテムをスワイプした後、 リストから項目を削除し、スナックバーを表示します。 実際のアプリでは、より複雑なロジックを実行する必要がある場合があります。 Web サービスやデータベースからアイテムを削除するなど。

を更新しますitemBuilder()を返す関数Dismissibleウィジェット:

itemBuilder: (context, index) {
  final item = items[index];
  return Dismissible(
    // Each Dismissible must contain a Key. Keys allow Flutter to
    // uniquely identify widgets.
    key: Key(item),
    // Provide a function that tells the app
    // what to do after an item has been swiped away.
    onDismissed: (direction) {
      // Remove the item from the data source.
      setState(() {
        items.removeAt(index);
      });

      // Then show a snackbar.
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('$item dismissed')));
    },
    child: ListTile(
      title: Text(item),
    ),
  );
},

3. 「置き去り」インジケーターを提供する

現状では、 このアプリでは、ユーザーがリストから項目をスワイプして削除することはできますが、そうではありません 実行すると何が起こるかを視覚的に示します。 アイテムが削除される合図を提供するには、 彼らがいるときに「置き去り」インジケーターを表示します 項目を画面からスワイプします。この場合、 インジケーターの背景は赤です。

インジケーターを追加するには、 を提供するbackgroundパラメータへのDismissible

lib/{step2.dart (拒否可能) → main.dart (拒否可能)}
@@ -16,6 +16,8 @@
16
16
  ScaffoldMessenger.of(コンテキスト)
17
17
  .showSnackBar(SnackBar(content: Text('$item canceled')));
18
18
  }、
19
+ // 項目がスワイプされると、赤い背景が表示されます。
20
+ 背景: コンテナ(色: Colors.red)、
19
21
  子: ListTile(
20
22
  タイトル: テキスト(項目)、
21
23
  )、

インタラクティブな例

import 'package:flutter/material.dart';

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

// MyApp is a StatefulWidget. This allows updating the state of the
// widget when an item is removed.
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  MyAppState createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  final items = List<String>.generate(20, (i) => 'Item ${i + 1}');

  @override
  Widget build(BuildContext context) {
    const title = 'Dismissing Items';

    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];
            return Dismissible(
              // Each Dismissible must contain a Key. Keys allow Flutter to
              // uniquely identify widgets.
              key: Key(item),
              // Provide a function that tells the app
              // what to do after an item has been swiped away.
              onDismissed: (direction) {
                // Remove the item from the data source.
                setState(() {
                  items.removeAt(index);
                });

                // Then show a snackbar.
                ScaffoldMessenger.of(context)
                    .showSnackBar(SnackBar(content: Text('$item dismissed')));
              },
              // Show a red background as the item is swiped away.
              background: Container(color: Colors.red),
              child: ListTile(
                title: Text(item),
              ),
            );
          },
        ),
      ),
    );
  }
}
c4dcda9b-b5c9-4944-8d2b​​-a9d23b4d434a