鸿蒙开发之相对布局、倒计时TextTimer示例代码

//组件居中显示
 
RelativeContainer() {
  Text("居中组件")
    .width(100)
    .height(100)
    .alignRules({
      center: {anchor: "__container__", align: VerticalAlign.Center}, // 垂直居中
      middle: {anchor: "__container__", align: HorizontalAlign.Center} // 水平居中
    })
}

//组件相对排列
 
RelativeContainer() {
  Text("组件A")
    .width(100)
    .height(100)
    .backgroundColor(Color.Red)
    .id("A")
  Text("组件B")
    .width(100)
    .height(100)
    .backgroundColor(Color.Blue)
    .alignRules({
      top: {anchor: "A", align: VerticalAlign.Bottom}, // 组件B的顶部对齐组件A的底部
      left: {anchor: "A", align: HorizontalAlign.End}  // 组件B的左边缘对齐组件A的右边缘
    })
}

textTimerController: TextTimerController = new TextTimerController();

@Entry
@Component
struct time {
  textTimerController: TextTimerController = new TextTimerController();
 
  onPageShow(): void {
    this.textTimerController.start()
 
  }
 
  @State countdown: boolean = true
 
  build() {
    Column() {
      TextTimer({ count: 5000, controller: this.textTimerController, isCountDown: this.countdown })
        .format('ss')
        .fontSize(25)
        .onTimer(
          (utc: number, passtime) => {
            if (passtime == 5) {
              this.getUIContext().getRouter().pushUrl({ url: "pages/RelativeContainer" })
            }
          }
        )
    }.width('100%')
  }
}