HarmonyOS 界面之间有混合展示的,怎么组件化?

首页有不同的展位,这些个展位具体是什么样子的由不同的业务来实现(业务会自定义不同的component)

现在我们的首页怎么把业务自定义的component加载进来呢?

需要注意的是 我们不能直接import业务的sdk,因为是解耦的状态,我们有无数的业务,1对N的关系,我们不能import进来N个业务

原来是通过类似于路由的组件,业务把fragment通过返回返回,然后首页把对应的fragment展示上来,现在切换到HarmonyOS不知道该如何实现,想要通过builder也无法实现

HarmonyOS
2024-08-08 11:55:44
1205浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
put_get

可以使wrapBuilder来封装@Builder。

验证以下demo是否满足您的需求

参考demo:

dataModel.ets

// 定义一个空的builder 
@Builder 
function defaultBuilder(): void {} 
 
// 定义一个class,有对应的WrappedBuilder 
export class DataModel { 
  id: string = '' 
  value: string = '' 
  otherProp: string = '' 
  builderWrap: WrappedBuilder<[string]> = wrapBuilder(defaultBuilder) 
 
  constructor(id: string, value: string, builderWrap: WrappedBuilder<[string]>) { 
    this.id = id 
    this.value = value 
    this.builderWrap = builderWrap 
  } 
} 
 
@Builder 
function CustomBuilder(param: string) { 
  CustomPage() 
} 
 
@Component 
struct CustomPage { 
  @State message: string = 'CustomPage'; 
  build() { 
    Row() { 
      Column() { 
        Text(this.message) 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
} 
let customPageWrappedBuilder: WrappedBuilder<[string]> = wrapBuilder(CustomBuilder); 
 
export const data: DataModel = new DataModel('1', 'test', customPageWrappedBuilder)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.

// TestPage.ets 页面中使用

import { DataModel, data } from './dataModel' 
@Entry 
@Component 
struct TestPage { 
  testData: DataModel | null = null 
 
  aboutToAppear(): void { 
    this.testData = data 
  } 
  build() { 
    Column() { 
      // 如果不需要参数,直接传空就行了 
      this.testData?.builderWrap.builder('') 
    } 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.

页面使用

TestPage.ets

import { DataModel, getData } from './DataModel' 
@Entry 
@Component 
struct TestPage { 
  testData: DataModel[] = [] 
 
  async aboutToAppear() { 
    this.testData = await getData() 
  } 
  build() { 
    Column() { 
      ForEach(this.testData, (item: DataModel) => { 
        item.builderWrap.builder(item.value) 
      }) 
    } 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
分享
微博
QQ
微信
回复
2024-08-08 19:49:09


相关问题
请问flutter怎么HarmonyOS混合开发
884浏览 • 1回复 待解决
HarmonyOS 数据层是怎么实现组件
637浏览 • 1回复 待解决
鸿蒙和reactnative混合开发怎么实现
3232浏览 • 1回复 待解决
HarmonyOS 不同har包之间怎么调用
722浏览 • 1回复 待解决
HarmonyOS 图像混合
542浏览 • 1回复 待解决
页面之间跳转方式怎么设置
7606浏览 • 1回复 待解决