HarmonyOs编写一个案例实现一个照片选择（阶段进阶 四种需求 逐一完善）

 需求1. .实现照片选择 并将选择好的照片展示出来

import { GoodItem } from '../06/modules';

@Entry
@Component
struct PhotoPage {
  @State message: string = '实现一个相册';
  @State List: GoodItem[] = [{

    goods_name: 'dsfjlsjkfsf',
    goods_price: 100,
    goods_img: 'https://img1.baidu.com/it/u=1535232938,2370569369&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
    goods_count: 1,
    id: 1

  },
    {

      goods_name: 'dfhlsdjflkdsjklfs 加速度的佛教山東i附件',
      goods_price: 200,
      goods_img: 'https://img1.baidu.com/it/u=2603934083,3021636721&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
      goods_count: 2,
      id: 2

    },
    {

      goods_name: '收到回复技术大会哦恶化日发方大化工iu而韩国佛热',
      goods_price: 300,
      goods_img: 'https://img0.baidu.com/it/u=4289818793,3552718550&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
      goods_count: 3,
      id: 3

    }
    , {

      goods_name: '的時間佛薩飛機埃里克森放假哦i二fore多氟多化工i額方法過後i額外人',
      goods_price: 400,
      goods_img: 'https://img0.baidu.com/it/u=2080725050,2021436341&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=800',
      goods_count: 4,
      id: 4

    }
    , {

      goods_name: '时间佛ID分机构IE',
      goods_price: 500,
      goods_img: 'https://img1.baidu.com/it/u=4202924242,2178453218&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
      goods_count: 5,
      id: 5

    }
    , {

      goods_name: '司法鉴定哦is叫哦私人',
      goods_price: 600,
      goods_img: 'https://10wallpaper.com/wallpaper/1680x1050/1405/Lavender_mountain_river-Landscape_HD_Wallpaper_1680x1050.jpg',
      goods_count: 6,
      id: 6

    }
  ]
  @State isShowPhotoCom: boolean = false
  @State maxSelectNum: number = 4
  @State showSelectImgs: GoodItem[] = []

  build() {
    Column() {
      Button('选择图片')
        .onClick(() => {
          this.isShowPhotoCom = true
        })
      Grid() {
        ForEach(this.showSelectImgs, (item: GoodItem, index) => {
          GridItem() {
            Image(item.goods_img)
              .aspectRatio(1)
          }

        })
      }
      .columnsTemplate('1fr 1fr')
      .columnsGap(4)
      .rowsGap(4)

      if (this.isShowPhotoCom) {
        photoCom({
          List: this.List,
          isShowPhotoCom: this.isShowPhotoCom,
          maxSelectNum: this.maxSelectNum,
          showSelectImgs: this.showSelectImgs

        })
      }
    }
    .height('100%')
    .width('100%')
  }
}


@Component
struct photoCom {
  @Prop List: GoodItem[] = []
  @Link isShowPhotoCom: boolean
  @State selectList: GoodItem[] = []
  @Prop maxSelectNum: number
  @Link showSelectImgs: GoodItem[]

  // 选择图片逻辑
  selectFn(item: GoodItem) {

    let Index = this.selectList.findIndex(obj => obj.id == item.id)
    console.log(JSON.stringify(Index))
    if (Index > -1) {
      this.selectList.splice(Index, 1)

    } else {
      this.selectList.push(item)
    }
  }

  build() {
    Column() {
      Grid() {
        ForEach(this.List, (item: GoodItem, index) => {
          GridItem() {
            Stack() {
              Image(item.goods_img)
                .aspectRatio(1)


              if (this.selectList.some(obj => obj.id == item.id)) {
                Image($r('app.media.select'))
                  .width(60)
                  .height(60)
                  .fillColor(Color.Red)
              }
            }
            .onClick(() => {
              this.selectFn(item)
            })

          }
        })
      }
      .columnsTemplate('1fr 1fr')
      .layoutWeight(1)

      // Text(`${}/${}`)

      Row() {
        Button('取消').onClick(() => {
          this.isShowPhotoCom = false
        })
        Text(`已选${this.selectList.length}张/最多选择${this.maxSelectNum}张`)

        Button('确认')
          .onClick(() => {
            this.showSelectImgs = this.selectList
            this.isShowPhotoCom = false

          })
      }
      .width('100%')
      .height(60)

      .justifyContent(FlexAlign.SpaceAround)
    }
    .position({ x: 0, y: 0 })
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
    .justifyContent(FlexAlign.SpaceBetween)

  }
}

这个案例用到了父子传参@Prop @Link   @State