鸿蒙组件样式复用简介

鸿蒙组件样式复用简介

使用@Style进行复用

在页面开发过程中,会遇到多个组件都在使用相同的样式,这时候就要考虑是不是可以将相同的样式的进行复用。

现在看下如下代码

复制代码
@Entry
@Component
struct Style {
  build() {
    Column({space:20}){
      Text('Text......')
        .width('60%')
        .height(50)
        .backgroundColor(Color.Red)
        .fontColor(Color.White)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Button('Button',{type: ButtonType.Capsule})
        .width('60%')
        .height(50)
        .backgroundColor(Color.Red)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
    }
      .width('80%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

在上面代码中,Text和Button都有相同的样式,我们可以使用@Style对上述代码进行复用。

在Component内部复用

可以将@Style修饰的方法放在build方法后面

复制代码
@Entry
@Component
struct Style {
  build() {
    Column({space:20}){
      Text('Text......')
        .commenStyle()
        .fontColor(Color.White)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Button('Button',{type: ButtonType.Capsule})
        .commenStyle()
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
    }
      .width('80%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  @Styles
  commenStyle(){
    .width('60%')
    .height(50)
    .backgroundColor(Color.Red)
  }
}

在使用的时候,直接跟在组件后面。

在Component外部复用

如果页面上定义了多个Component,这个时候复用的样式可以考虑定义在Component外部,这样做的目的是每个Component都能调用复用组件。

复制代码
@Entry
@Component
struct Style {
  build() {
    Column({space:20}){
      Text('Text......')
        .commenStyleG()
        .fontColor(Color.White)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Button('Button',{type: ButtonType.Capsule})
        .commenStyleG()
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
    }
      .width('80%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
  
}

@Styles function commenStyleG() {
  .width('60%')
  .height(50)
  .backgroundColor(Color.Red)
}

**备注:**使用@Style定义的组件,只能接受组件通用信息,通用信息可在API Reference里面的ArkTS处查找;@Style不能接受自定义参数。

使用@Extend复用指定类型组件

@Extend跟@Style不同,@Extend只能复用指定类型组件。

先看如下代码

复制代码
@Entry
@Component
struct Style {
  build() {
    Column({space:20}){
      Button('Button1',{type: ButtonType.Capsule})
        .width('60%')
        .height(50)
        .backgroundColor(Color.Green)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Button('Button2',{type: ButtonType.Capsule})
        .width('60%')
        .height(50)
        .backgroundColor(Color.Red)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
    }
      .width('80%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

上述代码中存在大量重复代码,并且都是Button这种类型的,有通用也有不是通用的。

此时可以考虑使用@Extend来进行复用

将上述代码简化为如下:

复制代码
@Entry
@Component
struct Style {
  build() {
    Column({space:20}){
      Button('Button1',{type: ButtonType.Capsule})
        .buttonStyle()
      Button('Button2',{type: ButtonType.Capsule})
        .buttonStyle()
    }
      .width('80%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
@Extend(Button) function buttonStyle(){
  .width('60%')
  .height(50)
  .backgroundColor(Color.Red)
  .fontSize(20)
  .fontWeight(FontWeight.Bold)
}

使用Extend复用后,发现之前设置的背景色也全部变成一样;这时候,就需要考虑对Extend复用信息进行传参。

@Extend支持参数传递

此处,需要将buttonStyle进行改造。

复制代码
@Extend(Button) function buttonStyle(color:ResourceColor,height: Length){
  .width('60%')
  .height(height)
  .backgroundColor(color)
  .fontSize(20)
  .fontWeight(FontWeight.Bold)
}

改造后,可以在使用的时候,传入背景色和高度

复制代码
@Entry
@Component
struct Style {
  build() {
    Column({space:20}){
      Button('Button1',{type: ButtonType.Capsule})
        .buttonStyle(Color.Green,70)
      Button('Button2',{type: ButtonType.Capsule})
        .buttonStyle(Color.Red,30)
    }
      .width('80%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
相关推荐
爱笑的眼睛1111 小时前
HarmonyOS 应用开发深度解析:基于声明式UI的现代化状态管理实践
华为·harmonyos
前端世界11 小时前
HarmonyOS 实战:如何用数据压缩和解压让应用更快更省
华为·harmonyos
哦***712 小时前
华为FreeBuds 7i其他手机能用空间音频吗?如何开启?
华为·音频
安卓开发者12 小时前
鸿蒙Next Web组件详解:属性设置与事件处理实战
前端·华为·harmonyos
安卓开发者12 小时前
鸿蒙NEXT Web组件与JavaScript交互:打通原生与前端的桥梁
前端·javascript·harmonyos
森之鸟12 小时前
鸿蒙审核问题——折叠屏展开态切换时,输入框内容丢失
华为·harmonyos
不爱吃糖的程序媛12 小时前
表格底部增加一行合计功能的实现
华为·harmonyos
猫林老师16 小时前
HarmonyOS 5分布式数据管理初探:实现跨设备数据同步
分布式·harmonyos
爱笑的眼睛1119 小时前
HarmonyOS 应用开发深度解析:ArkUI 声明式 UI 与现代化状态管理最佳实践
华为·harmonyos
被开发耽误的大厨21 小时前
鸿蒙项目篇-22-项目功能结构说明-写子页面和导航页面
android·华为·harmonyos·鸿蒙