HarmonyOS 鸿蒙Next 如何通过传参的方式把@Component修饰的组件在build内使用
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
当前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
修饰的组件,通常涉及组件的属性绑定和依赖注入。以下是一个简要说明:
-
定义组件属性:首先,在
@Component
修饰的组件中,通过@State
、@Prop
等注解定义可接受的参数。@State
用于组件内部状态管理,@Prop
用于父组件向子组件传递参数。 -
在父组件中传递参数:在父组件的模板中,使用
<ChildComponent prop-name="${{value}}"/>
的形式将参数传递给子组件,其中ChildComponent
是子组件的标签名,prop-name
是子组件中定义的属性名,${{value}}
是传递的具体值。 -
在子组件中使用参数:子组件通过
@Prop
注解获取到的参数,可以直接在组件的逻辑或模板中使用。 -
构建组件树:在
build
方法中,父组件按照上述方式构建子组件树,即可实现参数传递和组件的动态构建。
以上过程需确保组件的声明周期和属性绑定机制正确无误。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。