自定义构建函数
(适合内部页面的封装,更加合适)(构建页面)
案例:
自定义组件文件 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}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下
📃 个人主页: \textcolor{green}{个人主页:} 个人主页: 沉默小管
📃 个人网站: \textcolor{green}{个人网站:} 个人网站: 沉默小管
📃 个人导航网站: \textcolor{green}{个人导航网站:} 个人导航网站: 沉默小管导航网
📃 我的开源项目: \textcolor{green}{我的开源项目:} 我的开源项目: vueCms.cn
🔥 技术交流 Q Q 群: 837051545 \textcolor{green}{技术交流QQ群:837051545} 技术交流QQ群:837051545
👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!
如果有不懂可以留言,我看到了应该会回复
如有错误,请多多指教