• 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 router from '@ohos.router'
17import mediaQuery from '@ohos.mediaquery'
18import { INFODATA } from '../mock/InfoData'
19
20@Entry
21@Component
22struct Index {
23  @State flag: number = -1
24  @State info: string = ''
25  @State isLand: boolean = false
26  private listener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync('screen and (min-aspect-ratio: 1.5) or (orientation: landscape)')
27
28  build() {
29    Row() {
30      Column() {
31        Row() {
32          Text($r('app.string.entry_MainAbility'))
33            .fontSize(30)
34            .fontColor('#182431')
35            .fontWeight(FontWeight.Medium)
36
37          Blank()
38        }
39        .height(56)
40        .width('90%')
41        .padding({ top: 10, left: 8, bottom: 4 })
42        .margin({ top: 56, left: 2, bottom: 4 })
43
44        Column() {
45          ForEach(INFODATA, (item, index) => {
46            Column() {
47              if (index !== 0) {
48                Divider()
49                  .height(0.8)
50                  .width('100%')
51                  .color('#33182431')
52                  .padding({ left: 24, right: 28 })
53              }
54              Row() {
55                Image(item.image)
56                  .width(24)
57                  .height(20)
58                  .margin({ left: 8, right: 16 })
59                  .objectFit(ImageFit.Contain)
60
61                Text(item.name)
62                  .fontSize(16)
63
64                Blank()
65                  .width('30%')
66
67                Text(item.value)
68                  .fontSize(14)
69                  .fontColor('#182431')
70                  .margin({ right: 4 })
71
72                Image($r('app.media.right'))
73                  .width(16)
74                  .height(18)
75                  .objectFit(ImageFit.Contain)
76              }
77              .width('100%')
78              .height(56)
79              .borderRadius(24)
80              .padding({ left: 24, right: 24 })
81              .onClick(() => {
82                this.info = item.info
83                this.flag = item.index
84                if (!this.isLand) {
85                  router.push({
86                    url: item.uri,
87                    params: {
88                      bool: true
89                    }
90                  })
91                }
92              })
93            }
94          }, item => JSON.stringify(item))
95        }
96        .width('90%')
97        .borderRadius(24)
98        .margin({ top: '2%' })
99        .backgroundColor(Color.White)
100        .padding({ top: 4, bottom: 4 })
101      }
102      .height('100%')
103      .width(this.isLand ? '40%' : '100%')
104
105      if (this.isLand) {
106        Divider()
107          .vertical(true)
108          .strokeWidth(0.8)
109          .color('#33182431')
110      }
111
112      if (this.isLand) {
113        Column() {
114          if (this.flag === 0) { // 选择Wlan页面
115            this.Component(this.info)
116          } else if (this.flag === 1) { // 选择蓝牙页面
117            this.Component(this.info)
118          } else if (this.flag === 2) { // 选择移动数据页面
119            this.Component(this.info)
120          }
121        }
122      }
123    }
124    .width('100%')
125    .height('100%')
126    .backgroundColor('#fff6f6f6')
127  }
128
129  // 拉起WindowExtAbility
130  @Builder Component(info: string) {
131    AbilityComponent({
132      abilityName: info,
133      bundleName: 'ohos.samples.windowextability'
134    })
135      .width(767)
136      .height(805)
137  }
138
139  onPortrait(mediaQueryResult) {
140    this.isLand = mediaQueryResult.matches
141  }
142
143  aboutToAppear() {
144    this.listener.on('change', this.onPortrait.bind(this))
145  }
146}