要实现这个效果,可以使用ListView的一个插件:flutter_slidable。

首先,需要在pubspec.yaml文件中添加依赖:

dependencies:
  flutter_slidable: ^0.6.0

然后在ListView中使用Slidable组件包裹每个item,并设置Slidable的actions属性来添加删除按钮。如下所示:

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Slidable(
      actionPane: SlidableDrawerActionPane(),
      actionExtentRatio: 0.25,
      child: ListTile(
        title: Text(items[index]),
      ),
      actions: [
        IconSlideAction(
          caption: 'Delete',
          color: Colors.red,
          icon: Icons.delete,
          onTap: () {
            setState(() {
              items.removeAt(index);
            });
          },
        ),
      ],
    );
  },
);

在这个例子中,SlidableDrawerActionPane()设置了Slidable的滑动方向为从右向左滑动。actionExtentRatio属性表示Slidable的宽度占item宽度的比例,这里设置为0.25,也就是Slidable的宽度为item宽度的四分之一。

当Slidable滑动到指定位置时,actions属性中的按钮会显示出来,点击删除按钮时,可以通过调用setState方法来更新items列表,从而删除当前item。

flutter ListView做侧滑200px后定住显示一组按钮,点击删除按钮后删除当前item

原文地址: https://www.cveoy.top/t/topic/fLK 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录