HarmonyOS 鸿蒙Next ArkUI入门训练营—健康生活实战邮印象ArkUI版

HarmonyOS 鸿蒙Next ArkUI入门训练营—健康生活实战邮印象ArkUI版 #HarmonyOS ArkUI入门训练营—健康生活实战#邮印象ArkUI版

一、背景

1、项目简介

邮印象是一个为用户提供照片冲印、相册、照片书、同学录、文化衫、马克杯、个性邮册等几十款产品个性化定制服务的C2B平台,是一个基于传统函件特有产品及寄递优势，利用互联网手段，满足用户通过实物介质实现情感纪念与传递的线上平台。

2、程序介绍

邮印象ArkUI版是基于邮印象项目，使用HarmonyOS ArkUI开发的HarmonyOS应用程序。在学习了《HarmonyOS ArkUI入门训练营之健康生活实战》后，结合邮印象本身的个性化定制功能进行ArkUI的开发。目前版本的功能还比较初步，后续有机会会继续完善开发。

二、功能

1、启动动画页面

启动动画页面

核心代码：

Shape() {
    Path()
      .commands(this.leftPath)
      .fill('none')
      .linearGradient({ angle: 90, colors: [['#fd0c20', 0], ['#ffffff', 1]] })
      .clip(new Path().commands(this.leftPath))

    Path()
      .commands(this.leftBottomPath)
      .fill('none')
      .linearGradient({ angle: 50, colors: [['#8d0c20', 0.1], ['#fd0c20', 0.4], ['#ffffff', 0.7]] })
      .clip(new Path().commands(this.leftBottomPath))
  }
  .height(210)
  .width(210)
  .scale({ x: this.scaleValue, y: this.scaleValue })
  .opacity(this.opacityValue)
  .onAppear(() => {
    animateTo({
      duration: 1000,
      curve: curves.cubicBezier(0.4, 0, 1, 1),
      delay: 100,
      onFinish: () => {
        setTimeout(() => {
          router.replace({ uri: 'pages/index' })
        }, 1000)
      }
    }, () => {
      this.opacityValue = 1
      this.scaleValue = 1
    })
  })

  Text($r("app.string.entry_MainAbility"))
    .fontSize(26)
    .fontColor(Color.White)
    .margin({ top: 300 })

  Text($r("app.string.mainability_description"))
    .fontSize(17)
    .fontColor(Color.White)
    .margin({ top: 4 })

2、首页-产品列表-产品详情

首页-产品列表-产品详情

核心代码：

轮播组件 Swiper
@Component
export struct SubscribeSwiper {
  private index: number = 0

  build() {
    Swiper() {
      ForEach(subscribeItems, item => {
        SwiperItem({ index: item.id })
      }, item => item.title)
    }
    .width('100%')
    .height('203')
    .indicator(false)
    .index(this.index)
    .autoPlay(true)
    .itemSpace(15)
    .displayMode(SwiperDisplayMode.AutoLinear)
  }
}

3、照片书模板

照片书模板

核心代码：

GridView布局
@Component
struct GridItemView {
  private gridItem: SubscribeData;

  build() {
    Column({space: 10})  {
      Image(this.gridItem.image)
        .objectFit(ImageFit.Auto)
        .height(152)
        .width('100%')
      Text(this.gridItem.title)
        .fontSize(15)
        .fontColor(Color.Black)
        .margin(20)
        .textAlign(TextAlign.Center)
    }
    .onClick(() => {
      router.push({
        uri: 'pages/homePicture',
        params: { imageUrl: this.gridItem.image, imageId: this.gridItem.image.id.toString() }
      })
    })
    .backgroundColor(Color.White)
  }
}

4、产品列表样式切换

产品列表样式切换

核心代码：

懒加载
Scroll() {
      Grid() {
        LazyForEach(new MyDataSource(this.productItems), (item: ProductData, index) => {
          GridItem() {
            ProductGridItem({ productItem: item })
          }
        }, (item: ProductData) => item.id.toString())
      }
      .rowsTemplate(this.gridRowTemplate)
      .columnsTemplate('1fr 1fr')
      .columnsGap(8)
      .rowsGap(8)
      .height(this.heightValue)
    }
    .scrollBar(BarState.Off)
    .padding({ left: 16, right: 16 })

切换样式

Stack({ alignContent: Alignment.TopEnd }) {
        if (this.showList) {
          ProductList({ productItems: this.productItems })
        } else {
          ProductCategory({ productItems: this.productItems })
        }
        Image($r('app.media.Switch'))
          .height(40)
          .width(24)
          .objectFit(ImageFit.Contain)
          .margin({ top: 15, right: 10 })
          .onClick(() => {
            this.showList = !this.showList
          })
      }