当前位置:   article > 正文

【HarmonyOS】鸿蒙开发之自定义组件——第3.7章

【HarmonyOS】鸿蒙开发之自定义组件——第3.7章

自定义构建函数

(适合内部页面的封装,更加合适)(构建页面)

案例:
自定义组件文件 Index.ets

//全局自定义构建函数写法
@Builder function item1(){
  Row({space:10}){
    Text("我是自定义构建函数")
  }
}

@Component
export struct Index{
  build(){
    Column(){
      item1()
      this.item2()
    }
  }
  //局部自定义构建函数写法
  @Builder item2(){
    Row({space:10}){
      Text("我是自定义构建函数")
    }
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

使用Index.ets自定义组件

import { Index } from "./cpns/Index"

@Entry
@Component
struct customCpn{
  build(){
    Column(){
      Index()
    }
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

自定义公共样式

案例

//全局公共样式
@Styles function funcStyle(){
	.width('100%')
	.height('100%')
}

//继承某个样式组件(不能写在组件内)
@Extend(Text) function textStyle(){
	.fontSize(18)
	.fontColor(Color.Red)
}

@Component
struct Index{
	build(){
		Column(){
        Text("我是自定义公共样式").textStyle()
      }.funcStyle()
      	Column(){
        Text("我是自定义公共样式2")
      }.localFuncStyle()
	}
	//局部公共样式
	@Styles funcStyle(){
		.width('100%')
		.height('100%')
	}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

自定义组件有以下特点:
1.可组合:允许开发者组合使用系统组件、及其属性和方法。
2.可重用:自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件或容器中使用。
3.数据驱动UI更新:通过状态变量的改变,来驱动UI的刷新。

踩坑不易,还希望各位大佬支持一下 \textcolor{gray}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/240048?site
推荐阅读
相关标签