程序員Feri一名12年+的程序員,做過開發(fā)帶過團(tuán)隊(duì)創(chuàng)過業(yè),擅長Java、嵌入式、鴻蒙、人工智能等,專注于程序員成長那點(diǎn)兒事,希望在成長的路上有你相伴！君志所向,一往無前！

1.自定義組件基礎(chǔ)

在ArkUI中，UI顯示的內(nèi)容均為組件，由框架直接提供的稱為系統(tǒng)組件，由開發(fā)者定義的稱為自定義組件。

相比于之前學(xué)習(xí)的輕量級 UI 復(fù)用機(jī)制 @Builder，自定義組件的功能更為強(qiáng)大，日常開發(fā)中如果要進(jìn)行 UI 或業(yè)務(wù)邏輯進(jìn)行復(fù)用，需要掌握自定義組件的能力。

2.自定義組件語法格式

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 自定義組件
      HelloComponent()
    }
  }
}

3.基本使用

如何創(chuàng)建自定義組件呢?

說明

自定義組件名、類名、函數(shù)名不能和系統(tǒng)組件名相同。

// 定義
@Component
struct MyComponent {
  // 狀態(tài)變量
  @State message:string =''
  build(){
    // .... 描述 UI
    //----------使用-----------

// 1.不傳遞參數(shù)使用
// MyComponent() 

// 2.傳遞參數(shù)使用：通過傳遞參數(shù)的方式 設(shè)置子組件中 messsage 的值
// MyComponent({message:'xxx'})

  }
}

  • struct：自定義組件基于struct實(shí)現(xiàn)，struct + 自定義組件名 + {...}的組合構(gòu)成自定義組件，不能有繼承關(guān)系。對于struct的實(shí)例化，可以省略new。

  • @Component：@Component裝飾器僅能裝飾struct關(guān)鍵字聲明的數(shù)據(jù)結(jié)構(gòu)。

  • build()函數(shù)：build()函數(shù)用于定義自定義組件的聲明式UI描述，自定義組件必須定義build()函數(shù)。

  • @Entry：@Entry裝飾的自定義組件將作為UI頁面的入口。在單個UI頁面中，最多可以使用@Entry裝飾一個自定義組件。

  • @Preview：如果想要單獨(dú)預(yù)覽組件，可以使用@Preview 進(jìn)行裝飾

4.練一練

  1. 創(chuàng)建自定義組件（寫到一個文件，拆分到其他文件）

a. build()中添加UI 描述

b. 定義狀態(tài)變量

c. 渲染，并且修改

  1. 使用自定義組件

a. 無參數(shù)使用

b. 傳遞參數(shù)使用

  1. 測試@Preview預(yù)覽組件

下面為參考的示例代碼：

// 定義組件
@Component
struct HelloComponent {
  // 自己的狀態(tài)
  @State message: string = 'Hello, World!';

  build() {
    // HelloComponent自定義組件組合系統(tǒng)組件Row和Text
    Row() {
      Text(this.message)
        .onClick(() => {
          // 狀態(tài)變量message的改變驅(qū)動UI刷新，UI從'Hello, World!'刷新為'Hello, ArkUI!'
          this.message = 'Hello, ArkUI!';
        })
    }
  }
}

// 使用組件
@Entry
@Component
struct Index {
  build() {
    Column() {
      HelloComponent()
      // 只要愿意，可以 使用任意多次
      HelloComponent()
      // 還可以 傳遞參數(shù)給子組件，覆蓋子組件成員變量的值
      HelloComponent({message:'hello Feri'})
    }
  }
}

// HelloComponent.ets

// 定義組件
@Component
export struct HelloComponent {
  // 自己的狀態(tài)
  @State message: string = 'Hello, World!';

  build() {
    // HelloComponent自定義組件組合系統(tǒng)組件Row和Text
    Row() {
      Text(this.message)
        .onClick(() => {
          // 狀態(tài)變量message的改變驅(qū)動UI刷新，UI從'Hello, World!'刷新為'Hello, ArkUI!'
          this.message = 'Hello, ArkUI!';
        })
    }
  }
}

頁面.ets-------------------

import {HelloComponent} from 'HelloComponent'

// 使用組件
@Entry
@Component
struct Index {
  build() {
    Column() {
      HelloComponent()
      // 只要愿意，可以 使用任意多次
      HelloComponent()
      // 還可以 傳遞參數(shù)給子組件，覆蓋子組件成員變量的值
      HelloComponent({message:'hello itheima'})
    }
  }
}

5.成員函數(shù)/變量

自定義組件除了必須要實(shí)現(xiàn)build()函數(shù)外，還可以定義其他的成員函數(shù)，以及成員變量

注意：

  1. 不支持靜態(tài)函數(shù)、靜態(tài)成員變量
  2. 成員函數(shù)、變量均為私有
@Component
struct MyComponent {
  // 狀態(tài)變量
  @State message:string=''
  // 成員變量-數(shù)據(jù)
  info:string = ''
  // 成員變量-函數(shù)
  sayHello=()=>{}
  
  // 成員函數(shù)
  sayHi(){
    
  }
  
  build(){
    // .... 描述 UI
  }
}

親自動手實(shí)現(xiàn)以下自定義組件

  1. 添加自定義組件

a. 定義成員變量（普通變量、狀態(tài)變量）

b. 定義成員函數(shù)

c. 調(diào)用函數(shù)，修改成員變量（普通變量、狀態(tài)變量）

  1. 使用自定義組件

a. 無參數(shù)調(diào)用

b. 傳遞參數(shù)調(diào)用

參考代碼 // HelloComponent.ets

@Component
export struct HelloComponent {
  // 成員變量
  info: string = '感覺自己悶悶噠'
  // 成員變量也可以是函數(shù)
  sayHello=()=>{}
  // 狀態(tài)變量
  @State message: string = 'Hello, World!';

  // 成員函數(shù)
  sayHi() {
    console.log('你好呀')
  }

  build() {
    // HelloComponent自定義組件組合系統(tǒng)組件Row和Text
    Column() {
      Text(this.message)
      Text(this.info)
      Button('修改數(shù)據(jù)')
        .onClick(() => {
          this.info = '(* ￣3)(ε￣ *)'
          this.message = 'Hello,ArkTS'
          this.sayHi()
          this.sayHello()
        })

    }
  }
}

// 頁面的.ets

import { HelloComponent } from './components/HelloComponent'

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 使用組件內(nèi)部定義的初始值
      HelloComponent()
      // 使用傳入的值，覆蓋子組件的默認(rèn)值
      HelloComponent({ info: '你好', message: 'ArkTS' })
      // 函數(shù)也可以傳入
      HelloComponent({ sayHello(){ console.log('傳入的邏輯') } })
    }
  }
}

7.通用樣式事件

自定義組件可以通過點(diǎn)語法的形式設(shè)置通用樣式,通用事件

子組件()
  .width(100)
  .height(100)
  .backgroundColor(Color.Orange)
  .onClick(() => {
      console.log('外部添加的點(diǎn)擊事件')
    })

練一練:

  1. 添加自定義組件，隨意設(shè)置內(nèi)容
  2. 使用自定義組件，通過點(diǎn)語法設(shè)置通用樣式
@Component
struct MyComponent2 {
  build() {
    Button(`Hello World`)
  }
}

@Entry
@Component
struct Index {
  build() {
    Row() {
      MyComponent2()
        .width(200)
        .height(300)
        .backgroundColor(Color.Red)
        .onClick(() => {
            console.log('外部添加的點(diǎn)擊事件')
          })
    }
  }
}

說明 ArkUI給自定義組件設(shè)置樣式時，相當(dāng)于給MyComponent2套了一個不可見的容器組件，而這些樣式是設(shè)置在容器組件上的，而非直接設(shè)置給MyComponent2的Button組件。

通過渲染結(jié)果我們可以很清楚的看到，背景顏色紅色并沒有直接生效在Button上，而是生效在Button所處的開發(fā)者不可見的容器組件上。

好啦，就說到這里啦，希望每天堅(jiān)持！