HarmonyOS鸿蒙Next中如何在不同界面中复用相同布局？

HarmonyOS鸿蒙Next中如何在不同界面中复用相同布局？ 小白请问大家，我的顶部栏布局在多个界面中会用到，可以通过什么方式实现在多个界面中复用相同的布局呢。另外，不同界面中该复用布局的某些参数会有不同。可以怎么实现呢，谢谢。

6 回复

定义一个复用的顶部栏组件并导出

import { router } from "@kit.ArkUI"

@Component
export struct NavBarView {
  title:string = '' //标题
  back?:boolean = false  //是否显示返回按钮
  setting?:boolean = false //是否显示设置按钮
  build() {
    Row(){
      //返回
      Image($r('app.media.icon_arrow_l'))
        .width(22)
        .aspectRatio(1)
        .fillColor('#555')
        .visibility(this.back?Visibility.Visible : Visibility.Hidden) //只是不可见，但是组件还在，用来占位
        .onClick(()=>{
          router.back()
        })
      //标题
      Text(this.title || '测试标题')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .fontColor('#444')
      //设置
      Image($r('app.media.icon_setting'))
        .height(22)
        .fillColor($r('app.color.theme6'))
        .visibility(this.setting?Visibility.Visible : Visibility.Hidden)
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)  //两端对齐
    .backgroundColor('#f0f0f0')
    .padding(15) //内边距15

  }
}

在需要使用复用组件的地方

NavBarView({ title: 'HELLO', back: false, setting: true });

由于复用组件中的back参数设置了默认值，所以当back参数为false时，可以省略不写

NavBarView({ title: 'HELLO', setting: true });

记得导包

更多关于HarmonyOS鸿蒙Next中如何在不同界面中复用相同布局？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


请问如果需要自定义顶部栏按钮点击后的动作，需要如何实现呢，

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

直接在对应组件上绑定点击事件就好了。如果需要处理数据，数据在另外的组件中，可以在复用组件中添加一个函数类型的属性。

@Component
export struct NavBarView {
  // .....
  action?(): void = () => {} // 定义一个可选的函数类型的属性
  build() {
    Row(){
      // ......
      // 设置
      Image($r('app.media.icon_setting'))
        .height(22)
        .onClick(() => {
             this.action()  // 触发传入的函数
         })
    }
  }
}

使用方法：

NavBarView({ ....,  action:() => { //需要执行的代码 } });

也可以这样：

action:() => viod = () => { // 需要执行的代码 }

在HarmonyOS中复用布局可通过自定义组件实现。使用ArkUI的@Component装饰器创建可复用组件，将公共布局封装为独立组件文件（.ets）。在需要调用的页面中import组件并直接使用。对于动态内容，通过@Prop或@Link装饰器传递参数。示例：

// ReusableComponent.ets
@Component
export struct ReusableComponent {
  [@Prop](/user/Prop) title: string
  
  build() {
    Column() {
      Text(this.title)
      // 其他公共布局
    }
  }
}

// 调用页面
import { ReusableComponent } from './ReusableComponent'

@Entry
@Component
struct Page1 {
  build() {
    Column() {
      ReusableComponent({ title: '页面1标题' })
    }
  }
}

在HarmonyOS Next中复用布局可以通过以下方式实现：

  1. 使用自定义组件(Custom Component)：
  • 将顶部栏封装成独立的自定义组件
  • 通过@Prop或@Link装饰器接收外部传入的不同参数
  • 在需要使用的页面中直接引用该组件
  1. 使用@Builder装饰器：
  • 将公共布局代码封装成@Builder方法
  • 在不同页面中调用该方法并传入不同参数
  1. 使用资源文件：
  • 将布局提取到单独的hml文件中
  • 通过<include>标签引入到不同页面
  • 使用数据绑定传递不同参数

示例代码：

// 自定义组件方式
@Component
struct TopBar {
  [@Prop](/user/Prop) title: string
  
  build() {
    Row() {
      Text(this.title)
        .fontSize(20)
    }
    .width('100%')
    .height(50)
  }
}

// 使用组件
@Entry
@Component
struct Page1 {
  build() {
    Column() {
      TopBar({title: '页面1'})
      // 其他内容...
    }
  }
}

这种方式既实现了布局复用，又能灵活配置不同参数。

回到顶部