我希望 ListTile 在用户从右到左水平拖动它时显示额外的图标,就像屏幕截图中的行为一样。
所需的输出演示:A ListTile A Dragged ListTile
我的代码:
return ListTile(
contentPadding: const EdgeInsets.all(5),
onTap: () {},
onLongPress: () {},
horizontalTitleGap: 10,
minVerticalPadding: 15,
leading: CircleAvatar(
radius: 34,
child: Text(
account['Name']!.substring(0, 1),
style: const TextStyle(fontSize: 34, fontWeight: FontWeight.bold),
),
),
title: Text(
account['Name']!,
style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
subtitle: FittedBox(
alignment: Alignment.centerLeft,
fit: BoxFit.scaleDown,
child: Text(account['Email']!)),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
GestureDetector(
onTap: () {},
child: const Icon(
Icons.favorite_border,
),
),
GestureDetector(
onTap: () {},
child: const Icon(
Icons.edit,
),
),
GestureDetector(
onTap: () {},
child: const Icon(
Icons.delete,
),
),
],
),
);
您将需要 flutter_slidable 小部件。请参阅此处:https : //pub.dev/packages/flutter_slidable。然后只需按照说明操作即可。如果您需要视觉辅助,请参阅此处:Flutter Slidable
来自 flutter slidable 小部件文档:
Slidable(
actionPane: SlidableDrawerActionPane(),
actionExtentRatio: 0.25,
child: Container(
color: Colors.white,
child: ListTile(
leading: CircleAvatar(
backgroundColor: Colors.indigoAccent,
child: Text('$3'),
foregroundColor: Colors.white,
),
title: Text('Tile n°$3'),
subtitle: Text('SlidableDrawerDelegate'),
),
),
actions: <Widget>[
IconSlideAction(
caption: 'Archive',
color: Colors.blue,
icon: Icons.archive,
onTap: () => _showSnackBar('Archive'),
),
IconSlideAction(
caption: 'Share',
color: Colors.indigo,
icon: Icons.share,
onTap: () => _showSnackBar('Share'),
),
],
secondaryActions: <Widget>[
IconSlideAction(
caption: 'More',
color: Colors.black45,
icon: Icons.more_horiz,
onTap: () => _showSnackBar('More'),
),
IconSlideAction(
caption: 'Delete',
color: Colors.red,
icon: Icons.delete,
onTap: () => _showSnackBar('Delete'),
),
],
);
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句