flutter侧滑删除 flutter_slidable使用

安装flutter_slidable

dependencies:
  flutter_slidable: ^0.5.3

使用

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

class SlidAble extends StatefulWidget {
  @override
  _SlidAbleState createState() => _SlidAbleState();
}

class _SlidAbleState extends State {
  List list = [1,2,3,4,5,6,7,8,9];
  final SlidableController slidableController = SlidableController();
  _showSnackBar (String val,int idx) {
    setState(() {
      list.removeAt(idx);
    });
  }
  _showSnack (BuildContext context,type) {
    print(type);
  }
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('侧滑删除'),
      ),
      body: ListView.builder(
        itemCount: list.length,
          itemBuilder: (context,index) {
            return Slidable(
              key: Key(index.toString()),
              controller: slidableController,
              actionPane: SlidableScrollActionPane(), // 侧滑菜单出现方式 SlidableScrollActionPane SlidableDrawerActionPane SlidableStrechActionPane
              actionExtentRatio: 0.20, // 侧滑按钮所占的宽度
              enabled: true,// 是否启用侧滑 默认启用
              dismissal: SlidableDismissal(
                child: SlidableDrawerDismissal(),
                onDismissed: (actionType) {
                  _showSnack(
                      context,
                      actionType == SlideActionType.primary
                          ? 'Dismiss Archive'
                          : 'Dimiss Delete');
                  setState(() {
                    list.removeAt(index);
                  });
                },
                onWillDismiss: (actionType) {
                  return showDialog(
                    context: context,
                    builder: (context) {
                      return AlertDialog(
                        title: Text('Delete'),
                        content: Text('Item will be deleted'),
                        actions: [
                          FlatButton(
                            child: Text('Cancel'),
                            onPressed: () => Navigator.of(context).pop(false),
                          ),
                          FlatButton(
                            child: Text('Ok'),
                            onPressed: () => Navigator.of(context).pop(true),
                          ),
                        ],
                      );
                    },
                  );
                },
              ),
              child: Container(
                color: Colors.white,
                child: ListTile(
                  leading: CircleAvatar(
                    backgroundColor: Colors.indigoAccent,
                    child: Text('$index'),
                    foregroundColor: Colors.white,
                  ),
                  title: Text('Tile n°$index'),
                  subtitle: Text('SlidableDrawerDelegate'),
                ),
              ),
              actions: [
                IconSlideAction(
                  caption: 'Archive',
                  color: Colors.blue,
                  icon: Icons.archive,
                  onTap: () => print('2222'),
                  closeOnTap: false,
                ),
                IconSlideAction(
                  caption: 'Share',
                  color: Colors.indigo,
                  icon: Icons.share,
                  onTap: () => _showSnackBar('Share'),
                ),
              ],
              secondaryActions: [
                IconSlideAction(
                  caption: 'More',
                  color: Colors.black45,
                  icon: Icons.more_horiz,
                  onTap: () => _showSnackBar('More'),
                ),
                IconSlideAction(
                  caption: 'Delete',
                  color: Colors.red,
                  icon: Icons.delete,
                  closeOnTap: false,
                  onTap: () => _showSnackBar('Delete',index),
                ),
              ],
            );
          }
      ),
    );
  }
}

image.png

image.png