Flutter开发：打开第二个Slidable时如何关闭第一个？

要实现这个需求，你需要全局管理Slidable的展开状态，核心思路是维护一个记录当前展开的Slidable控制器，当新的Slidable展开时，自动关闭之前的那个。

具体实现步骤 #

1. 全局追踪展开状态：在列表的父组件中声明一个变量，用来保存当前处于展开状态的Slidable控制器。
2. 为每个Slidable分配独立控制器：给每个Slidable实例创建专属的SlidableController，绑定到组件上。
3. 监听展开/关闭事件：利用Slidable的onOpened和onClosed回调，更新全局控制器记录，同时在新Slidable展开时关闭旧的控制器。

修改后的完整代码示例 #

假设你的Slidable用于列表项，父组件可以这样编写：

class YourListPage extends StatefulWidget {
  const YourListPage({super.key});

  @override
  State<YourListPage> createState() => _YourListPageState();
}

class _YourListPageState extends State<YourListPage> {
  // 记录当前展开的Slidable控制器
  SlidableController? _currentOpenedController;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10, // 替换为你的列表数据长度
      itemBuilder: (context, index) {
        // 为每个列表项生成独立控制器
        final slidableController = SlidableController();
        
        return Slidable(
          key: UniqueKey(),
          controller: slidableController,
          dragStartBehavior: DragStartBehavior.start,
          // 监听Slidable展开事件
          onOpened: () {
            // 如果已有展开的Slidable，先关闭它
            if (_currentOpenedController != null && _currentOpenedController != slidableController) {
              _currentOpenedController?.close();
            }
            // 更新当前展开的控制器记录
            setState(() {
              _currentOpenedController = slidableController;
            });
          },
          // 监听Slidable关闭事件
          onClosed: () {
            // 如果关闭的是当前记录的控制器，清空记录
            if (_currentOpenedController == slidableController) {
              setState(() {
                _currentOpenedController = null;
              });
            }
          },
          endActionPane: ActionPane(
            motion: const BehindMotion(),
            extentRatio: 0.32,
            children: [
              Flexible(
                child: Row(
                  children: [
                    CustomSlidableAction(
                      onPressed: (value) async {},
                      backgroundColor: constants.Colors.blue,
                      child: SizedBox(
                        height: 20,
                        child: icon, // 确保该icon变量在当前上下文可用
                      ),
                    ),
                    CustomSlidableAction(
                      onPressed: (value) async {},
                      backgroundColor: constants.Colors.red3,
                      child: SizedBox(
                        height: 20,
                        child: constants.Assets.trash.toSVG(),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
          child: child, // 替换为你的列表项内容组件
        );
      },
    );
  }
}

关键细节说明 #

• SlidableController：每个Slidable通过控制器精准控制展开/关闭状态，这是实现单一展开的核心。
• 全局状态同步：通过父组件的_currentOpenedController变量，确保同一时刻只有一个Slidable处于展开状态。
• 回调逻辑：onOpened触发时自动关闭旧控制器并更新记录，onClosed触发时清空对应记录，避免状态残留。

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