赞
踩
(适合内部页面的封装,更加合适)(构建页面)
案例:
自定义组件文件 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的刷新。
✨ 踩坑不易,还希望各位大佬支持一下 \textcolor{gray}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/240048?site
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。