标题栏与工具栏

一种普通标题栏，支持设置标题、头像（可选）和副标题（可选），可用于一级页面、二级及其以上界面配置返回键。

注意

1. 引入模块

import { ComposeTitleBar, promptAction } from '@kit.ArkUI';

效果

子组件

无

参数

item

左边头像

// 是否启用

item: { isEnabled: true, value: $r('sys.media.ohos_app_icon') },

title

标题

subtitle

副标题

menuItems

必须是数组类型,可以多个,排不开就折叠

• value 图标

• isEnabled 是否启用

• action 点击事件

menuItems: [
  {
    value: $r("sys.media.ohos_ic_public_copy"),
    //启用图标
    isEnabled: false,
    action: () => promptAction.showToast({ message: "show toast index 1" }),
  },
  {
    value: $r("sys.media.ohos_ic_public_edit"),
    //启用图标
    isEnabled: true,
    action: () => promptAction.showToast({ message: "show toast index 2" }),
  },
];

属性

无

事件

无

代码

import { ComposeTitleBar, promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index3 {
    build() {
        Column() {
            Row() {
                ComposeTitleBar({
                    title: "标题",
                    subtitle: "这就是描述",
                    menuItems: [{
                        //item
                        //菜单图片资源
                        value: $r('sys.media.ohos_save_button_filled'),
                        //启用图标
                        isEnabled: true,
                        //点击菜单时触发事件
                        action: () => promptAction.showToast({ message: "show toast index 1" })
                    },]
                })
            }

            Divider()
            Row() {
                ComposeTitleBar({
                    item: { value: $r('sys.media.ohos_app_icon') },
                    title: "标题第二种",
                    subtitle: "这就是描述第二种",
                    menuItems: [
                        {
                            value: $r('sys.media.ohos_ic_public_copy'),
                            //启用图标
                            isEnabled: false,
                            action: () => promptAction.showToast({ message: "show toast index 1" })
                        },
                        {
                            value: $r('sys.media.ohos_ic_public_edit'),
                            //启用图标
                            isEnabled: true,
                            action: () => promptAction.showToast({ message: "show toast index 2" })
                        },
                        {
                            value: $r('sys.media.ohos_ic_public_copy'),
                            //启用图标
                            isEnabled: false,
                            action: () => promptAction.showToast({ message: "show toast index 1" })
                        },
                        {
                            value: $r('sys.media.ohos_ic_public_edit'),
                            //启用图标
                            isEnabled: true,
                            action: () => promptAction.showToast({ message: "show toast index 2" })
                        },
                    ]
                })
            }
        }

    }
}