鸿蒙开发之组件不同状态样式设置stateStyles

开发中会有一种场景,组件(如:按钮)在不同状态下展示的样式不同。例如在normal状态和按下状态显示不同的样式,这个时候就可以通过stateStyles属性来设置组件。

TypeScript 复制代码
@Entry
@Component
struct OfficialStateStylePage {
  @State message: string = 'Hello World'
    //设置第二个文本是否可用
  @State textEnable: boolean = true

    //无状态下样式
  @Styles normalStyle() {
    .backgroundColor(Color.Blue)
    .borderWidth(10)
    .borderColor(Color.Green)
    .borderRadius(10)
    .opacity(1)
  }

    //按下的样式
  @Styles pressedStyle() {
    .backgroundColor(Color.Green)
    .borderWidth(20)
    .borderColor(Color.Red)
    .borderRadius(50)
    .opacity(0.5)
  }

    //不可用时的样式
  @Styles unableStyle() {
    .backgroundColor(Color.Gray)
    .borderWidth(5)
    .borderColor(Color.Gray)
    .borderRadius(5)
    .opacity(0.2)
  }

  build() {
    Row() {
      Column({space:30}) {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            //单纯为了让第二个Text可以点击
            this.textEnable = true
          })
          .stateStyles({
            //注意⚠️这里不是this.normalStyle(),是this.normalStyle
            normal: this.normalStyle,
            pressed: this.pressedStyle
          })

        Text(this.textEnable ? '可以点击' : '不可以点击')
          .enabled(this.textEnable)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            //改变组件是否可用
            this.textEnable = !this.textEnable
          })
          .stateStyles({
            normal: this.normalStyle,
            pressed: this.pressedStyle,
            disabled: this.unableStyle
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

需要说明的是设置的属性都是通用属性。不能设置一些特有属性,例如我想不同状态改变字体大小fontSize,这个做不到。还得需要定义@state属性,通过改变定义的属性来改变。

相关推荐
HarmonyOS小助手11 天前
京东正式开源Taro on HarmonyOS C-API 版本,为鸿蒙应用跨端开发提供高性能框架
harmonyos·鸿蒙·harmonyos next·harmonyos 5.0·鸿蒙5·鸿蒙生态
在人间耕耘12 天前
鸿蒙云函数与云数据库开发实践
鸿蒙
呆dai~13 天前
基于原生能力的键盘控制
harmonyos·鸿蒙
知然18 天前
鸿蒙 Native API 的封装库 h2lib_arkbinder
c++·arkts·鸿蒙
Francek Chen22 天前
【华为Pura80系列】鸿蒙生态再升级:Pura 80 系列影像突破,WATCH 5 开启智能手表新纪元
华为·harmonyos·鸿蒙·智能手表·pura80·watch 5
编号:051723 天前
【HarmonyOS 5.0】开发实战:从UI到Native全解析
鸿蒙·devecostudio·harmonyos5.0
萌虎不虎24 天前
【鸿蒙在 ETS (Extendable TypeScript) 中创建多级目录或文件,可以使用鸿蒙的文件系统 API】
鸿蒙
颜颜yan_24 天前
【HarmonyOS5】UIAbility组件生命周期详解:从创建到销毁的全景解析
架构·harmonyos·鸿蒙·鸿蒙系统
颜颜yan_1 个月前
深入解析HarmonyOS5 UIAbility组件:从核心架构到实战应用
架构·harmonyos·鸿蒙·鸿蒙系统
Raink老师1 个月前
鸿蒙任务项设置案例实战
harmonyos·鸿蒙·案例实战