EditableTitleBar

编辑型标题栏，适用于多选界面或者内容的编辑界面，一般采取左叉右勾的形式。能自定义左边图标事件

效果

子组件

无

参数

leftIconStyle

左边图标样式 有两种 1. EditableLeftIconType.Back 就是箭头 2. EditableLeftIconType.Cancel 就是 X 符号

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" }),
  },
];

属性

无

事件

onCancel

点击左边 icon 图标触发的事件

onCancel: () => {
    promptAction.showToast({ message: 'on cancel' });
},

onSave

点击右边 icon 图标触发的事件

onSave: () => {
  promptAction.showToast({ message: "on save" });
};

示例

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

@Entry
@Component
struct Index4 {
    @State message: string = "23232"

    build() {
        Column() {
            Row() {

                // 左侧取消按钮，右侧保存按钮。
                EditableTitleBar({
                    leftIconStyle: EditableLeftIconType.Cancel,
                    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" })
                        },
                    ],
                    onCancel: () => {
                        promptAction.showToast({ message: 'on cancel' });
                    },
                    onSave: () => {
                        promptAction.showToast({ message: 'on save' });
                    }
                })

            }

            Row() {

                // 左侧取消按钮，右侧保存按钮。
                EditableTitleBar({
                    leftIconStyle: EditableLeftIconType.Back,
                    title: '编辑页面',
                    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" })
                        },
                    ],
                    onCancel: () => {
                        promptAction.showToast({ message: 'on cancel' });
                    },
                    onSave: () => {
                        promptAction.showToast({ message: 'on save' });
                    }
                })
                Divider().height(2).color(0xCCCCCC)
            }
        }
    }
}