输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
指南
指南应用框架UI Design Kit（UI设计套件）组件导航图标类型设置

图标类型设置

更新时间: 2026-07-28 11:23
本文导读

场景介绍

从6.0.0(20)版本开始，导航组件新增了对文本型与图片型图标类型的支持。

当应用开发者需要配置图片型图标，或者使用普通文字型图标、单字图标时，可通过设置titleBar图标内容配置中的type属性实现该功能。

图片型图标(IconStyleMode.LARGE)：适用于需要展示完整图像的场景，例如应用的Logo、用户头像、宣传图或自定义图形按钮。

普通文字型图标(TextStyleMode.NORMAL)：常规的文本按钮，适用于功能选项、操作按钮等需要清晰表达文本含义的场景。

单字图标(TextStyleMode.SINGLE_CHARACTER)：适用于需要节省空间的紧凑布局，常用于快速操作入口，建议仅在单个文字或字母的场景使用。

开发步骤

  1. 导入相关模块。

    收起
    自动换行
    深色代码主题
    复制
    1. // 从6.0.2(22)版本开始，无需手动导入HdsNavigationAttribute。具体请参考HdsNavigation的导入模块说明。
    2. import { TextStyleMode, IconStyleMode, HdsNavigation, HdsNavigationAttribute, HdsNavigationTitleMode } from '@kit.UIDesignKit';

  2. 创建一级导航组件，通过配置titleBar中的menu上的type属性，实现文字型图标以及图片型图标大小设置。

    收起
    自动换行
    深色代码主题
    复制
    1. @Entry
    2. @Component
    3. struct Index {
    4.   build() {
    5.     HdsNavigation() { // 创建HdsNavigation组件
    6.     }
    7.     .titleBar({
    8.       content: {
    9.         title: { mainTitle: '标题' },
    10.         subIcon: {
    11.           content: {
    12.             // 设置用户头像，图片型图标类型
    13.             icon: $r('app.media.contacts'), // contacts为自定义资源，开发者需替换本地资源
    14.             type: IconStyleMode.LARGE,
    15.             label: 'subIcon', // 无障碍播报内容
    16.             isEnabled: true,
    17.             action: () => {
    18.             }
    19.           }
    20.         },
    21.         menu: {
    22.           // 设置菜单内容
    23.           value: [{
    24.             content: {
    25.               // 设置第一个菜单项内容，设置为普通文本按钮
    26.               label: '文本',
    27.               type: TextStyleMode.NORMAL,
    28.               isEnabled: true,
    29.               componentId: 'menu_1',
    30.               action: () => {
    31.               }
    32.             }
    33.           }, {
    34.             content: {
    35.               // 设置第二个菜单项内容，设置为单字按钮
    36.               label: '单',
    37.               type: TextStyleMode.SINGLE_CHARACTER,
    38.               isEnabled: true,
    39.               componentId: 'menu_2',
    40.               action: () => {
    41.               }
    42.             }
    43.           }, {
    44.             content: {
    45.               // 设置第三个菜单项内容，设置为通用图标按钮
    46.               label: 'largeIcon',
    47.               icon: $r('sys.symbol.AI_search'),
    48.               type: IconStyleMode.NORMAL,
    49.               isEnabled: true,
    50.               componentId: 'menu_3',
    51.               action: () => {
    52.               }
    53.             }
    54.           }],
    55.           maxCount: 3 // 最大菜单显示个数配置
    56.         }
    57.       }
    58.     })
    59.     .titleMode(HdsNavigationTitleMode.MINI)
    60.     .hideBackButton(true)
    61.   }
    62. }
半模态样式
设置应用内多窗
相关推荐
文档按钮标注
文档button
文档image
文档设置信息提醒
文档button开发指导
文档text
文档badge
文档label
文档文本概述
文档设置动态模糊样式
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 指南 中进行搜索
请输入您想要搜索的关键词