鸿蒙开发基础8-属性的扩展和通用样式

MrXiao 字数: 1111 阅读耗时: 2 分钟 2024/02/22 博客独享热度: 4 评论: 0

直接看代码部分

// 组件扩展是针对单个属性的属性扩展 主要是封装了一些组件都需要用到的常用属性
// 组件扩展
@Extend(Text)
function textBoldExtend(color: Color, fontSize: number) {
  .backgroundColor(color)
  .fontSize(fontSize)
}

// 同一个组件可以扩展多个 但是每个扩展属性 都需要用单独用扩展修饰词修饰下 才可以生效
// 组件扩展
@Extend(Text)
function textMediumExtend(color: Color, fontSize: number) {
  .backgroundColor(color)
  .fontSize(fontSize)
}

// 针对的是通用型属性 例如文字颜色就是是不可以的 其实可以通过简单的方式来判断 就是通过里面的属性调用是否有提示就可以判断
// 是否可以用这个通用的属性
@Styles
function commonStyle () {
  .width(100)
  .height(100)
  .backgroundColor(Color.Red)
}

// 自定义的结构、样式或者事件 当然builder是分局部和全局的 局部是定义在组件结构体函数内的 他是不需要function修饰的 全局反之就需要了
@Entry
@Component
struct Index {
	@Builder
	creatCustomListCell(icon: string, text: string) {
  		Text(text)
    		.textMediumExtend(Color.Red, 25)
	}
}


@Builder
function creatCustomListCell(icon: string, text: string) {
  Text(text)
    .textMediumExtend(Color.Red, 25)
}

// 在需要调用的位置 直接调用就可是生效了 当然不建议直接调用多个属性设置类似的扩展属性
Text('1')
  .textMediumExtend(Color.Red, 30)
  .textBoldExtend(Color.Red, 20)
  .commonStyle()