Flutter Dismissible Widget使用详解

Flutter中的Dismissible Widget是一个可以实现滑动删除、拖拽排序等操作的Widget。当Dismissible Widget被放置在一个可滑动的父Widget中时，用户可以通过水平滑动来删除或重新排序子Widget。

Dismissible Widget有以下属性：

• key: 一个用于识别Dismissible Widget的Key，通常使用唯一的ID值。
• child: 要进行滑动删除或拖拽排序的子Widget。
• background: 在子Widget被滑动删除时要显示的背景Widget。
• secondaryBackground: 在子Widget被向另一个方向滑动时要显示的背景Widget。
• onDismissed: 当子Widget被滑动删除时要执行的回调函数，可以在回调函数中更新UI或执行其他操作。
• confirmDismiss: 一个返回Future类型的回调函数，用于控制是否允许子Widget被滑动删除。如果返回的是true，则允许子Widget被删除，如果返回的是false，则不允许子Widget被删除。

下面是一个使用Dismissible Widget的例子：

List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Dismissible Example'),
    ),
    body: ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return Dismissible(
          key: Key(items[index]),
          child: ListTile(
            title: Text(items[index]),
          ),
          background: Container(
            color: Colors.red,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Padding(
                padding: EdgeInsets.only(left: 20.0),
                child: Icon(Icons.delete, color: Colors.white),
              ),
            ),
          ),
          secondaryBackground: Container(
            color: Colors.green,
            child: Align(
              alignment: Alignment.centerRight,
              child: Padding(
                padding: EdgeInsets.only(right: 20.0),
                child: Icon(Icons.check, color: Colors.white),
              ),
            ),
          ),
          onDismissed: (direction) {
            setState(() {
              items.removeAt(index);
            });
          },
          confirmDismiss: (direction) async {
            if (direction == DismissDirection.endToStart) {
              return await showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    title: Text('Confirm'),
                    content: Text('Are you sure you want to delete this item?'),
                    actions: [
                      TextButton(
                        onPressed: () => Navigator.of(context).pop(false),
                        child: Text('Cancel'),
                      ),
                      TextButton(
                        onPressed: () => Navigator.of(context).pop(true),
                        child: Text('Delete'),
                      ),
                    ],
                  );
                },
              );
            } else {
              return true;
            }
          },
        );
      },
    ),
  );
}

在这个例子中，我们在一个ListView Widget中使用了Dismissible Widget来实现滑动删除操作。每个子Widget都被包装在一个Dismissible Widget中，并且有一个唯一的Key值。当子Widget被滑动删除时，我们使用onDismissed回调函数来更新UI，将子Widget从items列表中删除。