• 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 { NavigationBar } from '../../../common/components/navigationBar'
17import { MyDataSource } from '../../../model/constant'
18
19@Entry
20@Component
21struct ConditionalRenderingSample {
22  @State dataArray: MyDataSource = new MyDataSource()
23  @State showList: boolean = false
24
25  build() {
26    Column() {
27      NavigationBar({ title: '条件渲染' })
28      Column() {
29        Row() {
30          Image($r('app.media.ic_public_shuffle'))
31            .height(28)
32            .width(28)
33            .margin({ right: 24 })
34            .objectFit(ImageFit.Contain)
35            .onClick(() => {
36              this.showList = !this.showList
37            })
38        }
39        .width('100%')
40
41        Column() {
42          if (this.showList) {
43            List({ space: 12 }) {
44              LazyForEach(this.dataArray, (item) => {
45                ListItem() {
46                  Row() {
47                    Image(item.image)
48                      .objectFit(ImageFit.Contain)
49                      .width('15%')
50                      .margin({ top: 10, right: '7%', bottom: 10 })
51                      .borderRadius('50%')
52                    Text(item.name)
53                      .textAlign(TextAlign.Center)
54                      .fontSize(20)
55                      .fontColor('#000')
56                      .width('80%')
57                      .height(30)
58                      .margin({ top: 5 })
59                      .backgroundColor('#ccc')
60                  }
61                }
62                .borderRadius(24)
63                .padding({ left: '3.6%', right: '5.4%', top: 12, bottom: 12 })
64                .backgroundColor('#ffffff')
65              }, item => (item.image, item.name))
66            }
67            .width('100%')
68            .height('100%')
69          } else {
70            Grid() {
71              LazyForEach(this.dataArray, (item) => {
72                GridItem() {
73                  Column() {
74                    Image(item.image)
75                      .objectFit(ImageFit.Contain)
76                      .width('70%')
77                      .height(70)
78                    Text(item.name)
79                      .textAlign(TextAlign.Center)
80                      .width('100%')
81                      .height(25)
82                      .backgroundColor('#F1F3F5')
83                      .fontSize('14fp')
84                      .margin({ top: 12, bottom: 12 })
85                      .backgroundColor('#ccc')
86                  }
87                }
88                .padding({ left: 10, right: 10 })
89                .height('20%')
90                .width('100%')
91              })
92            }
93            .columnsTemplate('1fr 1fr 1fr')
94            .columnsGap(8)
95            .rowsGap(8)
96            .padding({ left: 10, right: 10 })
97          }
98        }
99        .width('100%')
100      }
101      .height('90%')
102      .backgroundColor('#F1F3F5')
103      .padding({ left: '3%', right: '3%', bottom: 10 })
104
105    }
106  }
107
108  pageTransition() {
109    PageTransitionEnter({ duration: 370, curve: Curve.Friction })
110      .slide(SlideEffect.Bottom)
111      .opacity(0.0)
112
113    PageTransitionExit({ duration: 370, curve: Curve.Friction })
114      .slide(SlideEffect.Bottom)
115      .opacity(0.0)
116  }
117
118   aboutToAppear() {
119    for (let index = 0; index < 15; index++) {
120      this.dataArray.pushData({
121        image: $r('app.media.ic_public_play_norm'),
122        name: index.toString()
123      })
124    }
125  }
126}
127