HarmonyOS 鸿蒙Next 如何通过传参的方式把@Component修饰的组件在build内使用

发布于 1周前 作者 yibo5220 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 如何通过传参的方式把@Component修饰的组件在build内使用

Tabs容器中中有多个TabContent,而且这个是动态的,我想在CustomTab中定义一个page参数,把每个TabContent里面需要的界面初始化this.tabsArray的时候就赋值好,然后在build里面TabContent() {}里面直接拿CustomTab里面的page参数,但是现在好像不支持可能我也不会写,想知道我该如何实现我想要的效果呢,这样的话方便扩展维护

@ObservedV2
class CustomTab {
  index: TabIndex = TabIndex.Home
  selectedIcon?: Resource
  icon?: Resource
  title?: ResourceStr
  @Trace badgeCount: number = 0

  constructor(tabItem: TabItem) {
    this.index = tabItem.index
    this.selectedIcon = tabItem.selectedIcon
    this.icon = tabItem.icon
    this.title = tabItem.title
    this.badgeCount = tabItem.badgeCount
  }
}

interface TabItem {
  index: number
  selectedIcon?: Resource
  icon?: Resource
  title?: ResourceStr
  badgeCount: number
}

Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
  ForEach(this.tabsArray, (item: CustomTab, index: number) => {
    TabContent() {
      if (item.index == TabIndex.Home) {
        SGHomePage().layoutWeight(1).width('100%')
      } else if (item.index == TabIndex.Map) {
        SGMapPage().layoutWeight(1).width('100%')
      }
    }.tabBar(this.customTabBarBuilder(item))
  }) 

更多关于HarmonyOS 鸿蒙Next 如何通过传参的方式把@Component修饰的组件在build内使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

当前component不能传递,可以看一下通过[@builder](/user/builder)进行传递:

interface TabItem {
 index: number
 selectedIcon?: Resource
 icon?: Resource
 title?: ResourceStr
 badgeCount: number
}
[@ObservedV2](/user/ObservedV2)
class CustomTab {
 index: number = 1
 selectedIcon?: Resource = $r("app.media.app_icon")
 icon?: Resource= $r("app.media.app_icon")
 title?: ResourceStr =  $r("app.string.app_name")
 [@Trace](/user/Trace) badgeCount: number = 0
 constructor(tabItem: TabItem) {
   this.index = tabItem.index
   this.selectedIcon = tabItem.selectedIcon
   this.icon = tabItem.icon
   this.title = tabItem.title
   this.badgeCount = tabItem.badgeCount
 }
}
[@Component](/user/Component)
struct page01{
 build() {
   Text("111")
 }
}
[@Component](/user/Component)
struct page02{
 build() {
   Text("222")
 }
}
[@Builder](/user/Builder) function getCom(index: number) {
 if(index==1){
    page01()
 }else{
   page02()
 }
}
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
 [@State](/user/State) message: string = 'Hello World';
 [@State](/user/State) tabsArray: CustomTab[] = [new CustomTab({
   index: 1,
   selectedIcon: $r("app.media.app_icon"),
   icon: $r("app.media.app_icon"),
   title: $r("app.string.app_name"),
   badgeCount: 0
 }),new CustomTab({
   index: 2,
   selectedIcon: $r("app.media.app_icon"),
   icon: $r("app.media.app_icon"),
   title: $r("app.string.app_name"),
   badgeCount: 0
 })]
 private controller: TabsController = new TabsController()
 build() {
   RelativeContainer() {
     Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
       ForEach(this.tabsArray, (item: CustomTab, index: number) => {
         TabContent() {
           getCom(item.index)
         }
         .backgroundColor(Color.Brown)
         // .tabBar(this.customTabBarBuilder(item))
       })
     }
   }
 }
}

更多关于HarmonyOS 鸿蒙Next 如何通过传参的方式把@Component修饰的组件在build内使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,通过传参方式在build内使用@Component修饰的组件,通常涉及组件的属性绑定和依赖注入。以下是一个简要说明:

  1. 定义组件属性:首先,在@Component修饰的组件中,通过@State@Prop等注解定义可接受的参数。@State用于组件内部状态管理,@Prop用于父组件向子组件传递参数。

  2. 在父组件中传递参数:在父组件的模板中,使用<ChildComponent prop-name="${{value}}"/>的形式将参数传递给子组件,其中ChildComponent是子组件的标签名,prop-name是子组件中定义的属性名,${{value}}是传递的具体值。

  3. 在子组件中使用参数:子组件通过@Prop注解获取到的参数,可以直接在组件的逻辑或模板中使用。

  4. 构建组件树:在build方法中,父组件按照上述方式构建子组件树,即可实现参数传递和组件的动态构建。

以上过程需确保组件的声明周期和属性绑定机制正确无误。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。

回到顶部