• 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 LoadingProgressSample {
22  @State color: Color = Color.Black
23  @State arr_color: MyDataSource = new MyDataSource()
24
25  private getRandomColor(): string{
26    let randomColor: string = '#';
27    let hexadecimal: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
28    while (randomColor.length < 7) {
29      randomColor += hexadecimal[Math.floor(Math.random() * (hexadecimal.length))]
30    }
31    return randomColor;
32  }
33
34  private aboutToAppear(): void{
35    for (let i = 0;i < 6; i++) {
36      this.arr_color.pushData(this.getRandomColor())
37    }
38  }
39
40  build() {
41    Column() {
42      NavigationBar({ title: 'LoadingProgress' })
43
44      // 上部分显示效果
45      Scroll() {
46        Column() {
47          LoadingProgress()
48            .color(this.color).margin({ top: '30%' })
49        }
50        .justifyContent(FlexAlign.Center)
51        .alignItems(HorizontalAlign.Center)
52        .width('100%')
53      }
54      .width('100%')
55      .height('40%')
56      .margin({ top: 20 })
57
58      // 下部分属性、属性值
59      Scroll() {
60        Column() {
61          Row({ space: FlexAlign.SpaceBetween }) {
62            Text('Color:')
63              .fontSize(16)
64              .fontColor('#182431')
65              .fontWeight(FontWeight.Medium)
66              .opacity(0.5)
67
68            Blank()
69
70            Button({ type: ButtonType.Circle, stateEffect: true }) {
71              Text('+').fontColor('#FFFFFF').fontSize(26).position({ x: 0, y: -4 })
72            }
73            .backgroundColor('#000000')
74            .width(22)
75            .height(22)
76            .onClick(() => {
77              this.arr_color.pushData(this.getRandomColor())
78            })
79          }
80          .alignItems(VerticalAlign.Center)
81          .width('100%')
82
83          Divider().strokeWidth(1).color('#F2F2F2').lineCap(LineCapStyle.Round).margin({ top: 8, bottom: 8 })
84
85          Flex({ justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap }) {
86            LazyForEach(this.arr_color, (item, index) => {
87              Column() {
88                Column() {
89                  Row() {
90                    Column() {
91                      Image($r('app.media.ic_public_cancel'))
92                    }
93                    .borderColor('#F2F2F2')
94                    .borderRadius(10)
95                    .backgroundColor('rgba(255,255,255,0.3)')
96                    .alignItems(HorizontalAlign.Center)
97                    .height(10)
98                    .width(10)
99                    .margin({ right: 2 })
100                    .padding(1)
101                    .onClick(() => {
102                      this.arr_color.addData(index, 1)
103                    })
104                  }
105                  .justifyContent(FlexAlign.End)
106                  .alignItems(VerticalAlign.Center)
107                  .backgroundColor(item)
108                  .width(42)
109                  .height(18)
110                  .borderRadius(50)
111                  .onClick(() => {
112                    this.color = item
113                  })
114                }
115                .borderWidth(1)
116                .borderColor(item)
117                .padding(1)
118                .borderRadius(50)
119                .margin({ right: 3, left: 3 })
120              }.margin({ bottom: 20 })
121            }, item => item.toString())
122          }
123        }
124        .width('100%')
125        .padding('3%')
126        .borderRadius(24)
127        .backgroundColor('#FFFFFF')
128      }
129      .width('100%')
130      .height('60%')
131      .margin({ top: 24 })
132    }
133    .width('100%')
134    .height('100%')
135    .padding({ left: '3%', right: '3%' })
136    .backgroundColor('#F1F3F5')
137  }
138
139  pageTransition() {
140    PageTransitionEnter({ duration: 370, curve: Curve.Friction })
141      .slide(SlideEffect.Bottom)
142      .opacity(0.0)
143
144    PageTransitionExit({ duration: 370, curve: Curve.Friction })
145      .slide(SlideEffect.Bottom)
146      .opacity(0.0)
147  }
148}