HarmonyOS 鸿蒙Next TabContent内如何实现动态渲染

HarmonyOS 鸿蒙Next TabContent内如何实现动态渲染 TabContent内如何实现动态渲染


更多关于HarmonyOS 鸿蒙Next TabContent内如何实现动态渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

可以用NodeContainer

更多关于HarmonyOS 鸿蒙Next TabContent内如何实现动态渲染的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以使用wrapBuilder，但是wrapBuilder只接受@Builder修饰的函数组建，@Component修饰的类组件还不知道怎么搞

同款想知道，我在

Column() {
  ForEach(this.couponList, (item:couponItem,index:number) => {
    CouponCard({
      couponItem: item,
      couponType: 0
    })
  })
}

代码不报错就是渲染不出来，很无语！！！！

我也想知道

你好，请求有找到解决方法吗

import { TabConfig, ItabBarItem } from './config'
import HomeView from '../home/index'
import ShoppingView from '../shopping/index'
import NewsView from '../news/index'
import AccountView from '../account/index'

@Component
export default struct TabsBarView {

  private  tabContentConfig = {
    home:HomeView,
    shopping:ShoppingView,
    news:NewsView,
    account:AccountView
  }

  @Builder
  renderTabContent(item:ItabBarItem){
    // 使用map中对应的组件构造函数来创建组件实例
    const ComponentToRender = this.tabContentConfig[item.pageName];
    return ComponentToRender()

  }

  build(){
    Tabs({ barPosition: BarPosition.End}) {
      ForEach(TabConfig,(item:ItabBarItem,index: number | undefined)){
        TabContent() {
          this.renderTabContent(item)
        }
        .tabBar('首页')
      }

    }
    .barMode(BarMode.Fixed)
  }
}

我也想知道如何实现，我这种用配置方式渲染报错

写成组件页面啊，import组件，更具条件渲染不同的组件页面

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

你这是硬编码啊。如果有多个TABCONTENT 你要多少个IF else，

现实中的业务，不会有那么多tab不一样的内容的，可以重复利用同一个组件。没多少if的。如果超过10个tab，每个tab里面内容都不一样，那这是失败的产品设计。换句话说，一个失败的产品设计，能有多优雅的代码，

如果tab当做底部菜单，顶天了也就5个。如果是侧边菜单（类似商城分类，左右结构那种），看起来tab很多，但是右边的布局基本一个页面就可以复用。顶部菜单（今日头条），也是一个道理啊，tab多，但内容页面也不是每一个不一样的，也是可以复用的。

在HarmonyOS（鸿蒙）Next中，TabContent的动态渲染可以通过@State和@Builder装饰器结合使用来实现。@State用于管理组件的状态，当状态发生变化时，UI会自动更新。@Builder则用于定义可复用的UI组件。

首先，定义一个@State变量来存储需要动态渲染的内容。然后，在TabContent中使用@Builder来构建UI，并根据@State变量的变化来动态渲染内容。

例如：

@Entry
@Component
struct TabContentExample {
  @State content: string = 'Initial Content'

  build() {
    Column() {
      TabContent() {
        this.renderContent()
      }
      Button('Change Content')
        .onClick(() => {
          this.content = 'Updated Content'
        })
    }
  }

  @Builder renderContent() {
    Text(this.content)
      .fontSize(20)
      .margin(10)
  }
}

在这个例子中，TabContent内的内容通过renderContent方法动态渲染。当点击按钮时，@State变量content的值发生变化，从而触发UI的重新渲染，显示更新后的内容。

回到顶部