flutter ListView做侧滑200px后定住显示一组按钮,点击删除按钮后删除当前item
要实现这个效果,可以使用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。
原文地址: https://www.cveoy.top/t/topic/fLK 著作权归作者所有。请勿转载和采集!