一、组件概述

RowSplit 是水平方向可拖动分割布局容器，子组件沿横向（左右）排列，组件间自动插入纵向可拖动分割线，用户可通过拖动分割线动态调整左右子组件的宽度。

• 布局方向：水平（左右排列）
• 核心能力：横向布局、分割线拖动、子组件宽度动态调整
• 支持版本：API 7 及以上
• 适用场景：左右分栏布局、可调整宽度面板、多列横向拖拽布局

二、核心作用

将子组件进行横向布局，并在子组件之间插入纵向分割线，分割线可拖动，用于调整左右两侧子组件的宽度。

三、接口定义

RowSplit()

无参构造方法，用于创建水平分割布局容器。

四、支持属性

除通用属性外，仅支持以下专有属性：

resizeable(value: boolean)

设置分割线是否支持鼠标拖动调整。

• 参数：
  • true：分割线可拖动，支持调整子组件宽度
  • false：分割线不可拖动
• 默认值：false
• 说明：设置为 true 后，用户可拖动分割线改变左右子组件宽度。

五、子组件约束

1. 可包含任意数量子组件。
2. 分割线数量 = 子组件数量 - 1。
3. 初始化时，分割线位置由子组件宽度决定。
4. 初始化后，动态修改子组件宽度不生效，仅可通过拖动分割线调整宽度。

六、使用规则

1. 必须给 RowSplit 设置明确宽度和高度。
2. 子组件需设置宽度、高度，才能正常参与布局。
3. 分割线拖动仅调整相邻子组件宽度，不影响其他组件。
4. 子组件宽度调整范围受自身最大/最小宽度限制。

七、完整可运行示例代码

@Entry
@Component
struct RowSplitExample {
  build() {
    Column() {
      Text('The second line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%')
      RowSplit() {
        Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
        Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
        Text('3').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
        Text('4').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
        Text('5').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
      }
      .resizeable(true) // 可拖拽
      .width('90%').height(100)
    }.width('100%').margin({ top: 5 })
  }
}

运行效果如图：

鼠标拖动如图：

总结

1. 初始化后不可动态修改子组件宽度，只能通过分割线调整。
2. 若子组件因 margin/border/padding 导致宽度超出分割线间距，拖动功能会失效。
3. 必须设置 RowSplit 的 width 和 height，否则无法正常布局。
4. 仅支持水平布局，垂直方向可拖动分割请使用 ColumnSplit。

与 ColumnSplit 区别

组件	布局方向	分割线方向	调整方向
RowSplit	横向（左右）	纵向	调整宽度
ColumnSplit	纵向（上下）	横向	调整高度

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力！