当用户水平拖动时,带有额外图标的 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

来自 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章