鸿蒙中把builder函数传参与UI渲染问题

Question

问题：
初来乍到，请教各位UU们一个问题：在使用@Builder函数封装一个用于tabBar传值的函数，并且单独放在相同目录的另一个页面中，使用export导出。其中形参有多个，函数里面用条件控制的属性不生效了，但是把builder函数和tabBar的Tabs组件放在同一个页面里能够实现效果，请问大家这个问题的原因和解决思路。
附代码和截图：

let  selectedIndex: number = 0
@Builder
export function  TabBarComp (isShowIcon: boolean = false, isShowDivider: boolean = false, index: number, name: string) {
    Column() {
      if (isShowIcon) {
        Image($r("app.media.startIcon"))
          .size({ width: 18, height: 18 })
          .margin({ bottom: 5 })
      }

      if (isShowIcon) {
        Text(name)
          .fontSize(15)
          .fontColor(selectedIndex === index ? "#ff0066ff" : "#000")
          .lineHeight(12)
          .margin({ top: 5, bottom: 3 })
      } else {
        Text(name)
          .fontSize(15)
          .fontColor(selectedIndex === index ? "#ffffc800" : "#000")
          .lineHeight(12)
          .margin({ top: 5, bottom: 3 })
      }
      if (isShowDivider) {
        Divider()
          .strokeWidth(2)
          .color("#ffffc800")
          .opacity(selectedIndex === index ? 1 : 0)
      }

    }
}

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

鸿蒙中把builder函数传参与UI渲染问题

你遇到了一个使用 @Builder 函数在 HarmonyOS 中传参的问题。下面是解决方案：

首先，@Builder 函数是 TypeScript 的一个特性，可以用来简化对象的创建过程。假设你有一个 TabBar 组件，需要传入多个参数来控制其显示内容。

@Builder
class TabBarConfig {
  title: string;
  icon: string;
  selected: boolean;
}

export function createTabBarConfig(title: string, icon: string, selected: boolean): TabBarConfig {
  return new TabBarConfig().withTitle(title).withIcon(icon).withSelected(selected);
}

在上面的代码中，我们定义了一个 TabBarConfig 类，并使用 @Builder 函数来简化对象的创建过程。然后，我们定义了一个 createTabBarConfig 函数，用于创建一个 TabBarConfig 对象，并传入多个参数。

现在，你可以在其他页面中使用 createTabBarConfig 函数来创建一个 TabBarConfig 对象，并将其传递给 TabBar 组件。

import { createTabBarConfig } from './tabBarConfig';

const tabBarConfig = createTabBarConfig('首页', 'home_icon', true);

在上面的代码中，我们使用 createTabBarConfig 函数来创建一个 TabBarConfig 对象，并将其赋值给 tabBarConfig 变量。

最后，在 TabBar 组件中，你可以使用 tabBarConfig 对象来控制其显示内容。

<TabBar config={tabBarConfig} />

在上面的代码中，我们将 tabBarConfig 对象传递给 TabBar 组件的 config 属性，以控制其显示内容。

总的来说，使用 @Builder 函数可以简化对象的创建过程，并且可以在不同的页面中使用同一个函数来创建对象。