HarmonyOS 鸿蒙Next ArkTS再布局时如何传递一个组件作为参数

HarmonyOS 鸿蒙Next ArkTS再布局时如何传递一个组件作为参数

我想在项目中封装一个通用的导航栏。导航栏左侧是按钮，中间是Title，右侧我希望可以让外部传进来一个组件，方便外部定义导航栏右侧的内容。我目前的代码如下：

import { Router } from '@system.router';
import { CommonConstants as Const } from '../../common/constants/CommonConstants';
import { NavRightView } from './CustomNavRithtView';

@Component
export default struct CustomNavView {

  navTitle: string = '';
  backAction?: Function;
  // rightRowElement?: NavRightView; //这个是自定义的组件====

  build(){
    //使用Column来包裹，是为了可能后期状态栏处理后这块高度需要自己算。
    //API9没有直接的方法去设置状态栏颜色。设置全屏后，顶部会空余一大截。
    //API还不稳定
    Column(){
      //这个是状态栏的高度
      // Row()

      //这里是导航
      Row(){
        //左侧返回按钮
        Row(){
          Image($r('app.media.pub_nav_back'))
            .width('24vp')
            .height('24vp')
        }
        .padding({left: Const.CONTENT_PADDING})
        .justifyContent(FlexAlign.Start)
        .width('75vp')
        .height('100%')
        .onClick(()=>{
          if(this.backAction == null){
            Router.back();
          } else {
            this.backAction();
          }
        })

        //中间文本
        Text(this.navTitle)
          .fontSize(16)
          .fontWeight(500)
          .backgroundColor(Color.Black)
          .fontColor(Color.White)

        //右侧自定义部分，希望外侧传递进来一个组件
        this.rightRowElement()

      }
        .width('100%')
        .height('56vp')
        .justifyContent(FlexAlign.Start)
    }
      .width('100%')
      .height('56vp')
  }
}

看注释，我自定义了一个组件，或者想使用系统组件Row,作为导航栏右侧的内容，但是在使用的时候报错了，貌似不能这么传递组件，报错如下图：

![错误截图]


更多关于HarmonyOS 鸿蒙Next ArkTS再布局时如何传递一个组件作为参数的实战教程也可以访问 https://www.itying.com/category-93-b0.html

22 回复

我还是总结一下把：HarmonyOS 自定义布局

更多关于HarmonyOS 鸿蒙Next ArkTS再布局时如何传递一个组件作为参数的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我想到一个超级简单的方法：

rightRowElement这个可以设置一个@BuilderParam自定义布局。动态的。

直接上代码：

在CustomNavView类中这样定义。

@BuilderParam rightRowElement: () => void //这个是自定义的组件====

然后调用：

//右侧自定义部分，希望外侧传递进来一个组件
this.rightRowElement()

使用的地方：

import CustomNavView from './CustomNavView'

@Entry
@Component
struct Page18 {
  @State message: string = 'Hello World'

  @Builder
  content1() {
    Text('测试1').fontColor(Color.Blue).fontSize(30)
  }

  build() {
    Row() {
      Column() {
        CustomNavView({
          navTitle: this.message,
          rightRowElement: this.content1,
        }).width('100%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

总的来说，HarmonyOS是一款非常优秀的操作系统，期待它能在未来带给我们更多惊喜！

我再琢磨琢磨，

我发现是你使用的问题：不能这样使用。

把 this.rightRowElement()直接换成：NavRightView() 就可以啦。

不是的，我的代码示例也有问题。我本想自己写个父类NavRightView。然后在其他的page里继承这个父类完成自己的样式设计，发现不可行。也可能是我写的问题，

下面6楼是你想要的效果么？

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

应该是的，一会写一遍，再看看文档。

上网搜索下 arkts @BuilderParam 就能查到这个问题的答案了

类似vue的插槽

项目名称

  • 项目状态：进行中
  • 项目类型：Web开发

项目描述

这是一个使用React和Node.js构建的全栈Web应用程序。它允许用户注册、登录并管理他们的个人资料。

技术栈

  • 前端：
    • React
    • Redux
    • HTML/CSS
  • 后端：
    • Node.js
    • Express
    • MongoDB

@BulderParam ，例如

@BuilderParam 
content: () => void

项目名称

  • 项目状态：进行中
  • 项目类型：Web开发
  • 项目时间：2023年1月 - 2023年6月

项目描述

这是一个在线商城项目，主要功能包括商品展示、购物车管理、订单处理等。

技术栈

  • HTML
  • CSS
  • JavaScript

右侧一般是图或文字，感觉不需要传进来组件也可以吧。

https://blog.csdn.net/qq_34512796/article/details/135406674?spm=1001.2014.3001.5501

是的。我一开始也想了。直接写两个按钮放在哪，可以传文字，图片和点击事件，不传的话就默认空。我就是想实现下这样的组件传递。我是在用flutter的思维考虑这个实现。

@Component export struct PageHeader { private onBack(): void = () => { } title: string|Resource; // // @Builder // RightBuilder() { // } // // @BuilderParam right: () => void = this.RightBuilder;

@Builder LeftBuilder() {

Button({ type: 2 }) {
  Image($r('app.media.ic_public_arrow_left')).height($r('app.float.size_23'))
}.width($r('app.float.size_49')).height($r('app.float.size_49')).backgroundColor('transparent').padding(0).onClick(() => {
  this.onBack()
})

}

@BuilderParam left: () => void = this.LeftBuilder;

build() { RelativeContainer() { Row() { this.left() }.alignRules({ left: { ‘anchor’: “container”, ‘align’: HorizontalAlign.Start }, center: { ‘anchor’: “container”, ‘align’: VerticalAlign.Center } }).id(‘main-header-left’)

  Text(this.title).alignRules({
    middle: { 'anchor': "__container__", 'align': HorizontalAlign.Center },
    center: { 'anchor': "__container__", 'align': VerticalAlign.Center }
  }).fontSize($r('app.float.font_size_24')).fontColor(Color.White).id('main-header-title').fontWeight(FontWeight.Medium)

}.width('100%').height($r('app.float.up_bg_height_short')).backgroundColor(Color.Transparent)

} }

我写的垃圾玩意，你可以参考一下

姓名：张三 职位：软件工程师 简介：具有五年软件开发经验，熟悉Java和Python。

有导航组件Navigation

这个看着有点迷糊，一直做iOS开发，感觉他的样式很陌生，我得在看看。谢谢，

我一开始并没有使用自定义组件，而是想传递进来一个Row组件，但是也是不行。是不是不能这样的写呢？

在HarmonyOS（鸿蒙）的Next版本中，使用ArkTS进行布局时，可以通过将组件作为参数传递给函数或组件来实现动态布局。具体来说，可以在函数或组件的参数列表中定义一个类型为Component的参数，然后在调用时传入相应的组件。例如：

function MyLayout(content: Component) {
  Column() {
    Text('Header')
    content
    Text('Footer')
  }
}

@Entry
@Component
struct MyComponent {
  build() {
    MyLayout(
      Text('Main Content')
    )
  }
}

在这个例子中，MyLayout函数接受一个Component类型的参数content，并在布局中使用它。MyComponent组件在调用MyLayout时传入了一个Text组件作为参数。这种方式可以灵活地将不同的组件动态插入到布局中。

回到顶部