ArkUI之自定义组件
如何使用自定义组件来提高代码复用性和开发效率?(对照js中react函数组件学习)
子组件可以放在单独的文件,需要使用export导出:自定义组件
子组件代码:
@Component
export struct MyComponents {
private title:string
build() {
Text(this.title)
}
}
父组件代码
import {MyComponents} from './myComponents'
@Entry
@Component
struct Index {
build() {
Column(){
MyComponents({title: '商品列表'})
}
}
}
子组件可以放在与父组件同一文件里
全局自定义构建函数
@Entry
@Component
struct Index {
build() {
myComponents('订单列表')
}
}
@Builder function myComponents(Title:string){
Text(Title)
}
局部自定义构建函数
注意加this
@Entry
@Component
struct Index {
build() {
this.myComponents('订单列表')
}
@Builder myComponents(Title:string){
Text(Title)
}
}
局部公共样式函数
@Component
struct Index {
// 局部公共样式函数
@Styles fillScreen(){
.width('100%')
.height('100%')
.backgroundColor('#EFEFEF')
.padding(20)
}
build() {
Text('订单列表')
.fillScreen()
}
}
全局公共样式函数
@Extend(Text) function priceStyle(){
.fontColor('#F36')
.fontSize(18)
}
@Entry
@Component
struct Index {
build() {
Text('订单列表')
.priceStyle()
}
}