HarmonyOS鸿蒙Next中Menu菜单如何旋转？

HarmonyOS鸿蒙Next中Menu菜单如何旋转？

点击旋转按钮后，布局旋转90°，再次点击菜单后，如何让菜单显示在红框位置

源代码：

import display from '@ohos.display'

@Entry
@Component
struct Index {
  @State rotateAngle: number = 0

  build() {
    RelativeContainer() {
      RelativeContainer() {
        Button('Menu').bindMenu(this.MenuBuilder())
          .alignRules({
            center: { anchor: '__container__', align: VerticalAlign.Center },
            middle: { anchor: '__container__', align: HorizontalAlign.Center }
          })
      }
      .width('100%')
      .height(150)
      .backgroundColor(Color.Blue)
      .rotate({
        angle: this.rotateAngle,
        centerX: px2vp(display.getDefaultDisplaySync().width) / 2,
        centerY: px2vp(display.getDefaultDisplaySync().width) / 2
      })

      Button('旋转')
        .onClick(() => {
          this.rotateAngle = this.rotateAngle === 90 ? 0 : 90
        })
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
  }

  @Builder
  MenuBuilder() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      List() {
        ListItem() {
          Column() {
            Text('Options')
            Divider().strokeWidth(2).margin(5).color('#F0F0F0')
          }
        }

        ListItem() {
          Column() {
            Text('Options')
            Divider().strokeWidth(2).margin(5).color('#F0F0F0')
          }
        }

        ListItem() {
          Column() {
            Text('Options')
            Divider().strokeWidth(2).margin(5).color('#F0F0F0')
          }
        }
      }
      .scrollBar(BarState.Off)
      .width(100)
      .height(100)
    }
    .rotate({
      angle: this.rotateAngle,
    })
  }
}

更多关于HarmonyOS鸿蒙Next中Menu菜单如何旋转？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

使用bindMenu方式实现不了。只能使用自定义弹窗的方式实现。

在点击事件回调内获取到控件的偏移值来决定弹框的位置，在弹框的onAppear回调进行旋转操作

更多关于HarmonyOS鸿蒙Next中Menu菜单如何旋转？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


当前使用bindMenu方式不太好实现，因为点击mean，此时是获得焦点状态，菜单栏会显示，再点击旋转按钮，就会失焦，菜单自动会隐藏。

看bindMenu api，当时支持isShown参数，但是当前支持还不太友好，直接写死属性值，会导致菜单显示有问题。所以当前这种方式不太好处理

控件位置变化之后，原来绑定在控件上的弹窗都不好使了。

位置改变之后，绑定的菜单不好使了吗？我用你给的示例代码，是ok的，旋转之后，再点击都是菜单，绑定的弹窗是可以正常弹得，如果设置isShown参数后，绑定的弹窗确实会有问题。

我对菜单里面的内容做了个旋转操作，但是其实菜单弹出的位置是不对的，

在HarmonyOS鸿蒙Next中，Menu菜单的旋转可以通过使用ComponentContainer的rotate属性来实现。ComponentContainer是鸿蒙系统中用于管理子组件的容器，通过设置rotate属性，可以控制组件的旋转角度。例如，可以通过在ComponentContainer的onAppear生命周期回调中，使用this.rotate({ x: 0, y: 0, z: 1, angle: 90 })来将菜单旋转90度。旋转的中心点、轴和角度都可以通过参数进行自定义。此方法适用于需要在UI中动态调整组件方向的场景。

在HarmonyOS鸿蒙Next中，Menu菜单的旋转可以通过以下步骤实现：

  1. 设置旋转属性：在XML布局文件中，为Menu组件添加rotation属性，设置旋转角度。例如：

    <Menu
    android:id="@+id/menu"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:rotation="90" />

  2. 动态旋转：在Java或Kotlin代码中，使用setRotation()方法动态设置旋转角度。例如：

    Menu menu = findViewById(R.id.menu);
menu.setRotation(45);

  3. 动画效果：使用ObjectAnimator实现平滑旋转动画。例如：

    ObjectAnimator.ofFloat(menu, "rotation", 0, 360).setDuration(1000).start();

通过这些方法，可以灵活控制Menu菜单的旋转效果。

回到顶部