ColumnSplit

2024-12-24  本文已影响0人  flfljh

ColumnSplit是 HarmonyOS 中的一个组件,用于将子组件纵向布局,并在每个子组件之间插入横向分割线。以下是其简易使用说明:

1. 支持版本与基本功能

2. 子组件

3. 接口与属性

4. 使用示例

以下是一个简单的ColumnSplit使用示例:

// xxx.ets
@Entry
@Component
struct ColumnSplitExample {
  build() {
    Column(){
      // 提示文本
      Text('The secant line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%')
      ColumnSplit() {
        // 子组件1
        Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
        // 子组件2
        Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
        // 子组件3
        Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
        // 子组件4
        Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
        // 子组件5
        Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
      }
      // 设置组件边框宽度
     .borderWidth(1)
      // 设置分割线可拖动
     .resizeable(true) 
      // 设置组件宽度和高度
     .width('90%').height('60%')
    }.width('100%')
  }
}

在上述示例中,首先创建了一个Column组件,在其中添加了一个提示文本和一个ColumnSplit组件。ColumnSplit组件包含了 5 个Text子组件,每个子组件设置了不同的背景色、宽度、高度和文本对齐方式。通过设置resizeable(true)使分割线可拖动,borderWidth(1)设置了ColumnSplit组件的边框宽度,width('90%').height('60%')设置了ColumnSplit组件的宽度和高度。

注意事项:

上一篇 下一篇

猜你喜欢

热点阅读