Flutter Slidable左滑超出Card布局问题的解决方法咨询

左滑时Slidable的动作面板超出Card范围，主要是组件层级或裁剪设置的问题，给你两种可行的解决方法：

方法一：调整组件层级（推荐） #

把Slidable放在Card外面，让Card作为Slidable的child。这样动作面板会在Card下方，左滑Card时露出按钮，完全不会超出Card的边界：

ListView.builder(
  padding: const EdgeInsets.all(5),
  itemCount: member.length,
  itemBuilder: (BuildContext context, int index) {
    return Slidable(
      // 注意：每个item的key必须唯一，不能用固定的0
      key: ValueKey(index),
      endActionPane: const ActionPane(
        extentRatio: 0.2,
        motion: ScrollMotion(),
        children: [
          SlidableAction(
            onPressed: null,
            backgroundColor: Color(0xFFEEB4B0),
            foregroundColor: Color(0xffCB3A31),
            icon: Icons.delete,
          ),
        ],
      ),
      child: Card(
        child: ListTile(
          leading: const CircleAvatar(),
          title: Text(member[index]["name"]),
          subtitle: Text(member[index]["noHp"]),
          onTap: () {},
        ),
      ),
    );
  },
)

方法二：添加裁剪属性（不修改层级） #

如果不想调整组件结构，给Card添加clipBehavior: Clip.hardEdge，同时给Slidable设置fit: SlidableFit.fitWidth，让Card裁剪掉超出自身范围的内容：

ListView.builder(
  padding: const EdgeInsets.all(5),
  itemCount: member.length,
  itemBuilder: (BuildContext context, int index) {
    return Card(
      // 开启裁剪，超出Card的部分会被切掉
      clipBehavior: Clip.hardEdge,
      child: Slidable(
        key: ValueKey(index),
        // 让Slidable适配Card宽度
        fit: SlidableFit.fitWidth,
        endActionPane: const ActionPane(
          extentRatio: 0.2,
          motion: ScrollMotion(),
          children: [
            SlidableAction(
              onPressed: null,
              backgroundColor: Color(0xFFEEB4B0),
              foregroundColor: Color(0xffCB3A31),
              icon: Icons.delete,
            ),
          ],
        ),
        child: ListTile(
          leading: const CircleAvatar(),
          title: Text(member[index]["name"]),
          subtitle: Text(member[index]["noHp"]),
          onTap: () {},
        ),
      ),
    );
  },
)

注意事项 #

• 一定要把key: const ValueKey(0)改成ValueKey(index)（或基于member的唯一ID），否则多个列表项共用同一个key，会导致滑动时出现状态混乱、UI异常的问题。

内容的提问来源于stack exchange，提问作者Quinn