46、鸿蒙/布局/App购物车案例

• 思路：
  首先做上下布局，使用弹性盒设置direction为FlexDirection.Column变成列布局，商品列表里面使用列布局嵌套行布局，底部操作使用行布局嵌套列布局，效果和案例如下：

案例

@Component
export struct ShopCart {
  // 价格
  @State price: number = 14.1;
  // 数量
  @State total: number = 1;
  build() {
    Flex({
      // 列布局
      direction: FlexDirection.Column
    }){
      //
      Row(){
        Column(){
          Row(){
            Image($r('app.media.background')).width(60).height(60)
              .borderRadius(5)
            Column({space: 2}){
              Text('某某鸡米饭某某鸡米饭某某鸡米饭').textAlign(TextAlign.Start).width('100%')
                .textOverflow({
                  overflow: TextOverflow.Ellipsis
                }).maxLines(2)
              Text(){
                Span('价格：')
                Span(this.price.toFixed(2)).fontSize(16).fontColor('#ff4949').fontWeight(600)
              }.width('100%')
            }.layoutWeight(1).padding({
              left: 10,
              right: 10
            })
            //
            Row({space: 8}){
              Text('-').border({
                width: 1,
                style: BorderStyle.Solid,
                color: Color.Gray
              }).padding(8).onClick(e=>{
                if(this.total <= 0){return}
                this.total --
              })
              Text(this.total.toString())
              Text('+').border({
                width: 1,
                style: BorderStyle.Solid,
                color: Color.Gray
              }).padding(8).onClick(e=>{
                this.total++
              })
            }.alignItems(VerticalAlign.Center)
            .justifyContent(FlexAlign.Center)
            }.height(80).backgroundColor(Color.White).padding(16)
            .border({
              width: {
                bottom: 1
              },
              color: '#e1e1e1'
            });
        }
      }.flexGrow(1).width('100%')
      .alignItems(VerticalAlign.Top)

      // 底部区域
      Row(){
        //
        Blank();
        //
        Column({
          space: 5
        }){
          Text(){
            Span('现价：')
            Span((this.price * this.total).toFixed(2) ).fontSize(16).fontColor('#ff4949').fontWeight(600)
          }
          Text(){
            Span('优惠：')
            Span('10.00').fontColor('#ff4949').fontWeight(600).fontStyle(FontStyle.Italic)
              .decoration({
                type: TextDecorationType.LineThrough
              })
          }
        }.padding({
          right: 16
        })
        //
        Button('立即结算').backgroundColor('#ffc402')
          .fontColor(Color.White)

      }.height(80).width('100%')
      .padding(16).border({
        width: {
          top: 1
        },
        color: '#e1e1e1'
      });
    }
  }
}