鸿蒙购物车以及代码布局

鸿蒙文档中心

华为鸿蒙系统（HUAWEI HarmonyOS），是华为公司在2019年8月9日于东莞举行的华为开发者大会（HDC.2019）上正式发布的分布式操作系统。华为鸿蒙系统是一款全新的面向全场景的分布式操作系统，创造一个超级虚拟终端互联的世界，将人、设备、场景有机地联系在一起...

import router from '@ohos.router';
import { ShopCarEntity } from '../../entity/ShopCarEntity';
import LocDataModel from '../../viewmodel/LocDataModel';

@Entry
@Component
export default struct CarPage {
  @State carList:ShopCarEntity[]=LocDataModel.DEFAULT_SHOP_CART_LIST

  build() {
     Flex({direction:FlexDirection.Column}){
        //标题部分
        this.TitleBarComponent()
       //商品列表
       this.CarListCompoent()
       //底部
       this.BottomOptionsCompoent()
     }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.page_background'))
  }

  /**
   * 标题
   */
  @Builder TitleBarComponent(){
    Stack({alignContent:Alignment.End}){
      Text('购物车')
        .width('100%')
        .textAlign(TextAlign.Center)
        .fontColor(Color.White)
        .fontSize(16)
        .fontWeight(FontWeight.Bold)

      Text('删除已选')
        .borderWidth(1).
      borderColor(Color.White).
      borderRadius(12).
      fontColor(Color.White).
      fontSize(12).
      fontWeight(FontWeight.Bold)
        .padding({
          top:5,
          right:8,
          bottom:5,
          left:8
        })
        .textAlign(TextAlign.Center)
        .lineHeight(12)
        .margin({
          right:15
        })

    }.width('100%')
    .height('56vp')
    .backgroundColor('#ff0000')
  }
  /**
   * 商品列表
   */
  @Builder CarListCompoent(){
    Scroll(){
      Column(){
        if (this.carList.length<0){

        }else {
          this.EmptyComponent()
        }

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

  }
@Builder EmptyComponent(){
  Column(){
    Column(){

      Image($r('app.media.caca')).width(70).objectFit(ImageFit.Contain)
      Text('欢迎添加购物车!!!').fontColor(Color.Gray).fontSize(14).margin({
        top:5
      })

    }.justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }.width('100%')
  .height('100%')
  .justifyContent(FlexAlign.Center)
}
  /**
   * 底部操作
   *
   */
  @Builder BottomOptionsCompoent(){

  }
}

这个只是一个添加购物车的布局，把数据从详情页添加购物车里面去存数据，展示到购物车的页面。

上面所用的是弹性布局

弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。

容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。