HarmonyOS Next应用开发——相应式布局之媒体查询

相应式布局之媒体查询

媒体查询作为相应式筹划的核心，在移动装备上应用非常广泛。媒体查询可根据不同装备类型或同装备不同状态修改应用的样式，常用于多屏幕的应用适配。媒体查询常用于下面两种场景：

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

媒体查询条件

符合媒体查询条件会触发屏幕的操作，好比在手机屏幕上布局如何表现，在平板屏幕上布局如何表现。
媒体查询条件由媒体类型、逻辑操作符、媒体特征构成，其中媒体类型可省略，逻辑操作符用于毗连不同媒体类型与媒体特征，其中，媒体特征要利用“()”包裹且可以有多个。
语法规则包罗媒体类型（media-type）、媒体逻辑操作（media-logic-operations）（常常省略）和媒体特征（media-feature）。

1. [media-type] [media-logic-operations] [(media-feature)]

复制代码

媒体类型（media-type）

查询条件未写媒体类型时，默认为screen。媒体类型必须写在查询条件开头。
类型阐明screen按屏幕相关参数举行媒体查询。 媒体特征（media-feature）

媒体特征包罗应用表现区域的宽高、装备分辨率以及装备的宽高等属性，详细阐明如下表。
比较height、width等宽高尺寸时，支持vp和px单位，无单位默认为px。
类型阐明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。深色模式为true，浅色模式为false。 例如

• screen and (round-screen: true) ：表现当装备屏幕是圆形时条件成立。
  
• (max-height: 800px) ：表现当高度小于等于800px时条件成立。
  
• (height <= 800px) ：表现当高度小于等于800px时条件成立。
  
• screen and (device-type: tv) or (resolution < 2) ：表现包罗多个媒体特征的多条件复杂语句查询，当装备类型为tv或装备分辨率小于2时条件成立。
  
• (dark-mode: true) ：表现当系统为深色模式时成立。
  

媒体查询监听

可以根据固定查询条件生成所对应的媒体查询监听，此监听不停在运行中，直到符合媒体查询条件，触发对应的操作。

1. private listener:mediaquery.MediaQueryListener=this.getUIContext().getMediaQuery().matchMediaSync('(800vp>width>320vp)')
2. this.listener.on('change',(result:mediaquery.MediaQueryResult)=>{ //绑定改变监听
3.      
4.    })

复制代码

案例

根据屏幕大小表现不同的背景颜色。

1. import { mediaquery } from '@kit.ArkUI';
3. @Entry
4. @Component
5. struct Mediapage {
6.   @State message: string = 'Hello World';
7.   // 屏幕尺寸在320到600
8.   private listener:mediaquery.MediaQueryListener=this.getUIContext().getMediaQuery().matchMediaSync('(600vp>width>320vp)')
9.   // 屏幕尺寸小于320
10.   private listener1:mediaquery.MediaQueryListener=this.getUIContext().getMediaQuery().matchMediaSync('(320vp>width)')
11.   // 屏幕尺寸大于600
12.   private listener2:mediaquery.MediaQueryListener=this.getUIContext().getMediaQuery().matchMediaSync('(width>600vp)')
13.   @State bakcolor:Color=Color.White
14.   aboutToAppear(): void { //所有监听绑定事件
15.    this.listener.on('change',(result:mediaquery.MediaQueryResult)=>{
16.       if(result.matches){
17.         this.bakcolor=Color.Yellow
18.       }
19.    })
20.    this.listener1.on('change',(result:mediaquery.MediaQueryResult)=>{
21.       if(result.matches){
22.         this.bakcolor=Color.Red
23.       }
24.    })
25.    this.listener2.on('change',(result:mediaquery.MediaQueryResult)=>{
26.       if(result.matches){
27.         this.bakcolor=Color.Green
28.       }
29.    })
30.   }
31.   aboutToDisappear(): void {//解绑监听
32.     this.listener.off("change")
33.     this.listener1.off("change")
34.     this.listener2.off("change")
35.   }
37.   build() {
38.     RelativeContainer() {
39.     }
40.     .backgroundColor(this.bakcolor)
41.     .height('100%')
42.     .width('100%')
43.   }
44. }

复制代码

运行效果

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。