feat:增加bindmenu/bindcontextmenu至统一hap

Signed-off-by: Zhang Jinyu <zhangjinyu101@huawei.com>

examples/components/entry/src/main/ets/pages/operates/BindContextMenuBootcamp.ets

@@ -0,0 +1,158 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Drawer } from '../../components/Drawer';
+import { IconBlock, RadioBlock, useEnabled } from 'common';
+
+@Component
+export struct BindContextMenuBootcamp {
+  @Require @Prop title: ResourceStr;
+  @State showParameters: boolean = false;
+  @State enableAllowUse: boolean = false;
+  @State allowUse: boolean = true;
+  @State enableStartIcon: boolean = false;
+  @State startIcon: ResourceStr = $r('sys.media.ohos_ic_public_device_phone');
+  @State enableEndIcon: boolean = false;
+  @State endIcon: ResourceStr = $r('sys.media.ohos_ic_public_device_phone');
+  @State labelNum: number = 2
+  @State enableLabelNum: boolean = false
+  @State showSecondaryMenu: boolean = false
+
+  build(){
+    NavDestination() {
+      Drawer({
+        title: this.title,
+        showParameters: $showParameters,
+        content: () => {
+          this.Content()
+        },
+        parameters: () => {
+          this.Parameters()
+        }
+      })
+    }
+    .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
+    .hideTitleBar(true)
+  }
+
+  @Builder
+  SubMenu(){
+    Menu() {
+      MenuItem({ content: '复制', labelInfo: 'Ctrl+C' })
+      MenuItem({ content: '粘贴', labelInfo: 'Ctrl+V' })
+    }
+  }
+
+  @Builder
+  MyMenu(){
+    Menu() {
+      MenuItem({
+        startIcon: useEnabled<ResourceStr>(this.enableStartIcon, this.startIcon),
+        content: '菜单选项1',
+        endIcon: useEnabled<ResourceStr>(this.enableEndIcon, this.endIcon),
+        builder: useEnabled<CustomBuilder>(this.ShowSecondaryMenu,
+          this.ShowSecondaryMenu ? (): void => this.SubMenu() : undefined),
+      })
+        .enabled(useEnabled<boolean>(this.enableAllowUse, this.allowUse))
+      MenuItem({
+        startIcon: useEnabled<ResourceStr>(this.enableStartIcon, this.startIcon),
+        content: '菜单选项2',
+        endIcon: useEnabled<ResourceStr>(this.enableEndIcon, this.endIcon),
+        builder: useEnabled<CustomBuilder>(this.ShowSecondaryMenu,
+          this.ShowSecondaryMenu ? (): void => this.SubMenu() : undefined),
+      })
+        .enabled(useEnabled<boolean>(this.enableAllowUse, this.allowUse))
+      MenuItem({
+        startIcon: useEnabled<ResourceStr>(this.enableStartIcon, this.startIcon),
+        content: '菜单选项3',
+        endIcon: useEnabled<ResourceStr>(this.enableEndIcon, this.endIcon),
+        builder: useEnabled<CustomBuilder>(this.ShowSecondaryMenu,
+          this.ShowSecondaryMenu ? (): void => this.SubMenu() : undefined),
+      })
+        .enabled(useEnabled<boolean>(this.enableAllowUse, this.allowUse))
+      MenuItem({
+        startIcon: useEnabled<ResourceStr>(this.enableStartIcon, this.startIcon),
+        content: '菜单选项4',
+        endIcon: useEnabled<ResourceStr>(this.enableEndIcon, this.endIcon),
+        builder: useEnabled<CustomBuilder>(this.ShowSecondaryMenu,
+          this.ShowSecondaryMenu ? (): void => this.SubMenu() : undefined),
+      })
+        .enabled(useEnabled<boolean>(this.enableAllowUse, this.allowUse))
+    }
+  }
+
+  @Builder
+  Content(){
+    Column() {
+      Button(
+        this.enableLabelNum ? '弹出菜单'.repeat(this.labelNum / 2) : '弹出菜单',
+      )
+        .bindContextMenu(this.MyMenu(), ResponseType.LongPress)
+    }
+    .onDragStart(()=>{
+      ContextMenu.close()
+    })
+  }
+
+  @Builder
+  Parameters(){
+    Scroll() {
+      Column({ space: 8 }) {
+        RadioBlock({
+          title: '是否可用菜单',
+          isEnabled: this.enableAllowUse,
+          value: this.allowUse,
+          dataSource: [
+            { label: '允许', value: true },
+            { label: '禁止', value: false },
+          ]
+        })
+
+        RadioBlock({
+          title: '是否允许显示二级菜单',
+          isEnabled: this.ShowSecondaryMenu,
+          value: this.ShowSecondaryMenu,
+          dataSource: [
+            { label: '允许', value: true },
+            { label: '禁止', value: false },
+          ]
+        })
+
+        IconBlock({
+          title: '是否显示前缀图标',
+          isEnabled: this.enableStartIcon,
+          icon: this.startIcon,
+        })
+
+        IconBlock({
+          title: '是否显示后缀图标',
+          isEnabled: this.enableEndIcon,
+          icon: this.endIcon,
+        })
+
+      }.width('100%')
+    }.height('50%')
+  }
+}
+
+@Preview
+@Component
+struct BindContextMenuBootcampPreviewer {
+  build(){
+    BindContextMenuBootcamp({
+      title: '上下文菜单/BindContextMenu'
+    })
+  }
+}

examples/components/entry/src/main/ets/pages/operates/BindMenuBootcamp.ets

@@ -0,0 +1,155 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Drawer } from '../../components/Drawer';
+import { IconBlock, RadioBlock, useEnabled } from 'common';
+
+@Component
+export struct BindMenuBootcamp {
+  @Require @Prop title: ResourceStr;
+  @State showParameters: boolean = false;
+  @State enableAllowUse: boolean = false;
+  @State allowUse: boolean = true;
+  @State enableStartIcon: boolean = false;
+  @State startIcon: ResourceStr = $r('sys.media.ohos_ic_public_device_phone');
+  @State enableEndIcon: boolean = false;
+  @State endIcon: ResourceStr = $r('sys.media.ohos_ic_public_device_phone');
+  @State labelNum: number = 2
+  @State enableLabelNum: boolean = false
+  @State showSecondaryMenu: boolean = false
+
+  build(){
+    NavDestination() {
+      Drawer({
+        title: this.title,
+        showParameters: $showParameters,
+        content: () => {
+          this.Content()
+        },
+        parameters: () => {
+          this.Parameters()
+        }
+      })
+    }
+    .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
+    .hideTitleBar(true)
+  }
+
+  @Builder
+  SubMenu(){
+    Menu() {
+      MenuItem({ content: '复制', labelInfo: 'Ctrl+C' })
+      MenuItem({ content: '粘贴', labelInfo: 'Ctrl+V' })
+    }
+  }
+
+  @Builder
+  MyMenu(){
+    Menu() {
+      MenuItem({
+        startIcon: useEnabled<ResourceStr>(this.enableStartIcon, this.startIcon),
+        content: '菜单选项1',
+        endIcon: useEnabled<ResourceStr>(this.enableEndIcon, this.endIcon),
+        builder: useEnabled<CustomBuilder>(this.ShowSecondaryMenu,
+          this.ShowSecondaryMenu ? (): void => this.SubMenu() : undefined),
+      })
+       .enabled(useEnabled<boolean>(this.enableAllowUse, this.allowUse))
+        MenuItem({
+          startIcon: useEnabled<ResourceStr>(this.enableStartIcon, this.startIcon),
+          content: '菜单选项2',
+          endIcon: useEnabled<ResourceStr>(this.enableEndIcon, this.endIcon),
+          builder: useEnabled<CustomBuilder>(this.ShowSecondaryMenu,
+            this.ShowSecondaryMenu ? (): void => this.SubMenu() : undefined),
+        })
+        MenuItem({
+          startIcon: useEnabled<ResourceStr>(this.enableStartIcon, this.startIcon),
+          content: '菜单选项3',
+          endIcon: useEnabled<ResourceStr>(this.enableEndIcon, this.endIcon),
+          builder: useEnabled<CustomBuilder>(this.ShowSecondaryMenu,
+            this.ShowSecondaryMenu ? (): void => this.SubMenu() : undefined),
+        })
+      MenuItem({
+        startIcon: useEnabled<ResourceStr>(this.enableStartIcon, this.startIcon),
+        content: '菜单选项4',
+        endIcon: useEnabled<ResourceStr>(this.enableEndIcon, this.endIcon),
+        builder: useEnabled<CustomBuilder>(this.ShowSecondaryMenu,
+          this.ShowSecondaryMenu ? (): void => this.SubMenu() : undefined),
+      })
+    }
+  }
+
+  @Builder
+  Content(){
+      Column() {
+        Button(
+          this.enableLabelNum ? '弹出菜单'.repeat(this.labelNum / 2) : '弹出菜单',
+        )
+          .bindMenu(this.MyMenu)
+      }
+      .onDragStart(()=>{
+        ContextMenu.close()
+      })
+    }
+
+  @Builder
+  Parameters(){
+    Scroll() {
+      Column({ space: 8 }) {
+        RadioBlock({
+          title: '是否可用菜单',
+          isEnabled: this.enableAllowUse,
+          value: this.allowUse,
+          dataSource: [
+            { label: '允许', value: true },
+            { label: '禁止', value: false },
+          ]
+        })
+
+        RadioBlock({
+          title: '是否允许显示二级菜单',
+          isEnabled: this.ShowSecondaryMenu,
+          value: this.ShowSecondaryMenu,
+          dataSource: [
+            { label: '允许', value: true },
+            { label: '禁止', value: false },
+          ]
+        })
+
+        IconBlock({
+          title: '是否显示前缀图标',
+          isEnabled: this.enableStartIcon,
+          icon: this.startIcon,
+        })
+
+        IconBlock({
+          title: '是否显示后缀图标',
+          isEnabled: this.enableEndIcon,
+          icon: this.endIcon,
+        })
+
+      }.width('100%')
+    }.height('50%')
+  }
+}
+
+@Preview
+@Component
+struct BindMenuBootcampPreviewer {
+  build(){
+    BindMenuBootcamp({
+      title: '菜单/Menu'
+    })
+  }
+}

examples/components/entry/src/main/ets/pages/operates/index.ets

@@ -14,6 +14,8 @@
  */
 
 import { Route, RouteGroup } from '../../common/route';
+import { BindContextMenuBootcamp } from './BindContextMenuBootcamp';
+import { BindMenuBootcamp } from './BindMenuBootcamp';
 import { ButtonBootcamp } from './ButtonBootcamp';
 import { ChipBootcamp } from './ChipBootcamp';
 
@@ -22,6 +24,8 @@ export const operatesRoute: RouteGroup = {
   label: '操作类',
   children: [
     { name: 'button', label: '按钮/Button' },
+    { name: 'Menu', label: '菜单/Menu' },
+    { name: 'BindContextMenu', label: '上下文菜单/BindContextMenu' },
     { name: 'chip', label: '操作块/Chip' },
   ]
 };
@@ -30,6 +34,10 @@ export const operatesRoute: RouteGroup = {
 export function OperatesDestination(name: string, route: Route) {
   if (name === 'operates/button') {
     ButtonBootcamp({ title: route.label })
+  } else if (name === 'operates/Menu') {
+    BindMenuBootcamp({ title: route.label })
+  } else if (name === 'operates/BindContextMenu') {
+    BindContextMenuBootcamp({ title: route.label })
   } else if (name === 'operates/chip') {
     ChipBootcamp({ title: route.label })
   }