Flutter Card 小部件 onTap() 打开 Slidable

Question

我有一个带有

Slidable

子项的

Card

小部件，我想知道当我点击

Slidable

时是否可以打开

Card

？我尝试过使用

SlidableController

但这个类似乎有问题，因为它一直为我返回 null 。此外，我还尝试使用

groupTag

中的

Slidable

属性，但它也不适用于我的项目。以下是示例代码，希望有人能帮忙：

Container(
  decoration: ShapeDecoration(
    // imitating card shape
    shape: Theme.of(context).cardTheme.shape ??
        // material 3 default card shape
        const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(12.0)),
        ),
    // using card color (this is default card color)
    color: Theme.of(context).cardColor,
  ),
  child: Slidable(
    endActionPane: ActionPane(
      motion: const DrawerMotion(),
      children: [
        Expanded(
          child: Container(
            decoration: const BoxDecoration(
              borderRadius: BorderRadius.only(
                bottomRight: Radius.circular(10),
                topRight: Radius.circular(10),
              ),
              color: Colors.purple,
            ),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(
                  onPressed: () {},
                  icon: const Icon(
                    Icons.local_phone_rounded,
                    color: Colors.white,
                  ),
                ),
                IconButton(
                  onPressed: () {},
                  icon: const Icon(
                    Icons.mail_outlined,
                    color: Colors.white,
                  ),
                ),
                IconButton(
                  onPressed: () {},
                  icon: const Icon(
                    Icons.mail_outlined,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
        )
      ],
    ),
    child: const Card(
      margin: EdgeInsets.zero,
      elevation: 0,
      child: ListTile(
        dense: true,
        leading: Icon(Icons.supervised_user_circle, size: 50),
        title: Text('KOO KIAN KEAT'),
        subtitle: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [Text('----')],
        ),
      ),
    ),
  ),
),

Answer 1

遵循文档：

你可以做类似的事情

final controller = SlidableController();

// Open the actions
void _handleOpen() {
  controller.openEndActionPane();
  // OR
  //controller.openStartActionPane();
}

// ...

child: Slidable(
    endActionPane: ActionPane(
      motion: const DrawerMotion(),
      ...
))

因此，将您的卡片放入 Inkwell 小部件中

child: InkWell(
  onTap: _handleOpen,
  child: const Card(
    margin: EdgeInsets.zero,
    elevation: 0,
    child: ListTile(
      dense: true,
      leading: Icon(Icons.supervised_user_circle, size: 50),
      title: Text('KOO KIAN KEAT'),
      subtitle: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [Text('----')],
      ),
    ),
  ),
),