菜单

效果

子组件

• MenuItem

• MenuGroup

参数

MenuItem 参数

• startIcon

左边图标

• endIcon

右边图标

• content

文字内容

• builder 二级菜单

里面也是 MenuItem

MenuGroup 参数

• header

可以是文字 也可以是组件或者 Builder

• footer

可以是文字 也可以是组件或者 Builder

属性

enabled

是否能点击 true 就是能点击 false 就是不能点击

事件

onChange

改变事件

.onChange((res: boolean) => {
    // this.selected = res
    console.info(res.toString())
})

示例

@Entry
@Component
struct Index9 {
    @State selected: boolean = false;

    @Builder
    SubMenu() {
        Menu() {
            MenuItem({ content: "复制", labelInfo: "Ctrl+C" }).selected(this.selected).onChange((res: boolean) => {
                this.selected = res
                console.info(res.toString())
            })
            MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
        }
    }

    @Builder
    MyMenu() {
        Menu() {
            MenuItem({ startIcon: $r('sys.media.ohos_ic_public_email'), content: "菜单选项" })
                .labelFontColor(Color.Red)
                .selected(true)
                .onChange((res: boolean) => {
                    // this.selected = res
                    console.info(res.toString())
                })
            MenuItem({ startIcon: $r('sys.media.ohos_ic_public_email'), content: "菜单选项" })
                .enabled(false)
            MenuItem({
                startIcon: $r('sys.media.ohos_ic_public_email'),
                content: "菜单选项222",
                endIcon: $r('sys.media.ohos_ic_public_email'),
                builder: (): void => this.SubMenu()
            })
            MenuItemGroup({ header: '小标题' }) {
                MenuItem({
                    startIcon: $r('sys.media.ohos_ic_public_edit'),
                    content: "菜单选项",
                    endIcon: $r('sys.media.ohos_ic_public_edit'),
                    builder: (): void => this.SubMenu()
                })
                MenuItem({
                    startIcon: $r("app.media.app_icon"),
                    content: "菜单选项",
                    endIcon: $r('sys.media.ohos_ic_public_edit'),
                    builder: (): void => this.SubMenu()
                })
            }

            MenuItem({
                startIcon: $r('sys.media.ohos_ic_public_edit'),
                content: "菜单选项",
            })
        }
    }

    build() {
        Column() {
            Row() {
                Button("点击弹出").type(ButtonType.Normal).bindMenu(
                    this.MyMenu
                )
            }
        }
    }
}