/*
 * Copyright (C) 2024 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the 'License');
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an 'AS IS' BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { ImageKnifeComponent } from '@ohos/libraryimageknife';

@Entry
@Component
struct TestCommonImage {
  private data: Array<string> = []
  aboutToAppear(): void {
    for (let index = 0; index < 30; index++) {
      this.data.push(`https://img-blog.csdn.net/20140514114029140?${index}`)
    }
  }
  build() {
    Column() {
      WaterFlow() {
        ForEach(this.data,(item: string)=>{
          FlowItem() {
            Column(){
              ImageKnifeComponent({
                imageKnifeOption: {
                  loadSrc: item,
                  placeholderSrc: $r('app.media.loading'),
                  errorholderSrc: $r('app.media.failed'),
                  objectFit: ImageFit.Contain,
                  signature: 'aaa'
                }
              }).width('50%').height(200)
            }
          }.height(200)
          .backgroundColor('#95efd2')
        },(item: string) => item)
      }.columnsTemplate('1fr 1fr')
      .columnsGap(10)
      .rowsGap(5)
      .backgroundColor(0xFAEEE0)
      .width('100%').height('100%')
    }
  }
}