HarmonyOS 开发组件特色属性 (Blank撑满、属性动画)

136 阅读1分钟

特色属性:displayPriority

优先级(如果 界面显示不下组件则显示属性值最大的, 数值越大优先级越高)

Row() {
  TextChild({text: "开始", color: Color.Red})
}
.border({width: 1})
.width(`80%`)
.height(60)
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Bottom)
.displayPriority(1)

特色引用:$$

/// 引用传递
@Builder
function customView($$:{userName: string}) {
  Text(`传入的值  ${$$.userName}`)
}

// 使用
customView({userName: this.message})

特色组件: Blank

可以将空间撑满

Blank()

image.png

特殊动画:属性动画 animation


Button("点击属性动画")
  .animation({ //需要将 属性动画设置放到所有属性后才回生效,如果放到前面可能出现失效的, 也就是管前面不管后面
    duration: 3000,
    iterations: 6,
    curve: Curve.EaseInOut,
    onFinish: () => {
      this.message = "动画执行完成"
    }
  })
  .onClick(() => {
    this.message = "动画开始执行..."
    this.isChangeWH = !this.isChangeWH
    //、、、、、、、、、
  })
  .fontSize(16)
  .fontColor(Color.White)
  .width(this.widthV)
  .height(this.widthV)

正确写法

Button("点击属性动画")

  .onClick(() => {
    this.message = "动画开始执行..."
    this.isChangeWH = !this.isChangeWH
    //、、、、、
  })
  .fontSize(16)
  .fontColor(Color.White)
  .width(this.widthV)
  .height(this.widthV)
  .animation({
    duration: 3000,
    iterations: 6,
    curve: Curve.EaseInOut,
    onFinish: () => {
      this.message = "动画执行完成"
    }
  })