flutter - 当用户水平拖动时显示带有额外图标的 Flutter ListTile
问题描述
我希望 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
来自颤动的可滑动小部件文档:
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'),
),
],
);
推荐阅读
- unit-testing - 向 Clojure CLI 工具和 deps.edn 添加单元测试
- sql-server - kafka JDBC Sink Connector 是否跟踪加载到目标数据库的数据?
- sqlite - 使用 SQLite NOT %LIKE% 并返回所有行,即使值为 NULL
- docker-compose - 如何通过 Azure Pipelines 将多个 Docker 映像部署到 Azure 应用服务
- java - 有没有一种在java中使用堆的可靠方法?
- r - S3:在调用 NextMethod() 之前修改默认参数
- java - Java:Three digit Sum - Find out all the numbers between 1 and 999 where the sum of 1st digit and 2nd digit is equal to 3rd digit
- google-apps-script - 为每个编辑器自定义应用程序脚本插件菜单
- python - 令牌认证 - django rest 框架
- flutter - Flutter Slider, How to limit the possible input?