• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023 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 { WaterFlowDataSource } from '../common/bean/WaterFlowDataSource';
18import Logger from '../utils/Logger';
19import CommonConstants from '../common/constants/CommonConstants';
20
21@Entry
22@Component
23struct ImgWall {
24  @State minSize: number = 130
25  @State maxSize: number = 164
26  @State fontSize: number = 24
27  scroller: Scroller = new Scroller()
28  datasource: WaterFlowDataSource = new WaterFlowDataSource()
29  private itemWidthArray: number[] = []
30  private itemHeightArray: number[] = []
31
32  // 计算flow item宽/高
33  getSize() {
34    let ret = Math.floor(Math.random() * this.maxSize)
35    return (ret > this.minSize ? ret : this.minSize)
36  }
37
38  // 保存flow item宽/高
39  getItemSizeArray() {
40    for (let i = 0; i < 22; i++) {
41      this.itemWidthArray.push(this.getSize())
42      this.itemHeightArray.push(this.getSize())
43    }
44  }
45
46  aboutToAppear() {
47    this.getItemSizeArray()
48  }
49
50  build() {
51    Row() {
52      Column() {
53
54        // 顶部导航
55        Flex({ direction: FlexDirection.Row }) {
56
57          Row() {
58            Image($r('app.media.ic_back'))
59              .width(24)
60              .height(24)
61              .margin({ right: 16 })
62              .id('back_arrow_imgWall')
63
64          }
65          .width(30)
66          .height(30)
67          .onClick(() => {
68            router.back()
69          })
70
71          Text(CommonConstants.IMG_WALL_TITLE)
72            .fontSize(20)
73            .fontWeight(500)
74            .margin({ top: 5, left: 16 })
75
76        }
77        .margin({ top: 36, left: 24, bottom: 24 })
78        .width(360)
79
80        //瀑布流
81        Row({ space: 2 }) {
82          WaterFlow({ footer: () => {
83          }, scroller: this.scroller }) {
84            LazyForEach(this.datasource, (item: number) => {
85              FlowItem() {
86                Column() {
87                  Image('common/img/img_' + item + '.png')
88                    .objectFit(ImageFit.Fill)
89                    .width('100%')
90                    .borderRadius(24)
91                    .layoutWeight(1)
92                }
93              }
94              .width('100%')
95              .height(this.itemHeightArray[item])
96              .borderRadius(8)
97            }, (item: string) => item)
98          }
99          .id('WaterFlow')
100          .restoreId(7)
101          .columnsTemplate('1fr 1fr')
102          .itemConstraintSize({
103            minWidth: 0,
104            maxWidth: '100%',
105            minHeight: 0,
106            maxHeight: '100%'
107          })
108          .friction(0.6)
109          .columnsGap(10)
110          .rowsGap(12)
111          .onReachStart(() => {
112            Logger.info('onReachStart')
113          })
114          .onReachEnd(() => {
115            Logger.info('onReachEnd')
116          })
117          .width('100%')
118          .height('88%')
119          .layoutDirection(FlexDirection.Column)
120          .padding({ left: 10, right: 10 })
121        }
122        .id('WaterFlow_row')
123        .width(360)
124      }
125      .width('100%')
126    }
127    .height('100%')
128    .alignItems(VerticalAlign.Top)
129    .backgroundColor('#f1f3f5')
130  }
131}
132