如何配置滑块与容器实现双容器动态宽度自适应布局？

问题 #

如何创建一种动态布局，使两个容器根据滑块值调整宽度？第一个容器宽度可在20%-50%比例范围内自定义，第二个容器需动态填充剩余空间且宽度不得低于50%。需保证调整平滑成比例，同时维持两者宽度约束，该如何配置滑块与容器属性实现此功能？

实现步骤 #

1. 应用初始化（OnStart） #

在应用的OnStart事件中设置初始宽度比例：

Set(ratio1, 0.5); // 容器1初始宽度比例（50%）
Set(ratio2, 0.5); // 容器2初始宽度比例（50%）

2. 容器宽度配置 #

• 左侧容器（Container1）
  Width 属性设置为：

  Parent.Width * ratio1
  

• 右侧容器（Container2）
  Width 属性设置为：

  Parent.Width * ratio2
  

3. 滑块属性配置 #

• SliderRatio1（控制容器1宽度比例）
  • Min: 0.3
  • Max: 0.5
  • Default: 0.5
• SliderRatio2（同步显示容器2宽度比例）
  • Min: 0
  • Max: 1
  • Default: 1 - SliderRatio1.Value

4. 滑块变更事件（OnChange） #

在SliderRatio1的OnChange事件中添加以下代码，实时更新容器比例：

Set(ratio1, SliderRatio1.Value); // 更新容器1宽度比例
Set(ratio2, 1 - ratio1);         // 自动计算并更新容器2宽度比例

效果示意图 #

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