42.HarmonyOS鸿蒙体系 App(ArkUI)实现横屏竖屏自顺应

 

HarmonyOS鸿蒙体系 App(ArkUI)实现横屏竖屏自顺应
媒体查询作为相应式计划的核心，在移动装备上应用非常广泛。媒体查询可根据差别装备范例或同装备差别状态修改应用的样式。媒体查询常用于下面两种场景：

• 针对装备和应用的属性信息（好比表现地区、深淡色、分辨率），计划出相匹配的结构。
  
• 当屏幕发生动态改变时（好比分屏、横竖屏切换），同步更新应用的页面结构。
  

引入和使用流程

媒体查询通过mediaquery模块接口，设置查询条件并绑定回调函数，在对应的条件的回调函数里更改页面结构大概实现业务逻辑，实现页面的相应式计划。具体步调如下：
起首导入媒体查询模块。

1. [/code] [list=1]
2. [*]import mediaquery from '@ohos.mediaquery';
3. [/list]通过matchMediaSync接口设置媒体查询条件，生存返回的条件监听句柄listener。比方监听横屏事故：
4. [code]

复制代码

• let listener = mediaquery.matchMediaSync('(orientation: landscape)');
  

给条件监听句柄listener绑定回调函数onPortrait，当listener检测装备状态变革时实行回调函数。在回调函数内，根据差别装备状态更改页面结构大概实现业务逻辑。

1. [/code] [list=1]
2. [*]onPortrait(mediaQueryResult) {
3. [*]if (mediaQueryResult.matches) {
4. [*]// do something here
5. [*]} else {
6. [*]// do something here
7. [*]}
8. [*]}
9. [*]
10. [*]listener.on('change', onPortrait);
11. [/list][size=4]媒体查询的条件[/size]
13. 媒体查询条件由媒体范例、逻辑使用符、媒体特性构成，此中媒体范例可省略，逻辑使用符用于毗连差别媒体范例与媒体特性，此中，媒体特性要使用“()”包裹且可以有多个。具体规则如下：
14. [size=3]语法规则[/size]
16. 语法规则包罗媒体范例（media-type）、媒体逻辑使用（media-logic-operations）和媒体特性（media-feature）。
17. [code]

复制代码

• [media-type] [media-logic-operations] [(media-feature)]
  

比方：

• screen and (round-screen: true) ：表现当装备屏幕是圆形时条件建立。
  
• (max-height: 800) ：表现当高度小于便是800vp时条件建立。
  
• (height <= 800) ：表现当高度小于便是800vp时条件建立。
  
• screen and (device-type: tv) or (resolution < 2) ：表现包罗多个媒体特性的多条件复杂语句查询，当装备范例为tv或装备分辨率小于2时条件建立。
  

媒体的范例（media-type）

  范例
  阐明
  screen
  按屏幕干系参数举行媒体查询。
媒体的逻辑使用（media-logic-operations）

媒体逻辑使用符：and、or、not、only用于构成复杂媒体查询，也可以通过comma（, ）将其组合起来，具体表明阐明如下表。
表1 媒体逻辑使用符  范例
  阐明
  and
  将多个媒体特性（Media Feature）以“与”的方式毗连成一个媒体查询，只有当全部媒体特性都为true，查询条件建立。别的，它还可以将媒体范例和媒体功能连合起来。比方：screen and (device-type: wearable) and (max-height: 600) 表现当装备范例是智能穿着且应用的最大高度小于便是600个像素单元时建立。
  or
  将多个媒体特性以“或”的方式毗连成一个媒体查询，如果存在结果为true的媒体特性，则查询条件建立。比方：screen and (max-height: 1000) or (round-screen: true) 表现当应用高度小于便是1000个像素单元大概装备屏幕是圆形时，条件建立。
  not
  取反媒体查询结果，媒体查询结果不建立时返回true，否则返回false。比方：not screen and (min-height: 50) and (max-height: 600) 表现当应用高度小于50个像素单元大概大于600个像素单元时建立。
使用not运算符时必须指定媒体范例。
  only
  当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的欣赏器上产生歧义的场景。一些较早版本的欣赏器对于同时包罗了媒体范例和媒体特性的语句会产生歧义，好比：screen and (min-height: 50)。老版本欣赏器会将这句话明确成screen，从而导致仅仅匹配到媒体范例（screen），就应用了指定样式，使用only可以很好地规避这种情况。
使用only时必须指定媒体范例。
  comma（, ）
  将多个媒体特性以“或”的方式毗连成一个媒体查询，如果存在结果为true的媒体特性，则查询条件建立。其结果等同于or运算符。比方：screen and (min-height: 1000), (round-screen: true) 表现当应用高度大于便是1000个像素单元大概装备屏幕是圆形时，条件建立。
媒体范围使用符包罗<=，>=，<，>，具体表明阐明如下表。
表2 媒体逻辑范围使用符  范例
  阐明
  <=
  小于便是，比方：screen and (height <= 50)。
  >=
  大于便是，比方：screen and (height >= 600)。
  <
  小于，比方：screen and (height < 50)。
  >
  大于，比方：screen and (height > 600)。
媒体特性（media-feature）

媒体特性包罗应用表现地区的宽高、装备分辨率以及装备的宽高等属性，具体阐明如下表。
表3 媒体特性阐明表  范例
  阐明
  height
  应用页面可绘制地区的高度。
  min-height
  应用页面可绘制地区的最小高度。
  max-height
  应用页面可绘制地区的最大高度。
  width
  应用页面可绘制地区的宽度。
  min-width
  应用页面可绘制地区的最小宽度。
  max-width
  应用页面可绘制地区的最大宽度。
  resolution
  装备的分辨率，支持dpi，dppx和dpcm单元。此中：
- dpi表现每英寸中物理像素个数，1dpi ≈ 0.39dpcm；
- dpcm表现每厘米上的物理像素个数，1dpcm ≈ 2.54dpi；
- dppx表现每个px中的物理像素数（此单元按96px = 1英寸为基准，与页面中的px单元盘算方式差别），1dppx = 96dpi。
  min-resolution
  装备的最小分辨率。
  max-resolution
  装备的最大分辨率。
  orientation
  屏幕的方向。
可选值：
- orientation: portrait（装备竖屏）；
- orientation: landscape（装备横屏）。
  device-height
  装备的高度。
  min-device-height
  装备的最小高度。
  max-device-height
  装备的最大高度。
  device-width
  装备的宽度。
  device-type
  装备的范例。
可选值：default、tablet。
  min-device-width
  装备的最小宽度。
  max-device-width
  装备的最大宽度。
  round-screen
  屏幕范例，圆形屏幕为true，非圆形屏幕为false。
  dark-mode
  体系为深色模式时为true，否则为false。
 
树模代码：

1. import mediaquery from '@ohos.mediaquery';
2. import window from '@ohos.window';
3. import common from '@ohos.app.ability.common';
5. let portraitFunc = null;
7. @Entry
8. @Component
9. struct MediaQueryExample {
10.   @State color: string = '#DB7093';
11.   @State text: string = '竖屏';
12.   // 当设备横屏时条件成立
13.   listener = mediaquery.matchMediaSync('(orientation: 横屏)');
15.   // 当满足媒体查询条件时，触发回调
16.   onPortrait(mediaQueryResult) {
17.     if (mediaQueryResult.matches) { // 若设备为横屏状态，更改相应的页面布局
18.       this.color = '#FFD700';
19.       this.text = '横屏';
20.     } else {
21.       this.color = '#DB7093';
22.       this.text = '竖屏';
23.     }
24.   }
26.   aboutToAppear() {
27.     // 绑定当前应用实例
28.     portraitFunc = this.onPortrait.bind(this);
29.     // 绑定回调函数
30.     this.listener.on('change', portraitFunc);
31.   }
33.   // 改变设备横竖屏状态函数
34.   private changeOrientation(isLandscape: boolean) {
35.     // 获取UIAbility实例的上下文信息
36.     let context = getContext(this) as common.UIAbilityContext;
37.     // 调用该接口手动改变设备横竖屏状态
38.     window.getLastWindow(context).then((lastWindow) => {
39.       lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT)
40.     });
41.   }
43.   build() {
44.     Column({ space: 50 }) {
45.       Text(this.text).fontSize(50).fontColor(this.color)
46.       Text('横屏').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange)
47.         .onClick(() => {
48.           this.changeOrientation(true);
49.         })
50.       Text('竖屏').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange)
51.         .onClick(() => {
52.           this.changeOrientation(false);
53.         })
54.     }
55.     .width('100%').height('100%')
56.   }
57. }

复制代码

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金