【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("我是自定义构建函数")
    }
  }
}

使用Index.ets自定义组件

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

@Entry
@Component
struct customCpn{
   
  build(){
   
    Column(){
   
      Index()
    }
  }
}

自定义公共样式

案例

//全局公共样式
@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.数据驱动UI更新：通过状态变量的改变，来驱动UI的刷新。

✨$踩坑不易，还希望各位大佬支持一下$

📃 $个人主页：$ 沉默小管

📃 $个人网站：$ 沉默小管

📃 $个人导航网站：$ 沉默小管导航网

📃 $我的开源项目：$ vueCms.cn

🔥 $技术交流QQ群：837051545$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教