Flutter-Shadcn-UI 中 Resizable 组件的自适应布局优化

背景介绍

在 Flutter 开发中，响应式布局是一个常见需求。Flutter-Shadcn-UI 项目提供了一个名为 ShadResizablePanel 的组件，用于创建可调整大小的面板布局。然而，在之前的版本中，这个组件存在一个明显的限制：当父容器尺寸变化时，面板无法自动适应新的尺寸。

问题分析

原实现中，ShadResizablePanel 使用像素值（pixels）作为 defaultSize 的单位。这种设计导致了以下问题：

1. 固定尺寸限制：当父容器尺寸变大时，面板尺寸不会随之扩展
2. 布局不灵活：无法根据可用空间动态调整面板比例
3. 响应式能力弱：无法适应不同屏幕尺寸或窗口大小的变化

解决方案

项目维护者提出了一个优雅的解决方案：将尺寸单位从像素值改为比例值（0到1之间的小数）。这种改变带来了以下优势：

1. 比例布局：使用如0.4和0.6这样的比例值，面板会自动按比例分配可用空间
2. 动态适应：无论父容器如何变化，面板都会保持设定的比例关系
3. 更直观的控制：开发者可以更直观地控制面板间的空间分配

实现细节

新版本的 ShadResizablePanel 组件引入了以下改进：

ShadResizablePanel(
  defaultSize: 0.5,  // 使用比例值而非像素值
  minSize: 0.1,     // 最小比例
  maxSize: 0.8,     // 最大比例
  child: Center(
    child: Text('内容区域'),
  ),
)

使用示例

下面是一个完整的嵌套布局示例，展示了如何构建复杂的响应式面板：

SizedBox(
  width: 300,
  height: 200,
  child: ShadDecorator(
    decoration: ShadDecoration(
      border: ShadBorder.all(
        color: theme.colorScheme.border,
        radius: theme.radius,
      ),
    ),
    child: ClipRRect(
      borderRadius: theme.radius,
      child: ShadResizablePanelGroup(
        children: [
          ShadResizablePanel(
            defaultSize: 0.5,
            child: Center(child: Text('左侧面板')),
          ),
          ShadResizablePanel(
            defaultSize: 0.5,
            child: ShadResizablePanelGroup(
              axis: Axis.vertical,
              children: [
                ShadResizablePanel(
                  defaultSize: 0.4,
                  child: Center(child: Text('右上方面板')),
                ),
                ShadResizablePanel(
                  defaultSize: 0.6,
                  child: Center(child: Text('右下方面板')),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ),
)

最佳实践

1. 合理设置比例：确保所有面板的 defaultSize 总和不超过1
2. 使用约束：通过 minSize 和 maxSize 防止面板过小或过大
3. 嵌套布局：结合不同方向的 PanelGroup 创建复杂布局
4. 响应式设计：考虑在不同尺寸设备上的显示效果

升级建议

对于现有项目，建议逐步替换原有的像素值设置，转而使用比例值。这种改变虽然可能需要对现有布局进行调整，但会带来更好的响应式体验和更灵活的布局控制能力。

总结

Flutter-Shadcn-UI 通过将 ShadResizablePanel 的尺寸单位从像素改为比例，显著提升了组件的响应式能力和布局灵活性。这一改进使得开发者能够更轻松地创建适应不同屏幕尺寸和窗口大小的用户界面，是现代 Flutter 应用开发的理想选择。