鸿蒙UI复用
- 简介
- Builder
- Builder的使用方式一
- Builder的使用方式二
- Builder的使用方式三
- Component
- 使用Component复用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: stringsubTitle: stringbuild() {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)}
}