1# ArkUI子系统变更说明
2
3## cl.arkui.1 Menu组件宽度设置效果变更，避让规则变更
4
5**访问级别**
6
7公开接口
8
9**变更原因**
10
11UX一致性需求变更
12
131、为开发者提供配置小于最小宽度后的视觉变化。
14
152、跟随点击位置菜单的交互效果变更。
16
173、为开发者提供左键菜单跨应用显示的属性，在不配置此属性时菜单会根据设备类型决定是否跨越应用显示。
18
19**变更影响**
20
21变更为兼容性变更
22
231、增加左键菜单可跨越应用显示的能力。
24
252、影响跟随点击位置菜单弹出的避让逻辑。
26
27**API Level**
28
2911
30
31**变更发生版本**
32
33从OpenHarmony SDK 4.1.3.5版本开始。
34
35**变更的接口/组件**
36
37涉及到菜单组件:
38
39- 变更前：
40
41  a) 用户定义菜单实际宽度小于64vp时，则设定为64vp。
42
43  b) 跟随点击位置弹出类型的菜单，如下方空间不足，向上翻转显示。
44
45  c) 跟随点击位置弹出类型的菜单，如果绑定子菜单，会贴近边缘显示。一级菜单带有边距margin，左右方向为12vp，上下方向为24vp。
46
47  d) 左键菜单能力为窗口内显示。
48
49- 变更后：
50
51  a) 用户定义菜单实际宽度小于64vp时，菜单宽度恢复为默认值2个columns。
52
53  b) 跟随点击位置弹出类型的菜单，如下方空间不足，则垂直方向向上平移，直到将菜单完整显示（菜单底部与边界按要求保留最小边距限制）。
54
55  c) 如果配置菜单在应用内弹出，左右方向的margin为16vp，上下侧默认规避状态栏与导航条,不额外增加避让距离；如果配置菜单在应用窗口外弹出，左右方向的margin为8vp，上下侧默认规避状态栏与Dock区域，不额外增加避让距离。如果绑定子菜单，margin与一级菜单一致。
56
57  <img src="figures/SubMenu.jpg" alt="isSubWindow" style="zoom:50%;" />
58
59  d) 左键菜单可通过showInSubWindow设定klv设置是否显示在窗口外。如果未进行设置，则按照设备类型自适应显示，klv设备为应用外显示，非klc设备为应用内显示。如果进行设置，klv设备设置为true时，菜单为应用外显示，设置为false时，菜单为应用内显示。
60
61  <img src="figures/SubWindow.png" alt="SubWindow"  />
62
63**适配指导**
64
65```
66/*左键菜单子窗口显示接口示例
67*(showInSubWindow?: boolean;)
68*条件: klv设备
69*参数:true 支持应用外子窗口显示
70*参数:false 支持应用内显示
71*/
72@Entry
73@Component
74struct Index {
75  @State select: boolean = true
76  private iconStr: ResourceStr = $r("app.media.view_list_filled")
77  private iconStr2: ResourceStr = $r("app.media.view_list_filled")
78
79  @Builder
80  SubMenu() {
81    Menu() {
82      MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
83      MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
84    }
85  }
86
87  @Builder
88  MyMenu(){
89    Menu() {
90      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
91      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
92        .enabled(false)
93      MenuItem({
94        startIcon: this.iconStr,
95        content: "菜单选项",
96        endIcon: $r("app.media.arrow_right_filled"),
97        builder: ():void=>this.SubMenu()
98      })
99      MenuItemGroup({ header: '小标题' }) {
100        MenuItem({ content: "菜单选项" })
101          .selectIcon(true)
102          .selected(this.select)
103          .onChange((selected) => {
104            console.info("menuItem select" + selected);
105            this.iconStr2 = $r("app.media.icon");
106          })
107        MenuItem({
108          startIcon: $r("app.media.view_list_filled"),
109          content: "菜单选项",
110          endIcon: $r("app.media.arrow_right_filled"),
111          builder: ():void=>this.SubMenu()
112        })
113      }
114      MenuItem({
115        startIcon: this.iconStr2,
116        content: "菜单选项",
117        endIcon: $r("app.media.arrow_right_filled")
118      })
119    }
120  }
121
122  build() {
123    Row() {
124      Column() {
125        Text('click to show menu')
126          .fontSize(50)
127          .fontWeight(FontWeight.Bold)
128      }
129      .bindMenu(this.MyMenu,{showInSubWindow:true})
130      .width('100%')
131    }
132    .height('100%')
133  }
134}
135
136```