鸿蒙开发 |UI范式基本语法@Styles&&@Extend鸿蒙开发 |UI范式基本语法@Styles&&@Extend

鸿蒙开发 |UI范式基本语法@Styles&&@Extend

在鸿蒙开发中，随着页面的复杂程度提高，页面中会出现很多的样式&结构代码，其中难免会出现重复的部分，这会增加我们代码的编写、后期修改与维护时的难度。

今天我们来学习两个常用的饰器，他们可以帮助我们将代码提取出来重复使用，提升编码效率，减少重复代码，提升代码可读性。

一、@Styles

作用：@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。

1.特点：

在当前版本中，@Styles仅支持通用属性和通用事件如width，height，background等公共属性支持，像文本特有的属性，fontSize，fontColor都不适用。

2.@Styles方法不支持参数

如图：可以看到编译器提示在@Styles方法中不能存在参数

2.@Styles支持在全局中使用，也支持在组件内使用

全局使用：

1.全局定义时需在方法名前面添加function关键字

//使用styles  对组件进行封装  全局   对任意组件进行使用
@Styles
//组件
function textStyle() {
  .width("100%")
  .height("20%")
  .backgroundColor(Color.Red)
}
@Entry...

组件内使用：

2.组件内定义时则不需要添加function关键字。

struct Index {
  build() {
@Styles
//组件内
textStyle() {
  .width("20%")
  .backgroundColor(Color.Red)
  }
 }
}

3.访问组件的常量和状态变量

定义在组件内的@Styles可以通过this访问组件的常量和状态变量，并可以在@Styles里通过事件来改变状态变量的值，

struct FancyUse {
    //状态变量
  @State heightValue: number = 100
  @Styles fancy() {
    .height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
        //修改变量的值
      this.heightValue = 200
    })
  }
}

4.优先级：

当同时在组件内和全局使用@Styles时，组件内@Styles的优先级高于全局@Styles。框架优先找当前组件内的@Styles，如果找不到，则会全局查找。

二、@Extend

作用：给特定的组件扩展样式，事件，以实现复用效果

1.与@Styles的区别：

和@Styles不同，@Extend仅支持在全局定义，不支持在组件内部定义。

和@Styles不同，@Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法。

//使用方法
//指定扩展文本组件样式
@Extend(Text)
function makeTextStyle() {
  .width("100%") 
  .fontSize(30)
  .fontColor("#f22")
}
    Column() {
      Text("文本组件样式")
        .makeTextStyle()
    }
   .height("100%")
   .width("100%")

和@Styles不同，@Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循TS方法传值调用。


@Extend(Text)
//设置参数
function makeTextStyle(size: number) {
  .width("100%")
  .fontSize(size)
  .fontColor("#f22")
}2.

2.@Extend装饰的方法的参数可以为function

这里我们用点击事件作为案例，当点击文本时，文本内容改变

recording

//指定扩展文本组件样式
@Extend(Text)
//参数为函数
function makeTextStyle(onClick: () => void) {
  .width("100%")
  .fontSize(30)
  .fontColor("#f22")
  //点击事件事件
  .onClick(onClick)
}

struct Index {
  @State
  Tab: string = "文本组件样式"
  //更改变量
  onClickH() {
    this.Tab = "文本组件更改"
  }
  build() {
    Column() {
      Text(`${this.Tab}`)//传入函数参数
        .makeTextStyle(() => {
          this.onClickH()
        })
    }

3.@Extend的参数可以为状态变量，当状态变量改变时，UI可以正常的被刷新渲染。

点击文本时，字体大小改变

@Extend(Text)
//传入参数
function makeTextStyle(size: number) {
  .width("100%")
  .fontSize(size)
  .fontColor("#f22")
}
struct Index {
//设置状态变量的值
  @State makeSize: number = 20
  build() {
    Column() {
      Text("文件组件样式")
        .makeTextStyle(this.makeSize)
        .onClick(() => {
        //通过点击事件改变变量的值
          this.makeSize = 30
        })
    }

鸿蒙开发 |UI范式基本语法@Styles&&@Extend