• 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'
17
18@Entry
19@Component
20struct ConditionsLoopsSample {
21  @State iconArray: any [] = [
22    { image: $r('app.media.ic_public_home'), name: 'Home' },
23    { image: $r('app.media.ic_public_add'), name: 'Add' },
24    { image: $r('app.media.ic_public_app'), name: 'App' },
25    { image: $r('app.media.ic_public_albums'), name: 'Albums' }
26  ]
27  @State selectedIndex: number = 0
28
29  build() {
30    Column() {
31      NavigationBar({ title: '循环渲染' })
32      Flex({ direction: FlexDirection.Column }) {
33        Text(`${this.iconArray[this.selectedIndex].name}`)
34          .textAlign(TextAlign.Center)
35          .fontSize(30)
36          .width('100%')
37          .flexGrow(1)
38        Row() {
39          ForEach(this.iconArray, (item, index) => {
40            Column() {
41              Image(this.selectedIndex == index ? item.icon : item.image)
42                .width(25)
43                .height(25)
44              Text(item.name)
45                .fontSize(20)
46                .fontColor(this.selectedIndex == index ? '#00F' : '#000')
47            }
48            .width('25%')
49            .padding({ top: 9, bottom: 5 })
50            .height(60)
51            .backgroundColor(this.selectedIndex == index ? '#ddd' : '#fff')
52            .onClick(() => {
53              this.selectedIndex = index
54            })
55          })
56        }.width('100%')
57        .height('10%')
58      }
59      .flexGrow(1)
60    }
61    .height('100%')
62    .backgroundColor('#F1F3F5')
63    .padding({ left: '3%', right: '3%', bottom: '8%' })
64  }
65
66  pageTransition() {
67    PageTransitionEnter({ duration: 370, curve: Curve.Friction })
68      .slide(SlideEffect.Bottom)
69      .opacity(0.0)
70
71    PageTransitionExit({ duration: 370, curve: Curve.Friction })
72      .slide(SlideEffect.Bottom)
73      .opacity(0.0)
74  }
75}