Flutter中点击Card触发Slidable展开的实现问题求助

问题根源 #

你用Slidable.of(context)返回null，核心原因是CustomCard的context和Slidable不在同一个上下文层级——CustomCard是Slidable的子组件，它的context属于自身组件树，无法向上找到Slidable实例。

修复方案1：用Builder包裹CustomCard，修正上下文 #

把CustomCard用Builder组件包起来，这样onTap里的context是Builder的，能正确关联到上层的Slidable：

Slidable(
  endActionPane: ActionPane(motion: const DrawerMotion(), children: [
    Expanded(
        child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                    topRight: smallCircularRadius,
                    bottomRight: smallCircularRadius),
                gradient: customColors.progressBarGradient),
            child: ContactOptions(
                contact: data.getContact(), email: data.email)))
  ]),
  // 用Builder包裹CustomCard，获取正确的上下文
  child: Builder(
    builder: (context) {
      return CustomCard(
          onTap: () {
            // 这里的context是Builder的，能找到Slidable
            Slidable.of(context)?.openEndActionPane();
          },
          child: ListTile(
              dense: true,
              leading: Icon(Icons.supervised_user_circle, size: 50),
              title: Text('KOO KIAN KEAT'),
              subtitle: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('----', style: customTextStyles.bodySmall)
                  ])));
    },
  ),
)

修复方案2：正确使用SlidableController（推荐） #

之前用SlidableController返回null，大概率是初始化或绑定方式错误。正确步骤如下：

1. 在State类中初始化并销毁控制器：

late final SlidableController _slidableController;

@override
void initState() {
  super.initState();
  _slidableController = SlidableController(context: context);
}

@override
void dispose() {
  _slidableController.dispose();
  super.dispose();
}

2. 绑定控制器到Slidable，在点击事件中调用：

Slidable(
  // 绑定控制器
  controller: _slidableController,
  endActionPane: ActionPane(motion: const DrawerMotion(), children: [
    Expanded(
        child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                    topRight: smallCircularRadius,
                    bottomRight: smallCircularRadius),
                gradient: customColors.progressBarGradient),
            child: ContactOptions(
                contact: data.getContact(), email: data.email)))
  ]),
  child: CustomCard(
      onTap: () {
        // 直接用控制器打开侧滑面板
        _slidableController.openEndActionPane();
      },
      child: ListTile(
          dense: true,
          leading: Icon(Icons.supervised_user_circle, size: 50),
          title: Text('KOO KIAN KEAT'),
          subtitle: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('----', style: customTextStyles.bodySmall)
              ]))),
)

补充说明 #

groupTag属性是用来批量控制多个Slidable（比如同时关闭同组的所有侧滑面板），和单个Slidable的点击展开无关，所以之前用它无效是正常的。

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