应用Slidable时Flutter ListTile内容覆盖Card

Question

我正在我的

Slidable

小部件上应用

Card

小部件，以允许用户根据自己的需求采取操作。但是，当我滑动卡片时，卡片中的内容会覆盖

Card

小部件，从 UI 来看，该小部件看起来不太好。以下是我的示例代码，附图是我当前获得的输出。

示例代码：

Card(
  child: Slidable(
    endActionPane: ActionPane(motion: const DrawerMotion(), children: [
      Expanded(
        child: Container(
            decoration: BoxDecoration(
                borderRadius: const BorderRadius.only(
                    bottomRight: Radius.circular(10),
                    topRight: Radius.circular(10)),
                gradient: customColors.progressBarGradient),
            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: ListTile(
      dense: true,
      leading: const AccountIcon(size: 42),
      title: Text('KOO KIAN KEAT'),
      subtitle:
          Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Text('----')
      ])),
));

Answer 1

我用

Card

小部件包裹了整个

Slidable

小部件，使其滑动在一起。我还用

Slidable

小部件包裹了

Container

，它模仿卡片样式，并在开始滑动时调整形状和颜色（开始滑动时查看卡片小部件的末尾）：

// This container follows card decoration and adjusts shape (and backgroud color) when sliding
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('----')],
        ),
      ),
    ),
  ),
),