鸿蒙ColumnSplit和RowSplit容器的用法（附带实例）

ColumnSplit 是用于将子组件纵向布局，并在相邻两个子组件之间插入一根横向分割线的容器组件。RowSplit 是用于将子组件横向布局，并在相邻两个子组件之间插入一根纵向分割线的容器组件。

ColumnSplit 拥有 4 个属性，分别是：

resizeable：分割线是否可拖曳，默认值为 false；
divider：设置分割线的 margin。默认值为 null，表示分割线上下 margin 为 0；
startMargin：设置分割线与其上方子组件的距离；
endMargin：设置分割线与其下方子组件的距离。

ColumnSplit 的示例代码如下：

Row() {
    Text('ColumnSplit的使用').fontSize(20).fontWeight(800).width('100%').height(30)
}

ColumnSplit() {
    Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
    Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
    Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
    Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
    Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}
.borderWidth(1)
.divider({
    startMargin: 3,
    endMargin: 3
})
.resizeable(true) // 可拖动
.width('90%')
.height('60%')

ColumnSplit 的效果如下图所示：

图 1 ColumnSplit的效果

RowSplit 只有一个 resizeable 属性，用于设置分割线是否可拖曳，默认值为 false。

RowSplit 的示例代码如下：

Row() {
    Text('RowSplit的使用').fontSize(20).fontWeight(800).width('100%').height(30)
}
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)

RowSplit 的效果如下图所示：

图 2 RowSplit 的效果

鸿蒙ColumnSplit和RowSplit容器的用法（附带实例）

相关文章