HarmonyOS NEXT学习——@Styles、@Extend、stateStyles

@Styles装饰器 定义组件重用样式

  • 仅支持通用属性通用事件
  • 不支持参数
  • 可以定义全局和组件内使用,全局使用需要加function
javascript 复制代码
// 全局
@Styles function functionName() { ... }

// 在组件内
@Component
struct FancyUse {
  @Styles fancy() {
    .height(100)
  }
}
  • 组件内@Styles的优先级高于全局@Styles。
javascript 复制代码
// 定义在全局的@Styles封装的样式
@Styles function globalFancy  () {
  .width(100)
  .height(100)
  .backgroundColor(Color.Pink)
}

@Entry
@Component
@Preview
struct FancyUse {
  @State heightValue: number = 100
  // 定义在组件内的@Styles封装的样式
  @Styles fancy() {
    .width(200)
    .height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.heightValue = 200
    })
  }

  build() {
    Column({ space: 10 }) {
      // 使用全局的@Styles封装的样式
      Text('FancyA')
        .globalFancy()
        .fontSize(30)
      // 使用组件内的@Styles封装的样式
      Text('FancyB')
        .fancy()
        .fontSize(30)
      //组件内优先级高于全局
      Text('FancyAB')
        .globalFancy()
        .fancy()
        .fontSize(30)
    }
    .alignItems(HorizontalAlign.Start)
  }
}

@Extend装饰器:定义扩展组件样式

  • @Styles用于样式的扩展
  • 可以传参数
  • 仅能全局定义
javascript 复制代码
@Extend(Text) function fancyText(weightValue: number, color: Color,clickE:()=>void) {
  .fontStyle(FontStyle.Italic)
  .fontSize(weightValue)
  .backgroundColor(color)
  .onClick(clickE)
}
@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World'

  onClickHandler(){
    console.log('40')
  }
  build() {
    Column() {
      Text(`${this.label}`)
        .fancyText(30, Color.Blue,()=>{console.log('30')})
      Text(`${this.label}`)
        .fancyText(40, Color.Pink,()=>{this.onClickHandler()})
      Text(`${this.label}`)
        .fancyText(50, Color.Orange,()=>{console.log('50')})
    }
    .alignItems(HorizontalAlign.Start)
  }
}

三个点击事件

stateStyles 多态样式

stateStyles是属性方法,可以根据UI内部状态来设置样式,类似于css伪类,但语法不同。ArkUI提供以下五种状态:

  • focused:获焦态。
  • normal:正常态。
  • pressed:按压态。
  • disabled:不可用态。
  • selected:选中态。
javascript 复制代码
@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World'

  build() {
    Column() {
      Text(`${this.label}`)
        .stateStyles({
          normal:{
            .backgroundColor(Color.Yellow)
          },
          pressed:{
            .backgroundColor(Color.Pink)
          }
        })
        .fontSize(40)
    }
    .alignItems(HorizontalAlign.Start)
  }
}
相关推荐
周胡杰16 分钟前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
iFulling10 小时前
【计算机网络】第四章:网络层(上)
学习·计算机网络
香蕉可乐荷包蛋10 小时前
AI算法之图像识别与分类
人工智能·学习·算法
迷曳10 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
xiaoli232711 小时前
课题学习笔记1——文本问答与信息抽取关键技术研究论文阅读(用于无结构化文本问答的文本生成技术)
笔记·学习
人生游戏牛马NPC1号11 小时前
学习 Flutter (四):玩安卓项目实战 - 中
android·学习·flutter
LGGGGGQ12 小时前
嵌入式学习-PyTorch(7)-day23
人工智能·pytorch·学习
stm 学习ing12 小时前
Python暑期学习笔记3
笔记·python·学习
屁股割了还要学12 小时前
【C语言进阶】内存函数
c语言·开发语言·学习·算法·青少年编程
靴子学长13 小时前
Lotus-基于大模型的查询引擎 -开源学习整理
python·学习·自然语言处理