ArkUI自定义组件

目录

自定义组件

在同一ets文件内自定义组件

格式

组件定义

组件引用

关键点解析

在独立ets文件内自定义组件

说明

格式

组件定义

组件引用

关键点解析

自定义构建函数

自定义全局构建函数(组件外部)

格式

构建函数的定义

构建函数的引用

自定义局部构建函数(组件内部)

格式

构建函数的定义

构建函数的引用

对比

定义

引用

自定义属性

全局公共属性

格式

定义

引用

局部公共属性

格式

定义

引用

说明

区别

注意

全局组件特有属性

格式

定义

引用

说明 

---

自定义组件

在同一ets文件内自定义组件

格式

组件定义

@Component
struct UComponent {
    private title: string
    build() {
    //组件UI描述
    Text(this.title)
    }
}

组件引用

@Entry
@Component
struct Page {
    build() {
    // 引用组件
    UComonent({title: 'aaa'})
    }
}

关键点解析

1.如果组件需要传入参数，可以像示例中的title一样编写

2.这只能应用于同一ets文件内的自定义组件书写，如果要在独立的ets文件内编写自定义组件，格式见下文

在独立ets文件内自定义组件

说明

在独立ets文件内自定义组件就涉及到模块化开发，需要使用export命令和import命令来实现模块的导入导出

格式

组件定义

@Component
export struct UComponent {
    private title: string
    build() {
    //组件UI描述
    Text(this.title)
    }
}

组件引用

import {Ucomponent} from '自定义组件所在文件的路径'
@Entry
@Component
struct Page {
    build() {
    // 引用组件
    UComonent({title: 'aaa'})
    }
}

关键点解析

1.如果组件需要传入参数，可以像示例中的title一样编写

2.注意模块导入导出命令的正确书写

自定义构建函数

自定义全局构建函数(组件外部)

格式

构建函数的定义

@Builder function xxxBuilder(){
    // UI描述
}
@Component
struct xxx{
}

构建函数的引用

@component
struct XxxComponent(){
 xxxBuilder()
}

自定义局部构建函数(组件内部)

格式

构建函数的定义

@component
struct XxxComponent(){
    @Builder xxxBuilder(){
    // UI描述
    }
}

构建函数的引用

@component
struct XxxComponent(){
   this.xxxBuilder()
}

对比

定义

全局自定义构建函数的定义时需要声明是function，而局部自定义构建函数不需要

引用

全局自定义构建函数在引用时不需要this. 而局部自定义函数在引用时则需要添加this.来引用

自定义属性

全局公共属性

格式

定义

@Styles function fillScreen(){
    .width('100%')
    .height('100%')
}
@Component
struct xxxPage{


}

引用

@Component
struct xxxPage{
    build() {
        Row(){}
           .fillScreen
    }
}

局部公共属性

格式

定义

@Component
struct xxxPage{
    @Styles fillScreen(){
    .width('100%')
    .height('100%')
    }
    build() {
    }
}

引用

@Component
struct xxxPage{
    build() {
        Row(){}
           .fillScreen
    }
}

说明

区别

在全局公共属性的定义时需要声明function，而在局部公共属性的的定义时则不需要

注意

无论是全局公共属性还是局部公共属性内部都只能写公共属性方法，入width，height等，不能写像fontColor这种组件所特有的属性方法，如果要添加这些方法，则可以参考下问的全局组件特有属性的自定义。

全局组件特有属性

格式

定义

@Extend(Text) function UText(){
    .fontColor('#CCC')
    .fontSize(20)
}

引用

@Component
struct xxxPage{
    build() {
       Text('111')
          .Utext()
    }
}

说明 

1.特有属性的自定义只能进行全局自定义，不能进行局部自定义

2.特有属性的自定义内可以编写所声明的组件所特有的属性方法和事件检测方法