HarmonyOS 鸿蒙Next中HMNavigation title如何实现自定义

HarmonyOS 鸿蒙Next中HMNavigation title如何实现自定义

HMNavigation

怎么实习自定义标题，居中显示
直接wrapBuilder(titleBuilder)不会报错，但是不能传参...


@Builder
function titleBuilder(param: BuildRooms) {
  Column() {
    Text(param.name)
  }
}
const wBuilder: WrappedBuilder<[BuildRooms]> = wrapBuilder(titleBuilder);

@HMRouter({pageUrl: 'RoomPage'})
@ComponentV2
export struct RoomPage {
  private  param: BuildRooms | null = null;
  aboutToAppear(): void {
    this.param = HMRouterMgr.getCurrentParam() as BuildRooms;
    Logger.info(`param + ${this.param}`)
  }
  build() {
    HMNavigation({
      navigationId: RouterMap.ROOM_PAGE,
      options:{
        title: {
          titleValue: wBuilder.builder({param: this.param})
        },
        modifier: new NavModifier()
      }
    }){

    }
  }
}

更多关于HarmonyOS 鸿蒙Next中HMNavigation title如何实现自定义的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

可以这样去解决：

import { AttributeUpdater, LengthMetrics } from '@kit.ArkUI';
import { HMDefaultGlobalAnimator, HMNavigation, HMRouterMgr } from '@hadss/hmrouter';

/**
 * 界面样式公用函数
 */
class NavModifier extends AttributeUpdater<NavigationAttribute> {
  initializeModifier(instance: NavigationAttribute): void {
    instance.mode(NavigationMode.Stack);
    instance.navBarWidth('100%');
    instance.hideToolBar(true);
  }
}

interface BuildRooms {
  name: string
}

@Entry
@Component
struct Index {
  modifier: NavModifier = new NavModifier();
  private param: BuildRooms = {
    name: "sy"
  };

  aboutToAppear(): void {
  }

  @Builder
  MyBuilderFunction(params: BuildRooms) {
    Text("标题在这" + params.name)
      .textAlign(TextAlign.Center)
      .backgroundColor(Color.Pink)
      .width('100%')
  }

  build() {
    // @Entry中需要再套一层容器组件,Column或者Stack
    Column() {
      // 使用HMNavigation容器
      HMNavigation({
        navigationId: 'mainNavigation',
        options: {
          // 设置动画样式
          standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR,
          // 设置弹框动画样式
          dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR,
          // 设置页面navigation的参数，标题栏，工具栏，bar那些
          modifier: this.modifier,
          title: {
            titleValue: {
              builder: () => {
                this.MyBuilderFunction(this.param)
              },
            },
            titleOptions: {
              paddingStart: new LengthMetrics(6)
            }
          }
        },
      }) {
        Row() {
          Text("点击跳转")
            .fontSize(50)
            .onClick(() => {
              HMRouterMgr.push({ pageUrl: 'pageB' })
            })
        }
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Yellow)
        .justifyContent(FlexAlign.Center)
      }
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next中HMNavigation title如何实现自定义的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


楼主是想实现HMNavigation 标题的切换的是为了不同页面展示不同的标点的话我更建议楼主使用多个HMNavigation
新页面：

@HMRouter({ pageUrl: 'animator://globalAnimatorPage' })
@Component
export struct GlobalAnimatorPage {
  build() {
    Flex({
      direction: FlexDirection.Column,
      justifyContent: FlexAlign.Start,
      alignItems: ItemAlign.Stretch,
    }) {
      NavBar({ title: RouterPageConstant.CUSTOM_ANIMATOR_CASE });
      CaseDescriptor({
        desc: RouterPageConstant.DIALOG_ANIMATOR_PAGE_DESC2
      });
      Column() {
        HMNavigation({
          navigationId: 'childNavigation',
          homePageUrl: 'GlobalAnimatorHomePage',
          options: {
            standardAnimator: HMCustomGlobalAnimator.STANDARD_ANIMATOR,
            dialogAnimator: HMCustomGlobalAnimator.DIALOG_ANIMATOR
          }
        });
      }.layoutWeight(1);
    };
  }
}

HMNavigation 之间的跳转携带navigationId跳转即可

通过@Builder构建自定义标题组件

[@Builder](/user/Builder) NavigationCenterTitle() {
  Column() {
    Text('居中标题')
      .fontSize(22)
      .fontWeight(FontWeight.Medium)
  }
  .width('100%')
  .alignItems(HorizontalAlign.Center)
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
}

隐藏默认标题栏：在页面设置中移除.title()参数

添加自定义组件到Navigation顶部

Navigation() {
  Column() {
    this.CustomTitleComponent() // 自定义标题组件
    NavDestination() {
      // 页面内容
    }
  }
}

使用@Builder构建标题组件

[@Builder](/user/Builder)
function titleBuilder(param: BuildRooms) {
  Column() {    // 核心布局容器
    Text(param.name)
      .fontSize(20)
      .fontColor(Color.Black)
  }
  .width('100%')        // 楼主这里要设置宽度
  .height(56)
  .alignItems(HorizontalAlign.Center)  // 居中设置
  .justifyContent(FlexAlign.Center)
}

优化参数传递

const wBuilder: WrappedBuilder<[BuildRooms]> = wrapBuilder(titleBuilder);

// 在组件中使用
title: {
  titleValue: wBuilder.builder({ param: this.param })
}

在HarmonyOS的ArkUI框架中，HMNavigation组件的标题自定义通过title属性实现。可使用自定义组件或Builder函数进行灵活定义。例如，在@Entry组件中设置title属性为自定义的UI描述，支持文本、图标或组合元素。具体通过Navigation组件相关接口配置，避免依赖Java或C。

在HarmonyOS Next中，HMNavigation的自定义标题可以通过titleBuilder实现居中显示。你当前的代码方向正确，但需要调整参数传递方式。

使用wrapBuilder时，确保参数类型匹配。在titleBuilder中，直接使用Text组件并设置textAlign(TextAlign.Center)即可实现居中：

@Builder
function titleBuilder(param: BuildRooms) {
  Column() {
    Text(param.name)
      .textAlign(TextAlign.Center)  // 添加居中属性
      .width('100%')
  }
}

如果参数传递有问题，可以尝试在aboutToAppear中确保this.param已正确赋值，避免空值导致构建失败。检查BuildRooms类型的定义，确保name属性存在。

这种方式能够有效自定义导航栏标题并实现居中显示。

回到顶部