一多

一多开发

1
2
3
4
5
6
1一次开发，多个设备适配运行，不同设备看到不同布局方案
2一次开发，根据不同设备打包成不同hap
3
4// 用到技术
5媒体查询技术
6栅格系统，封装好组件，根据屏幕大小决定元素排列，底层也是媒体查询技术

响应式布局

1
2
3
4
5
1断点 // 用户放大缩小屏幕，如超过500vp横向排列
2
3媒体查询技术 // 检测设备大小、类型，决定元素排列, xs、sm(手机)、md、lg、xl、xxl
4
5栅格布局 // 在媒体查询基础上封装

媒体查询技术

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 1import mediaquery from '@ohos.mediaquery';
 2
 3@Entry
 4@Component
 5struct Page02_Media {
 6  @State message: string = 'Hello World';
 7  private listener = mediaquery.matchMediaSync('(orientation: landscape)')
 8  onPortrait = (mediaQueryResult: mediaquery.MediaQueryResult) => {
 9    if (mediaQueryResult.matches) {
10      console.log('横屏')
11      this.message = '横屏'
12    } else {
13      console.log('竖屏')
14      this.message = '竖屏'
15    }
16  }
17
18  // 给listener绑定函数
19  aboutToAppear(): void {
20    this.listener.on('change', this.onPortrait)
21  }
22
23  build() {
24    Column() {
25      Text('媒体查询')
26      Text(this.message)
27    }
28    .height('100%')
29    .width('100%')
30  }
31}

常量

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
## 1/**
 2 * 常量文件：页面常用值
 3 */
 4export class BasicConstants {
 5  static readonly FULL_WIDTH = '100%'
 6  static readonly FULL_HEIGHT = '100%'
 7  static readonly FONT_SIZE_SMALL = '14vp'
 8  static readonly FONT_SIZE_NORMAL = '16vp'
 9  static readonly FONT_SIZE_BIG = '20vp'
10  static readonly FONT_SIZE_LARGE = '30vp'
11}

屏幕尺寸

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 1import { BreakPointConstants } from '../constants/BreakPointConstants'
 2import { mediaquery } from '@kit.ArkUI'
 3
 4export class BreakPointSystem {
 5  // 当前屏幕尺寸, 保存到全局, currentBreakPoint作为key
 6  private currentBreakPoint: string = BreakPointConstants.BREAKPOINT_SM
 7  // 屏幕大小条件查询
 8  private smListener = mediaquery.matchMediaSync(BreakPointConstants.RANGE_SM)
 9  private mdListener = mediaquery.matchMediaSync(BreakPointConstants.RANGE_MD)
10  private lgListener = mediaquery.matchMediaSync(BreakPointConstants.RANGE_LG)
11
12  // 保存屏幕尺寸到应用状态
13  private updateCurrentBreakPoint(breakpoint: string) {
14    if (this.currentBreakPoint != breakpoint) {
15      this.currentBreakPoint = breakpoint
16    }
17    AppStorage.setOrCreate<string>(BreakPointConstants.CURRENT_BREAKPOINT, this.currentBreakPoint)
18  }
19
20  // 绑定不同监听器
21  private isBreakPointSM = (mediaQueryResult: mediaquery.MediaQueryResult) => {
22    if (mediaQueryResult.matches) {
23      // 保存sm单位
24      this.updateCurrentBreakPoint(BreakPointConstants.BREAKPOINT_SM)
25    }
26  }
27  private isBreakPointMD = (mediaQueryResult: mediaquery.MediaQueryResult) => {
28    if (mediaQueryResult.matches) {
29      // 保存md单位
30      this.updateCurrentBreakPoint(BreakPointConstants.BREAKPOINT_MD)
31    }
32  }
33  private isBreakPointLG = (mediaQueryResult: mediaquery.MediaQueryResult) => {
34    if (mediaQueryResult.matches) {
35      // 保存lg单位
36      this.updateCurrentBreakPoint(BreakPointConstants.BREAKPOINT_LG)
37    }
38  }
39
40  public register() {
41    this.smListener = mediaquery.matchMediaSync(BreakPointConstants.RANGE_SM)
42    this.mdListener = mediaquery.matchMediaSync(BreakPointConstants.RANGE_MD)
43    this.lgListener = mediaquery.matchMediaSync(BreakPointConstants.RANGE_LG)
44    this.smListener.on('change', this.isBreakPointSM)
45    this.mdListener.on('change', this.isBreakPointMD)
46    this.lgListener.on('change', this.isBreakPointLG)
47  }
48
49  public unregister() {
50    this.smListener.off('change', this.isBreakPointSM)
51    this.mdListener.off('change', this.isBreakPointMD)
52    this.lgListener.off('change', this.isBreakPointLG)
53  }
54}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 1import { BasicConstants } from '../constants/BasicConstants'
 2import { BreakPointSystem } from 'common'
 3import { BreakPointConstants } from 'common'
 4
 5@Entry
 6@Component
 7struct Index {
 8  @State message: string = 'Hello World';
 9  private breakPointSystem = new BreakPointSystem()
10  @StorageProp(BreakPointConstants.CURRENT_BREAKPOINT) currentBreakPoint: string = 'sm'
11
12  aboutToAppear(): void {
13    this.breakPointSystem.register()
14  }
15
16  aboutToDisappear(): void {
17    this.breakPointSystem.unregister()
18  }
19
20  build() {
21    Column() {
22      Text(this.message)
23      Text(`当前屏幕类型：${this.currentBreakPoint}`)
24    }
25    .height(BasicConstants.FULL_HEIGHT)
26    .width(BasicConstants.FULL_WIDTH)
27  }
28}

存储

1
1AppStorage.setOrCreate<string>(BreakPointConstants.CURRENT_BREAKPOINT, this.currentBreakPoint)

Copyright ©2010-2022 比特日记 All Rights Reserved.

Powered By 可尔物语

浙ICP备11005866号-12