🚀一、Menu組件 Menu組件是一種常見的用戶界面（UI）控件，用于在移動應用程序中顯示可選項列表。它通常由一系列鏈接或按鈕組成，以幫助用戶導航和選擇所需的操作。Menu組件可以在水平或垂直方向上呈現(xiàn)，可以是下拉或彈出式的，并可以在需要時動態(tài)更新其內容。通常，Menu組件可以在導航
Menu組件是一種常見的用戶界面（UI）控件，用于在移動應用程序中顯示可選項列表。它通常由一系列鏈接或按鈕組成，以幫助用戶導航和選擇所需的操作。Menu組件可以在水平或垂直方向上呈現(xiàn)，可以是下拉或彈出式的，并可以在需要時動態(tài)更新其內容。通常，Menu組件可以在導航欄、側邊欄或上下文菜單中找到。一些Menu組件還支持圖標和快捷鍵，以增強用戶交互性和可用性。
默認樣式的菜單指的是操作系統(tǒng)默認提供的菜單樣式，在不經過樣式定義的情況下，菜單的外觀和行為取決于操作系統(tǒng)。例如，大多數操作系統(tǒng)提供了一個默認的下拉菜單樣式，其中包含一個向下箭頭和一個下拉列表，當用戶單擊時，列表會向下滑動。而操作系統(tǒng)的菜單通常包括一個固定的樣式。
@Entry
@Component
struct Index {
build() {
Row() {
Button('click for Menu')
.bindMenu([
{
value: 'Menu1',
action: () => {
console.info('handle Menu1 select')
}
}
])
}
.margin(20)
.height('100%')
}
}
雖然默認樣式的菜單可以提供一些基本的菜單操作，但通常它們無法滿足大多數應用程序或網站的需求，因此需要自定義樣式的菜單。
@Entry
@Component
struct Index {
@State select: boolean = true
private iconStr: ResourceStr = $r("app.media.app_icon")
private iconStr2: ResourceStr = $r("app.media.app_icon")
@Builder
SubMenu() {
Menu() {
MenuItem({ content: "復制", labelInfo: "Ctrl+C" })
MenuItem({ content: "粘貼", labelInfo: "Ctrl+V" })
}
}
@Builder
MyMenu(){
Menu() {
MenuItem({ startIcon: $r("app.media.icon"), content: "菜單選項" })
MenuItem({ startIcon: $r("app.media.icon"), content: "菜單選項" }).enabled(false)
MenuItem({
startIcon: this.iconStr,
content: "菜單選項",
endIcon: $r("app.media.app_icon"),
builder: this.SubMenu.bind(this),
})
MenuItemGroup({ header: '小標題' }) {
MenuItem({ content: "菜單選項" })
.selectIcon(true)
.selected(this.select)
.onChange((selected) => {
console.info("menuItem select" + selected);
this.iconStr2 = $r("app.media.icon");
})
MenuItem({
startIcon: $r("app.media.app_icon"),
content: "菜單選項",
endIcon: $r("app.media.app_icon"),
builder: this.SubMenu.bind(this)
})
MenuItem({
startIcon: this.iconStr2,
content: "菜單選項",
endIcon: $r("app.media.app_icon")
})
}
}
build() {
Row() {
Button('click for Menu')
.bindMenu(this.MyMenu)
}
}
}
本人測試子菜單在模擬器和預覽都出不來
