ArkTs容器组件

一、Column组件

官方文档

沿垂直方向布局的容器。

alignItems

justifyContent

Column({ space: 5 }) {//space设置子组件间隙
        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
        Column().width('50%').height(30).backgroundColor(0x00FFFF)
      }.width('90%').height(100).border({ width: 1 })
      .alignItems(HorizontalAlign.Start)// 设置子元素水平方向对齐方式
      .alignItems(HorizontalAlign.Center)// 设置子元素水平方向对齐方式
      .alignItems(HorizontalAlign.End)// 设置子元素水平方向对齐方式
      .justifyContent(FlexAlign.Start)//设置子组件在垂直方向上的对齐格式。
      .justifyContent(FlexAlign.Center)
      .justifyContent(FlexAlign.End)
      .justifyContent(FlexAlign.SpaceBetween)
      .justifyContent(FlexAlign.SpaceAround)
      .justifyContent(FlexAlign.SpaceEvenly)

二、层叠布局 (Stack)

官方文档

Stack组件通过alignContent参数实现位置的相对移动。支持九种对齐方式。

对齐方式

Stack({ alignContent: Alignment.TopStart }) {
      Text('Stack').width('90%').height('100%').backgroundColor('#e1dede').align(Alignment.BottomEnd)
      Text('Item 1').width('70%').height('80%').backgroundColor(0xd2cab3).align(Alignment.BottomEnd)
      Text('Item 2').width('50%').height('60%').backgroundColor(0xc1cbac).align(Alignment.BottomEnd)
    }.width('100%').height(150).margin({ top: 5 })

Z序控制

Stack容器中兄弟组件显示层级关系可以通过Z序控制的zIndex属性改变。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。

.zIndex(1)

Stack({ alignContent: Alignment.BottomStart }) {
  Column() {
    Text('Stack子元素1').fontSize(20)
  }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)

  Column() {
    Text('Stack子元素2').fontSize(20)
  }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)

  Column() {
    Text('Stack子元素3').fontSize(20)
  }.width(200).height(200).backgroundColor(Color.Grey)
}.width(350).height(350).backgroundColor(0xe0e0e0)

三、Badge角标

可以附加在单个组件上用于信息标记的容器组件。

Badge

// 该示例实现了Badge组件显隐时缩放
@Entry
@Component
struct Index {
  @State badgeCount: number = 1

  build() {
    Column({ space: 40 }) {
      Badge({
        count: this.badgeCount,
        style: {},
        position: BadgePosition.RightTop,
      }) {
        Image($r("app.media.icon"))
        .width(50)
        .height(50)
      }
      .width(55)
      Button('count 0').onClick(() => {
        this.badgeCount = 0
      })
      Button('count 1').onClick(() => {
        this.badgeCount = 1
      })
    }
    .margin({top: 20})
  }
}

四、ColumnSplit分割线

将子组件纵向布局，并在每个子组件之间插入一根横向的分割线。

resizeable

resizeable(value: boolean)

设置分割线是否可拖拽。

// xxx.ets
@Entry
@Component
struct ColumnSplitExample {
  build() {
    Column(){
      Text('The secant line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%')
      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)
      .resizeable(true) // 可拖动
      .width('90%').height('60%')
    }.width('100%')
  }
}