鸿蒙UI复用

鸿蒙UI复用

简介

在页面开发过程中，会遇到有UI相似的结构，如果每个UI都单独声明一份，会产生大量冗余代码，不利于阅读。遇到这样的情况，就需要针对相似的结构进行封装，封装后的UI只需要传入参数即可。
在鸿蒙开发中，可以使用Builder 和 Component两种方式来实现。

Builder
Component

Builder

Builder的使用方式一

在一个struct内部创建声明

@Entry
@Component
struct UiTest {
  build() {
    Column({space: 10}){
      this.listItem('标题1','子标题1')
      this.listItem('标题2','子标题2')
      this.listItem('标题3','子标题3')
    }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
  }

  @Builder listItem(title: string, subTitle: string) {
    Column(){
      Row(){
        Column({space:20}){
          Text(title)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          Text(subTitle)
        }
        Blank()
        Image($r('app.media.icon_load'))
          .width(30)
          .height(30)
      }
      .width('100%')

    }
    .width('90%')
    .shadow({radius: 10})
    .padding(10)
  }
}

上述代码中，创建了一个listItem的组件，展示标题和副标题，使用的时候，直接调用this.listItem(‘标题1’,‘子标题1’)即可。

Builder的使用方式二

在一个struct外部创建声明,在使用的时候，直接调用方法名，不再需要使用this.

@Entry
@Component
struct UiTest {
  build() {
    Column({space: 10}){
      listItem('标题1','子标题1')
      listItem('标题2','子标题2')
      listItem('标题3','子标题3')
    }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
  }
}
@Builder function listItem(title: string, subTitle: string) {
  Column(){
    Row(){
      Column({space:20}){
        Text(title)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text(subTitle)
      }
      Blank()
      Image($r('app.media.icon_load'))
        .width(30)
        .height(30)
    }
    .width('100%')
  }
  .width('90%')
  .shadow({radius: 10})
  .padding(10)
}

Builder的使用方式三

将@Builder的创建和声明放在一个单独的文件夹中,然后记得使用export。

@Builder export  function listItem(title: string, subTitle: string) {
  Column(){
    Row(){
      Column({space:20}){
        Text(title)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text(subTitle)
      }
      Blank()
      Image($r('app.media.icon_load'))
        .width(30)
        .height(30)
    }
    .width('100%')
  }
  .width('90%')
  .shadow({radius: 10})
  .padding(10)
}

使用的时候，需要导入到当前文件夹

import { listItem } from './listItem'

接下来就直接使用方法名进行调用

Component

使用Component复用UI

Component的创建方式跟Builder创建方式二、创建方式三类似。

在一个单独文件中创建，需要使用export进行导出。

@Component
export struct listItem {
  title: string
  subTitle: string
  build() {
    Column(){
      Row(){
        Column({space:20}){
          Text(this.title)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          Text(this.subTitle)
        }
        Blank()
        Image($r('app.media.icon_load'))
          .width(30)
          .height(30)
      }
      .width('100%')
    }
    .width('90%')
    .shadow({radius: 10})
    .padding(10)
  }
}

在使用的时候，首先需要进行导入

import {listItem} from './listItem'

参数的传递跟Builder有点不同，使用Component的方式传参，需要使用{}将参数包裹起来

import {listItem} from './listItem'
@Entry
@Component
struct UiTest {
  build() {
    Column({space: 10}){
      listItem({title:'标题1',subTitle:'子标题1'})
      listItem({title:'标题2',subTitle:'子标题2'})
      listItem({title:'标题3',subTitle:'子标题3'})
    }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
  }
}