学习鸿蒙第二课

1.鸿蒙系统的网格布局

Column()函数代表每一列 spaces属性代表每一列的间距

Row() 函数代表每一行 spaces属性代表每一行的间距

列函数中可以嵌套使用行函数

2. forEach函数

forEach函数可以循环每一行

语法：

forEach(
	Array, //传进来的数组
	(item:Iterm,index)=>{
		
	} //循环的每一项Iterm
)

3. List组件

解决列表组件超出屏幕不可滑动的问题

重要属性：.layoutWeight(1) // 1代表拿屏幕剩余的高度，0代表平分宽度

ListIterm代表列表的每一项，必须包含一个根元素

// 创建一个class类
class iterm {
  name:string

  image:ResourceStr

  price:string

  changeGril?:boolean
  constructor(name,image,price,changeGril) {
    this.name = name
    this.image = image
    this.price = price
    this.changeGril = changeGril
  }

}
@Entry
@Component
struct Index {

  private imgaeGrilList:Array<iterm> = [
    new iterm('美女姐姐1',$r('app.media.icon'),'1299',true),
    new iterm('美女姐姐2',$r('app.media.icon'),'1299',false),
    new iterm('美女姐姐3',$r('app.media.gril2'),'1299',false),
    new iterm('美女姐姐4',$r('app.media.girl'),'1299',false),
    new iterm('美女姐姐4',$r('app.media.girl'),'1299',false),
    new iterm('美女姐姐4',$r('app.media.girl'),'1299',false),
    new iterm('美女姐姐4',$r('app.media.girl'),'1299',false),
    new iterm('美女姐姐4',$r('app.media.girl'),'1299',false),
    new iterm('美女姐姐4',$r('app.media.girl'),'1299',false),
    new iterm('美女姐姐4',$r('app.media.girl'),'1299',false),
    new iterm('美女姐姐4',$r('app.media.girl'),'1299',false),
    new iterm('美女姐姐4',$r('app.media.girl'),'1299',false),
  ]



  build() {
    Column({space:8}) {
      Row(){
        Text('美女列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .height(30)
      .justifyContent(FlexAlign.Start)
      // .backgroundColor('#f7f7')
      .width('100%')
      List({space:10}){
          ForEach(
            this.imgaeGrilList,
            (iterm:iterm)=>{
              ListItem(){
                Row(){
                  Image(iterm.image)
                    .width(120)
                    .height(120)
                      // 消除锯齿效果
                    .interpolation(ImageInterpolation.High)
                  Column({space:4}){
                    if(iterm.changeGril){
                      Text(iterm.name)
                        .fontWeight(FontWeight.Bold)
                        .fontSize(20)
                    }else{
                      Text(iterm.name)
                        .fontWeight(FontWeight.Bold)
                        .fontSize(20)
                      Text(iterm.price)
                        .fontWeight(FontWeight.Bold)
                        .fontSize(20)
                    }

                  }
                  .height(100)
                  .margin(10)
                  .alignItems(HorizontalAlign.Start)
                }
                .width('100%')
                .backgroundColor('#f6f6f6')
                .padding(10)
                .borderRadius(10)
              }

            }
          )
      }
        .width('100%')
        .layoutWeight(1)

    }

    .width('100%')
    .padding({top:10,right:20,bottom:0,left:20})
    // .height('100%')
  }
}