列表侧滑删除

384 阅读1分钟

import 'package:flutter_slidable/flutter_slidable.dart';
...
List items = List.generate(30, (i) => 'text: $i');  // 构建一个列表
...
ListView.builder(
  itemCount: items.length,
  itemExtent: 100,
  itemBuilder: (BuildContext context, int index) {
    return Slidable(
      actionPane: SlidableDrawerActionPane(),
      child: Container(
        height: 100,
        width: double.infinity,
        color: index % 2 == 0 ? Colors.black12 : Colors.black26,
        child: Center(child: Text('item ${items[index]}')),
      ),
      actions: <Widget>[
        IconSlideAction(
          caption: '档案',
          color: Colors.blue,
          icon: Icons.archive,
          onTap: () => print(1111),
        ),
        IconSlideAction(
          caption: '分享',
          color: Colors.indigo,
          icon: Icons.share,
          onTap: () => print(2222),
        ),
      ],
      secondaryActions: <Widget>[
        // IconSlideAction(
        //   caption: '更多',
        //   color: Colors.black45,
        //   icon: Icons.more_horiz,
        //   onTap: () => print(3333),
        // ),
        IconSlideAction(
          caption: '删除',
          color: Colors.red,
          icon: Icons.delete,
          onTap: () {
            items.removeAt(index);
            setState(() {});
              print(4444);
          },
        ),
      ],
    );
  },
),