女装，男装，电脑办公等页面的设计实现

一 女装页面设计

首先我使用了三个之前使用过的组件，tabs页签实现上装，下装等分类，swiper轮播图实现展示界面，以及grid实现品牌的分类。

实现效果如上。

具体代码如下;

 @Builder BuildTabContent(index : number, istabcontent : boolean) {
    Grid() {
      ForEach(mainViewModel.getWomanPageData(index), (item: ItemData) => {
        GridItem() {
          Column() {
            Image(item.img)
              .width($r('app.float.small_img_5wh'))
              .height(istabcontent ? $r('app.float.small_img_8hg') : $r('app.float.small_img_3hg'))
            Text(item.title)
              .fontSize($r('app.float.little_text_size'))
              .margin({ top: $r('app.float.home_homeCell_margin') })
          }.backgroundColor(istabcontent ? null : Color.White)
        }
      }, (item: ItemData) => JSON.stringify(item))
    }
    .columnsTemplate('1fr 1fr 1fr 1fr')
    .rowsTemplate('1fr 1fr')
    .columnsGap($r('app.float.home_grid_columnsGap'))
    .rowsGap($r('app.float.home_grid_columnsGap'))
    .padding({ bottom: $r('app.float.home_grid_padding') })
    .height(istabcontent ? $r('app.float.tab_250hg') : $r('app.float.tab_180hg'))
    .backgroundColor(istabcontent ? Color.White : null)
    .borderRadius($r('app.float.home_grid_borderRadius'))
  }

  /*装饰器 - 展示轮播图*/
  @Builder BuildSwiper() {
    Swiper(this.swiperController) {
      ForEach(mainViewModel.getWomanPagesSwiperImages(), (img: Resource) => {
        Image(img)
          .height('200vp')
          .width(CommonConstants.FULL_PARENT)
          .borderRadius($r('app.float.home_swiper_borderRadius'))
      }, (img: Resource) => JSON.stringify(img.id))
    }
    .margin({ top: $r('app.float.home_swiper_margin') })
    .autoPlay(false)
  }

  build() {
    Scroll() {
      Column({ space: CommonConstants.COMMON_SPACE }) {
        /*轮播图*/
        this.BuildSwiper()
        /*精选分类*/
        Tabs({ barPosition: BarPosition.Start, controller: this.tabsController }) {
          /*精选分类 tab*/
          TabContent(){
            this.BuildTabContent(0, true)
          }.tabBar(CommonConstants.Category_TITLE1)
          /*上装 tab*/
          TabContent(){
            this.BuildTabContent(1, true)
          }.tabBar(CommonConstants.Category_TITLE2)
          /*下装 tab*/
          TabContent(){
            this.BuildTabContent(2, true)
          }.tabBar(CommonConstants.Category_TITLE3)
        }.height('300vp')
        .padding({ left: $r('app.float.home_list_padding'), right: $r('app.float.home_list_padding') })
        /*块状品牌*/
        LogoDisplay()
        Blank();
        Blank();
      }
    }
  }
}

/*自定义组件-show Gird Logo Info*/
@Component
struct LogoDisplay {
  build(){
    Grid() {
      ForEach(mainViewModel.getWomanBrandData(), (item: ItemData) => {
        GridItem() {
          Column() {
            Image(item.img)
              .width($r('app.float.small_img_5wh'))
              .height($r('app.float.small_img_3hg'))
            Text(item.title)
              .fontSize($r('app.float.little_text_size'))
              .margin({ top: $r('app.float.home_homeCell_margin') })
          }
        }
        .backgroundColor(Color.White)
      }, (item: ItemData) => JSON.stringify(item))
    }
    .columnsTemplate('1fr 1fr 1fr 1fr')
    .rowsTemplate('1fr 1fr')
    .columnsGap($r('app.float.home_grid_columnsGap'))
    .rowsGap($r('app.float.home_grid_rowGap'))
    .padding({
      left: $r('app.float.home_grid_padding'),
      right: $r('app.float.home_grid_padding'),
      bottom: $r('app.float.home_grid_padding')
    })
    .height($r('app.float.tab_180hg'))
    .borderRadius($r('app.float.home_grid_borderRadius'))
  }
}

二 男装页面设计、

男装界面呢就比较简单了，只运用了一个瀑布流waterflow的组件，实现男装的商品浏览，通过不同的图片大小，将不同的内容自上而下，像瀑布一样紧密的布局，实现错落有致的浏览效果，一提到瀑布流呢，我们就不由得提起另外两个组件，waterflowdatasource实现iddatasource接口，以及flowitem用来具体展示设置waterflow的具体样式。

具体的代码实现呢，在数据的处理上我运用了一个dataarray数组，数组里面的参数是itemdata，通过调用无参的构造函数constructor，使用for循环得到本地数据，将数据push到数组里面，在new瀑布流的时候就可以给array赋值。基本上就算实现了数据的准备。

build() {
    /*瀑布流-商品卡片浏览*/
    WaterFlow({ footer: this.itemFoot.bind(this)}) {
      LazyForEach(this.datasource, (item: ItemData, index : number) => {
        FlowItem() {
          Column() {
            Image(item.img)
              .objectFit(ImageFit.Contain)
            Row(){
              Text('¥'+item.cardPrice)
                .fontColor($r('app.color.red'))
                .height($r('app.float.card_16hg'))
              Text(item.title)
                .fontSize($r('app.float.input_margin_top'))
                .height($r('app.float.card_16hg'))
            }
          }
        }
        .borderRadius($r('app.float.home_swiper_borderRadius'))
        .padding({ bottom: $r('app.float.home_swiper_borderRadius') })
        // .width(this.itemWidthArray[index])//宽度保持不变
        .height(this.itemHeightArray[index])
        .backgroundColor($r('app.color.white'))
        .onClick(()=>{
          router.pushUrl({ url: 'pages/components/CardDetailPage', params: { cardId : item.others } })
        })
      }, item => item)
    }
    .columnsTemplate("1fr 1fr")
    .itemConstraintSize({
      minWidth: 0,
      maxWidth: '100%',
      minHeight: 0,
      maxHeight: '100%'
    })
    .columnsGap(10)
    .rowsGap(5)
    .onReachEnd(() => {
      AlertDialog.show({
        title: "弹窗",
        message: "不好意思，到底了",
        confirm: { value: "", action: () => {}, }
      })
    })
    .padding({ left: $r('app.float.home_list_padding'), bottom: $r('app.float.home_swiper_borderRadius') })
    .width('100%')
    .height(CommonConstants.FULL_PARENT)
    .layoutDirection(FlexDirection.Column)
  }
}

实现效果如下：

三 电脑办公部分设计

电脑办公这边就比较简洁了，我只做了一个纵向list容器来实现笔记本电脑，蓝牙耳机等商品的显示，设置一下滑动，大小，图片圆角，颜色等属性，还有纵向排列以及滑动到边缘无效果，代码和效果图如下：

struct ListCardDisplay {
  private tecCardInfo : Array<SimpleCardInfo> = []
  build() {
    List({ space: 20, initialIndex: 0 }) {
      ForEach(this.tecCardInfo, (cardInfo: SimpleCardInfo) => {
        ListItem() {
          Column() {
            Image(cardInfo.image)
              .objectFit(ImageFit.Cover)
              .borderRadius($r('app.float.home_swiper_borderRadius'))
          }
        }
      }, (cardInfo: SimpleCardInfo) => JSON.stringify(cardInfo))
    }
    .listDirection(Axis.Vertical) // 排列方向
    .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
    .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
    .padding({
      top: $r('app.float.home_list_padding'),
      left: $r('app.float.home_list_padding'),
      right: $r('app.float.home_list_padding')
    })
    .width(CommonConstants.FULL_PARENT)
    .height(CommonConstants.FULL_PARENT)
  }
}