商城案例：

应用知识点：自定义组件、循环渲染、if/else判断、list列表

• 总体视图
• 总代码：分为两个代码页面：主页面和子页面：

主页面：（有@Entry）

import Header from './Shopping_exercise_header'
class list{
  name:string
  img:ResourceStr
  price:number
  discount:number

  constructor(name:string, img:ResourceStr, price:number,discount?:number) {
    this.name=name
    this.img=img
    this.price=price
    this.discount=discount
  }
}
@Extend(Text) function fancy(){
  .fontColor(Color.Red)
  .fontSize(16)
  .margin({top:10})
}
@Styles function test(){
  .margin({top:10})
}
@Entry
@Component
struct Shopping_exercise {
@State item:Array<list>=[
  new list('华为Mate60','/photo_shop/photo_1.png',6999,5999),
  new list('华为Book','/photo_shop/photo_2.png',13999),
  new list('WatchGT4','/photo_shop/photo_3.png',1438),
  new list('FreeBuds','/photo_shop/photo_4.png',1499),
  new list('Mate X5','/photo_shop/photo_5.png',12999),
  new list('WatchGT4','/photo_shop/photo_3.png',1438),
  new list('Mate X6','/photo_shop/photo_5.png',12999),
  new list('WatchGT5','/photo_shop/photo_3.png',1438)
]
  build() {
    Column(){
      Header({title:'商城列表'})
      List({space:10}){
          ForEach(this.item,(item:list)=>{
            ListItem(){
              listItem({list:item})
            }
          },(item:list)=>item.name)
        }.layoutWeight(1).height('100%')
    }.width('100%').height('100%')

  }
}

@Component
struct listItem {
  list:list
  build() {
    Row(){
      Image(this.list.img)
        .width('40%')
      Column(){
        Text(this.list.name)
          .fontWeight(FontWeight.Medium)
          .fontSize(20)
        if(this.list.discount){
          Text('原价: ￥'+this.list.price)
            .fontSize(16)
            .fontColor('#ff9ea3a5')
            .decoration({type:TextDecorationType.LineThrough})
            .test()
          Text('折扣价：￥'+this.list.discount)
            .fancy()
          Text('补贴：￥'+(this.list.price-this.list.discount))
            .fancy()
        }else {
          Text('￥'+this.list.price)
            .test()
            .fontSize(16).fontColor('#ff66a5e3')
        }

      }.height('90%')
    }
    .height('20%')
    .backgroundColor('#ff758798')
    .width('90%')
    .borderRadius(40)
    .margin({ left:20 })
  }
}

子页面：

@Component
export default  struct Shopex {
title:string
  build() {
    Row() {
      Image('/photo_shop/header_arrow.png')
        .width(30)
        .margin({right: 20,left:10})
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Medium)
      Blank()
      Image('/photo_shop/header_circle.png')
        .width(30)
        .margin({ right: 40 })
    }
    .alignItems(VerticalAlign.Top)
    .width('100%')
    .margin(20)
    .height('4%')
  }
}

• 代码解析：

1. 顶部设置：

1.1构建顶部样式：自定义组件应用

@Component
 struct Shopex {

//购建title
title:string
  build() {
    Row() {

//本地引入图片
      Image('/photo_shop/header_arrow.png')
        .width(30)
        .margin({right: 20,left:10})

//引入上面title内容
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Medium)

//内容自动填充
      Blank()
      Image('/photo_shop/header_circle.png')
        .width(30)
        .margin({ right: 40 })
    }
    .alignItems(VerticalAlign.Top)
    .width('100%')
    .margin(20)
    .height('4%')
  }
}

1.2创建顶部样式子页面

之后，填写文件名------->把代码粘贴到页面上，除@Entry外

1.3导出和引入子页面：本代码用第一种

导出：在struct前添加export：使页面对外开放；default：使变为默认化：可添加/可不添加：导入方式不一样

第一种

export default  struct Shopex {

第二种

export struct Shopex {

导入：在整个页面上面添加：

第一种

import Header from './Shopping_exercise_header'

//名字可以自定义

第二种

import {Shopex }from './Shopping_exercise_header'
//名字只能是子文件名

第三种：导出页面有以上两种

import  header，{Shopex } from './Shopping_exercise_header'

1. 用循环渲染foreach

   1. 创建函数类型

class list{
  name:string
  img:ResourceStr
  price:number
  discount:number

  constructor(name:string, img:ResourceStr, price:number,discount?:number) {
    this.name=name
    this.img=img
    this.price=price
    this.discount=discount
  }
}

1.1导入数据：在struct Shopping_exercise {内，build（）上

struct Shopping_exercise {
@State item:Array<list>=[
  new list('华为Mate60','/photo_shop/photo_1.png',6999,5999),
  new list('华为Book','/photo_shop/photo_2.png',13999),
  new list('WatchGT4','/photo_shop/photo_3.png',1438),
  new list('FreeBuds','/photo_shop/photo_4.png',1499),
  new list('Mate X5','/photo_shop/photo_5.png',12999),
  new list('WatchGT4','/photo_shop/photo_3.png',1438),
  new list('Mate X6','/photo_shop/photo_5.png',12999),
  new list('WatchGT5','/photo_shop/photo_3.png',1438)
]
  build() {

1. 2引入数组：以下是我创的自定义组件，布局样式

@Component
struct listItem {

//引入上面的list内容
  list:list
  build() {
    Row(){
      Image(this.list.img)
        .width('40%')
      Column(){
        Text(this.list.name)
          .fontWeight(FontWeight.Medium)
          .fontSize(20)
       Text('￥'+this.list.price)
            .fontSize(16)

.fontColor('#ff66a5e3')
      }.height('90%')
    }
    .height('20%')
    .backgroundColor('#ff758798')
    .width('90%')
    .borderRadius(40)
    .margin({ left:20 })
  }
}

3.利用ForEach循环数组

ForEach(this.item,(item:list)=>{
  ListItem(){

//引入自定义组价
    listItem({list:item})
  }
},(item:list)=>item.name)

• 用list使页面滚动

3.1首先设置布局

 build() {
    Column(){
      Header({title:'商城列表'})
      List(){
                      ListItem(){


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

  }
}

3.2导入数据

 

build() {
    Column(){
      Header({title:'商城列表'})
      List({space:10}){
          ForEach(this.item,(item:list)=>{
            ListItem(){
              listItem({list:item})
            }
          },(item:list)=>item.name)
        }    }.width('100%').height('100%')

  }
}

3.3设置样式，及layoutWeight权重

如没设置layoutWeight因上面顶部占了位置，布局会出现不全，

layoutWeight：是布局权重

解决方案：

build() {
    Column(){
      Header({title:'商城列表'})
      List({space:10}){
          ForEach(this.item,(item:list)=>{
            ListItem(){
              listItem({list:item})
            }
          },(item:list)=>item.name)
        }.layoutWeight(1).height('100%')//只有一个，就是占满整个页面，不算顶部
    }.width('100%').height('100%')

  }
}

1. 设置布局样式：利用@Entry，@styles

@Entry：是组件本身属性；只能全局：

引入 .函数名（）

 @styles：是通用属性；不可以有参数：

引入 .函数名（）

4.1本代码：全是全局变量

@Extend(Text) function fancy(){
  .fontColor(Color.Red)
  .fontSize(16)
  .margin({top:10})
}
@Styles function test(){
  .margin({top:10})
}





@Component
struct listItem {
  list:list
  build() {
    Row(){
      Image(this.list.img)
        .width('40%')
      Column(){
        Text(this.list.name)
          .fontWeight(FontWeight.Medium)
          .fontSize(20)
        if(this.list.discount){
          Text('原价: ￥'+this.list.price)
            .fontSize(16)
            .fontColor('#ff9ea3a5')
            .decoration({type:TextDecorationType.LineThrough})

//引入@styles
            .test()
          Text('折扣价：￥'+this.list.discount)
            .fancy()
          Text('补贴：￥'+(this.list.price-this.list.discount))

//引入@Entry
            .fancy()
        }else {
          Text('￥'+this.list.price)
            .test()
            .fontSize(16).fontColor('#ff66a5e3')
        }

      }.height('90%')
    }
    .height('20%')
    .backgroundColor('#ff758798')
    .width('90%')
    .borderRadius(40)
    .margin({ left:20 })
  }
}

本代码完成！！！！