自定義組件的基本結(jié)構(gòu).
- struct：自定義組件基于struct實現(xiàn)爵川，struct + 自定義組件名 + {...}的組合構(gòu)成自定義組件眷蜓，不能有繼承關(guān)系员魏。對于struct的實例化誓沸，可以省略new诸迟。
- @Component：@Component裝飾器僅能裝飾struct關(guān)鍵字聲明的數(shù)據(jù)結(jié)構(gòu)否副。struct被@Component裝飾后具備組件化的能力汉矿，需要實現(xiàn)build方法描述UI，一個struct只能被一個@Component裝飾备禀。
- build()函數(shù)：build()函數(shù)用于定義自定義組件的聲明式UI描述洲拇，自定義組件必須定義build()函數(shù)。
- @Entry：@Entry裝飾的自定義組件將作為UI頁面的入口曲尸。在單個UI頁面中赋续，最多可以使用@Entry裝飾一個自定義組件。@Entry可以接受一個可選的LocalStorage的參數(shù)另患。
build()函數(shù)
@Entry裝飾的自定義組件纽乱，其build()函數(shù)下的根節(jié)點唯一且必要，且必須為容器組件柴淘，其中ForEach禁止作為根節(jié)點迫淹。
@Component裝飾的自定義組件秘通，其build()函數(shù)下的根節(jié)點唯一且必要，可以為非容器組件敛熬，其中ForEach禁止作為根節(jié)點肺稀。
@Entry
@Component
struct MyComponent {
build() {
// 根節(jié)點唯一且必要，必須為容器組件
Row() {
ChildComponent()
}
}
}
@Component
struct ChildComponent {
build() {
// 根節(jié)點唯一且必要应民，可為非容器組件
Image('test.jpg')
}
}
不允許聲明本地變量话原，反例如下。
不允許在UI描述里直接使用console.info诲锹，但允許在方法或者函數(shù)里使用繁仁，反例如下。
不允許創(chuàng)建本地的作用域归园，反例如下黄虱。
build() {
// 反例：不允許聲明本地變量
let a: number = 1;
// 反例：不允許console.info
console.info('print debug log');
// 反例：不允許本地作用域
{
...
}
}
不允許調(diào)用沒有用@Builder裝飾的方法，允許系統(tǒng)組件的參數(shù)是TS方法的返回值庸诱。
@Component
struct ParentComponent {
doSomeCalculations() {
}
calcTextValue(): string {
return 'Hello World';
}
@Builder doSomeRender() {
Text(`Hello World`)
}
build() {
Column() {
// 反例：不能調(diào)用沒有用@Builder裝飾的方法
this.doSomeCalculations();
// 正例：可以調(diào)用
this.doSomeRender();
// 正例：參數(shù)可以為調(diào)用TS方法的返回值
Text(this.calcTextValue())
}
}
}
不允許switch語法捻浦，如果需要使用條件判斷，請使用if桥爽。反例如下朱灿。
不允許使用表達(dá)式，反例如下钠四。
build() {
Column() {
// 反例：不允許使用表達(dá)式
(this.aVar > 10) ? Text('...') : Image('...')
}
}
自定義組件通用樣式
自定義組件通過“.”鏈?zhǔn)秸{(diào)用的形式設(shè)置通用樣式盗扒。
@Component
struct MyComponent2 {
build() {
Button(`Hello World`)
}
}
@Entry
@Component
struct MyComponent {
build() {
Row() {
MyComponent2()
.width(200)
.height(300)
.backgroundColor(Color.Red)
}
}
}
