Shadcn-UI 动态可调整面板组件的实现与优化

背景介绍

Shadcn-UI 是一个 Flutter UI 组件库，其中的 ShadResizablePanelGroup 组件提供了可调整大小的面板功能。在实际应用中，开发者经常需要根据用户操作动态显示或隐藏某些面板，但原始实现在这方面存在一些限制。

问题分析

在 Shadcn-UI 0.18.5 版本中，当开发者尝试使用条件渲染动态显示或隐藏面板时，会遇到以下问题：

1. 异常抛出：当面板被条件渲染移除时，组件会抛出异常
2. 尺寸计算问题：隐藏面板后，剩余面板的尺寸分配不符合预期
3. 灵活性不足：无法像 flex 布局那样自动按比例分配剩余空间

解决方案演进

初始解决方案

开发者最初采用的临时解决方案包括：

• 每次状态变化时改变组件 key 强制重建
• 手动实现类似 flex 的尺寸分配算法
• 为每个子面板添加全局 key

这种方法虽然可行，但存在明显缺点：

• 代码冗余复杂
• 状态管理困难
• 性能开销较大

官方改进方案

Shadcn-UI 维护者提出了更优雅的解决方案：

1. 引入控制器：通过 ShadResizableController 精确控制面板尺寸
2. 状态保存：在隐藏面板前保存当前尺寸，恢复时使用原尺寸
3. 智能尺寸分配：改进内部算法，使剩余空间自动合理分配

最佳实践示例

// 使用控制器管理面板状态
final controller = ShadResizableController();
double storedSize = 0;

// 切换面板可见性
void togglePanel() {
  if (controller.panelsInfo.first.size <= 0.05) {
    controller.resize(index: 0, size: storedSize);
  } else {
    storedSize = controller.panelsInfo.first.size;
    controller.resize(index: 0, size: 0);
  }
}

技术实现细节

内部工作原理

1. flex 基础：组件底层实际使用 flex 布局
2. 百分比转换：用户设置的百分比会转换为 flex 权重
3. 状态管理：每个面板维护自己的尺寸约束和当前状态

关键改进点

1. 条件渲染支持：正确处理面板的动态添加/移除
2. 尺寸自动调整：隐藏面板后，剩余面板智能分配空间
3. 边界处理：自动约束尺寸在 min/max 范围内

使用建议

1. 简单场景：直接使用条件渲染控制面板显示
2. 复杂场景：结合控制器实现精细控制
3. 嵌套布局：支持面板组嵌套使用，创建复杂布局

总结

Shadcn-UI 通过不断改进，使 ShadResizablePanelGroup 组件能够更好地支持动态面板场景。开发者现在可以更自然地实现类似 IDE 的面板管理系统，无需复杂的手动计算和状态管理。这一改进体现了 Flutter 组件库在响应实际开发需求方面的持续进化。