鸿蒙开发之组件不同状态样式设置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小助手19 小时前
【宝藏贴】HarmonyOS官方模板优秀案例 · 第1期:便捷生活-购物中心
harmonyos·鸿蒙·鸿蒙生态
HarmonyOS小助手5 天前
“秒开”时代,HarmonyOS预加载让应用启动快如闪电
harmonyos·鸿蒙·鸿蒙生态
_waylau6 天前
跟老卫学HarmonyOS开发:HarmonyOS ArkTS 获取位置服务
华为·开源·harmonyos·鸿蒙
迷曳6 天前
28、鸿蒙Harmony Next开发:不依赖UI组件的全局气泡提示 (openPopup)和不依赖UI组件的全局菜单 (openMenu)、Toast
前端·ui·harmonyos·鸿蒙
脑袋大大的7 天前
跨端分栏布局:从手机到Pad的优雅切换
javascript·uni-app·uniapp·安卓·鸿蒙·app开发·混合开发
屿筱7 天前
鸿蒙与web混合开发双向通信
鸿蒙·harmonyos5
SuperHeroWu78 天前
【HarmonyOS】ArkTS语法详细解析
华为·harmonyos·arkts·鸿蒙·编程语言·语法·详解
迷曳10 天前
21、鸿蒙Harmony Next开发:组件导航(Navigation)
前端·harmonyos·鸿蒙·navigation
迷曳10 天前
29、鸿蒙Harmony Next开发:深浅色适配和应用主题换肤
ui·华为·harmonyos·鸿蒙