菜單在OpenHarmony中怎么用

在OpenHarmony中，菜單可以通過使用Menu組件來創建。Menu組件以垂直列表形式顯示菜單項，可以包含多個MenuItem和MenuItemGroup子組件。以下是使用菜單的基本步驟和屬性說明：

基本使用

1. 創建Menu組件：

使用Menu()接口創建菜單容器，無需參數。

let menu = Menu();

2. 添加MenuItem：

使用MenuItem接口創建具體的菜單項。MenuItem可以設置圖標、內容、標簽信息等。

let item1 = MenuItem({
    startIcon: '/resources/icon1.png',
    content: '菜單項1',
    endIcon: '/resources/icon2.png',
    labelInfo: '快捷方式Ctrl+C',
    selected: false,
    selectIcon: true,
    onChange: (selected) => {
        console.log('菜單項選中狀態變化', selected);
    }
});
menu.appendChild(item1);

3. 創建MenuItemGroup：

使用MenuItemGroup接口創建菜單項的分組。MenuItemGroup可以設置標題和尾部顯示信息。

let group = MenuItemGroup({
    header: '分組標題',
    footer: '分組尾部信息'
});
group.appendChild(item1);
menu.appendChild(group);

屬性說明

• fontsize：統一設置Menu中所有文本的尺寸，可以是number類型（使用fp單位）或string類型（顯式指定像素單位或百分比）。
• selected：設置菜單項是否選中，默認值為false。
• selectIcon：當菜單項被選中時，是否顯示被選中的圖標。
• onChange：當選中狀態發生變化時觸發的回調函數。

示例代碼

以下是一個簡單的示例代碼，展示了如何在OpenHarmony中創建一個包含多個菜單項和分組的菜單：

// 創建Menu組件
let menu = Menu();

// 創建MenuItemGroup組件
let group = MenuItemGroup({
    header: '分組標題',
    footer: '分組尾部信息'
});

// 創建第一個MenuItem
let item1 = MenuItem({
    startIcon: '/resources/icon1.png',
    content: '菜單項1',
    endIcon: '/resources/icon2.png',
    labelInfo: '快捷方式Ctrl+C',
    selected: false,
    selectIcon: true,
    onChange: (selected) => {
        console.log('菜單項1選中狀態變化', selected);
    }
});

// 創建第二個MenuItem
let item2 = MenuItem({
    startIcon: '/resources/icon3.png',
    content: '菜單項2',
    endIcon: '/resources/icon4.png',
    labelInfo: '快捷方式Ctrl+V',
    selected: false,
    selectIcon: true,
    onChange: (selected) => {
        console.log('菜單項2選中狀態變化', selected);
    }
});

// 將MenuItem添加到MenuItemGroup
group.appendChild(item1);
group.appendChild(item2);

// 將MenuItemGroup添加到Menu
menu.appendChild(group);

// 將Menu添加到頁面中
this.appendChild(menu);

以上信息提供了在OpenHarmony中創建和使用菜單的基本方法和屬性。根據具體的應用需求，可以進一步自定義菜單的樣式和行為。