Shadcn-UI组件库中Resizable面板的响应式布局优化方案

问题背景

在Flutter的Shadcn-UI组件库中，Resizable面板组件存在一个典型的布局适应性问题。当用户调整窗口大小时，面板的尺寸不会自动适应新的窗口尺寸。这是因为当前实现中使用了固定的像素值(defaultSize)作为面板的默认尺寸，这种静态尺寸定义方式无法响应父容器尺寸的变化。

技术分析

原有实现的问题

原实现采用像素单位定义面板尺寸：

• defaultSize属性为final类型且使用像素值
• 当父容器尺寸变化时，面板保持固定像素尺寸
• 导致在大尺寸窗口中显得过小，破坏整体布局比例

解决方案设计

核心改进思路是将静态像素单位改为动态比例单位：

1. 使用0-1之间的double值表示面板占父容器的比例
2. 默认尺寸(defaultSize)改为比例值
3. 新增minSize/maxSize属性控制缩放范围
4. 内部计算时根据父容器实际尺寸换算为具体像素

实现方案详解

比例单位的使用

ShadResizablePanel(
  defaultSize: 0.5,  // 占父容器50%
  minSize: 0.1,     // 最小10%
  maxSize: 0.8,     // 最大80%
  child: ... 
)

嵌套布局支持

方案支持嵌套的Resizable面板组，通过axis属性控制方向：

ShadResizablePanelGroup(
  axis: Axis.vertical,  // 垂直方向排列
  children: [
    ShadResizablePanel(defaultSize: 0.4),
    ShadResizablePanel(defaultSize: 0.6)
  ]
)

边界处理

• 自动计算最小/最大像素尺寸
• 拖拽手柄限制在有效范围内
• 比例值自动适应父容器变化

应用场景

这种响应式设计特别适合：

1. 需要自适应不同屏幕尺寸的应用
2. 可调整布局的管理后台
3. 需要保持特定比例的可视化工具
4. 多面板协作的IDE类应用

升级建议

对于现有项目迁移：

1. 将像素值转换为比例值（原尺寸/父容器尺寸）
2. 合理设置minSize/maxSize保证可用性
3. 测试嵌套布局在不同尺寸下的表现

该改进方案已合并到主分支，将包含在下个正式版本中发布。这种设计模式不仅解决了特定问题，也为组件库的响应式设计提供了更好的实践范例。