• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import window from '@ohos.window'
17
18@Entry
19@Component
20struct BreakpointSample {
21  @State currentBreakpoint: string = 'sm'
22
23  private updateBreakpoint(windowWidth) {
24    if (windowWidth < 320) {
25      this.currentBreakpoint = 'xs'
26      return
27    }
28    if (windowWidth < 520) {
29      this.currentBreakpoint = 'sm'
30      return
31    }
32    if (windowWidth < 840) {
33      this.currentBreakpoint = 'md'
34      return
35    }
36    this.currentBreakpoint = 'lg'
37  }
38
39  aboutToAppear() {
40    let windowObj: window.Window = AppStorage.Get('windowObj')
41    windowObj.getProperties().then(windowProperties => {
42      this.updateBreakpoint(px2vp(windowProperties.windowRect.width))
43    })
44
45    windowObj.on('windowSizeChange', data => {
46      this.updateBreakpoint(px2vp(data.width))
47    })
48  }
49
50  aboutToDisappear() {
51    let windowObj: window.Window = AppStorage.Get('windowObj')
52    windowObj.off('windowSizeChange')
53  }
54
55  build() {
56    Column() {
57      Text(this.currentBreakpoint)
58        .fontSize(50)
59        .fontWeight(FontWeight.Medium)
60    }
61    .height('100%')
62    .width('100%')
63    .justifyContent(FlexAlign.Center)
64  }
65}