使用预览器实现多端预览

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 
import { hilog } from '@kit.PerformanceAnalysisKit'; 
import { window } from '@kit.ArkUI'; 
import display from '@ohos.display' 
 
export default class EntryAbility extends UIAbility { 
 
  private windowObj?: window.Window 
  private curBp: string = '' 
  //... 
  // 根据当前窗口尺寸更新断点 
  private updateBreakpoint(windowWidth: number) :void{ 
    // 将长度的单位由px换算为vp 
    let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels 
    console.log('windowWidthVp = '+windowWidthVp) 
    let newBp: string = '' 
    if (windowWidthVp < 320) { 
      newBp = 'xs' 
    } else if (windowWidthVp < 600) { 
      newBp = 'sm' 
    } else if (windowWidthVp < 840) { 
      newBp = 'md' 
    } else { 
      newBp = 'lg' 
    } 
    if (this.curBp !== newBp) { 
      this.curBp = newBp 
      // 使用状态变量记录当前断点值 
      AppStorage.setOrCreate('currentBreakpoint', this.curBp) 
    } 
  } 
 
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); 
  } 
 
  onDestroy(): void { 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); 
  } 
 
  onWindowStageCreate(windowStage: window.WindowStage): void { 
    // Main window is created, set main page for this ability 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 
 
    windowStage.loadContent('pages/MediaQuerySample', (err, data) => { 
      if (err.code) { 
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); 
        return; 
      } 
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? ''); 
    }); 
 
    windowStage.getMainWindow().then((windowObj) => { 
      this.windowObj = windowObj 
      // 获取应用启动时的窗口尺寸 
      this.updateBreakpoint(windowObj.getWindowProperties().windowRect.width) 
      // 注册回调函数，监听窗口尺寸变化 
      windowObj.on('windowSizeChange', (windowSize)=>{ 
        this.updateBreakpoint(windowSize.width) 
      }) 
    }); 
  } 
 
  onWindowStageDestroy(): void { 
    // Main window is destroyed, release UI related resources 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); 
 
    try { 
      if (this.windowObj) { 
        this.windowObj.off('windowSizeChange') 
      } 
    } catch (err) { 
      console.log('show windowObj errMsg' + JSON.stringify(err)) 
    } 
  } 
 
  onForeground(): void { 
    // Ability has brought to foreground 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); 
  } 
 
  onBackground(): void { 
    // Ability has back to background 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); 
  } 
} 
// common/breakpointsystem.ets 
import mediaQuery from '@ohos.mediaquery' 
 
declare interface BreakPointTypeOption<T> { 
  xs?: T 
  sm?: T 
  md?: T 
  lg?: T 
  xl?: T 
  xxl?: T 
} 
 
export class BreakPointType<T> { 
  options: BreakPointTypeOption<T> 
 
  constructor(option: BreakPointTypeOption<T>) { 
    this.options = option 
  } 
 
  getValue(currentBreakPoint: string) { 
    if (currentBreakPoint === 'xs') { 
      return this.options.xs 
    } else if (currentBreakPoint === 'sm') { 
      return this.options.sm 
    } else if (currentBreakPoint === 'md') { 
      return this.options.md 
    } else if (currentBreakPoint === 'lg') { 
      return this.options.lg 
    } else if (currentBreakPoint === 'xl') { 
      return this.options.xl 
    } else if (currentBreakPoint === 'xxl') { 
      return this.options.xxl 
    } else { 
      return undefined 
    } 
  } 
} 
 
interface Breakpoint { 
  name: string 
  size: number 
  mediaQueryListener?: mediaQuery.MediaQueryListener 
} 
 
export class BreakpointSystem { 
  private currentBreakpoint: string = 'md' 
  private breakpoints: Breakpoint[] = [ 
    { name: 'xs', size: 0 }, { name: 'sm', size: 320 }, 
    { name: 'md', size: 600 }, { name: 'lg', size: 840 } 
  ] 
 
  private updateCurrentBreakpoint(breakpoint: string) { 
    if (this.currentBreakpoint !== breakpoint) { 
      this.currentBreakpoint = breakpoint 
      AppStorage.Set<string>('currentBreakpoint', this.currentBreakpoint) 
      console.log('on current breakpoint: ' + this.currentBreakpoint) 
    } 
  } 
 
  public register() { 
    this.breakpoints.forEach((breakpoint: Breakpoint, index) => { 
      let condition:string 
      if (index === this.breakpoints.length - 1) { 
        condition = '(' + breakpoint.size + 'vp<=width' + ')' 
      } else { 
        condition = '(' + breakpoint.size + 'vp<=width<' + this.breakpoints[index + 1].size + 'vp)' 
      } 
      console.log(condition) 
      breakpoint.mediaQueryListener = mediaQuery.matchMediaSync(condition) 
      breakpoint.mediaQueryListener.on('change', (mediaQueryResult) => { 
        if (mediaQueryResult.matches) { 
          this.updateCurrentBreakpoint(breakpoint.name) 
        } 
      }) 
    }) 
  } 
 
  public unregister() { 
    this.breakpoints.forEach((breakpoint: Breakpoint) => { 
      if(breakpoint.mediaQueryListener){ 
        breakpoint.mediaQueryListener.off('change') 
      } 
    }) 
  } 
} 
// MediaQuerySample.ets 
import { BreakpointSystem, BreakPointType } from './breakpointsystem' 
import { display } from '@kit.ArkUI'; 
 
@Entry 
@Component 
struct MediaQuerySample { 
  @StorageLink('currentBreakpoint') private currentBreakpoint: string = "md"; 
  @State private icon: Resource = $r('app.media.images2') 
  private breakpointSystem: BreakpointSystem = new BreakpointSystem() 
 
  aboutToAppear() { 
    this.breakpointSystem.register() 
  } 
 
  aboutToDisappear() { 
    this.breakpointSystem.unregister() 
  } 
  onPageShow(): void { 
    console.log('width='+JSON.stringify(display.getDefaultDisplaySync().width)) 
    console.log('height='+JSON.stringify(display.getDefaultDisplaySync().height)) 
    console.log('densityDPI='+JSON.stringify(display.getDefaultDisplaySync().densityDPI)) 
  } 
  build() { 
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 
      Image(new BreakPointType({sm:$r('app.media.images2'), md:$r('app.media.images3'), lg:$r('app.media.images4')}).getValue(this.currentBreakpoint)!) 
        .height(100) 
        .width(100) 
        .objectFit(ImageFit.Contain) 
 
      Text(this.currentBreakpoint) 
        .fontSize(24) 
        .margin(10) 
    } 
    .width('100%') 
    .height('100%') 
  } 
}
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.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.