HarmonyOS鸿蒙Next程序员日常-eTS版

HarmonyOS鸿蒙Next程序员日常-eTS版 #HarmonyOS挑战赛第四期#程序员日常-eTS版

简介

HarmonyOS挑战赛第四期#程序员日常-eTS版，是使用近期HarmonyOS推出新的声明式UI开发框架（ArkUI）开发一款程序日常图片集的应用，里面使用的是eTS文件，eTS是基于TS扩展的声明式开发范式的方舟开发框架是为HarmonyOS平台开发极简、高性能、跨设备应用设计研发的UI开发框架，支持开发者高效的构建跨设备应用UI界面。

Home模块

动图展示：

核心代码：

Flex({
  justifyContent: FlexAlign.Start,
  alignItems: ItemAlign.Center
}) {
  Stack() {
    Image($rawfile('image1.jpg'))
      .sharedTransition('imageId1', { duration: 600, curve: Curve.Smooth, delay: 100 })
      .onClick(() => {
        router.push({
          uri: 'pages/SharePage',
          params: { imageUrl: 'image1.jpg', imageId: 'imageId1'}
        })
      })
      .objectFit(ImageFit.Cover)
      .height('100%')
      .width('100%')
      .borderRadius(15)
  }
  .height('100%')
  .width(220)
  .margin({ left: 5, right: 5 })
  Text('1024\r\n程序员节')
    .fontSize(20)
    .fontColor(Color.Black)
    .fontWeight(FontWeight.Regular)
    .margin({ left: 5, right: 5 })
}
.height(120)
.backgroundColor(Color.Grey)
.borderRadius(15)
.margin({ top: 20 })

参考资料：这里参考了官方的demo：TransitionAnimtaionETS里的ShareItem.ets和SharePage.ets

More模块

动图展示：

核心代码：

Flex({
  direction: FlexDirection.Column,
  alignItems: ItemAlign.Center,
  justifyContent: FlexAlign.Center
}) {
  Button({
    type: ButtonType.Circle,
    stateEffect: true
  }) {
    Image($rawfile(this.gridItem.itemIconPath))
      .onClick(() => {
        router.push({
          uri: 'pages/MorePicturePage',
          params: { imageIndex: this.gridItem.itemId-1}
        })
      })
      .objectFit(ImageFit.Cover)
      .width($s('integers.iconSize'))
      .height($s('integers.iconSize'))
  }
  .width($s('integers.itemWidth'))
  .height($s('integers.itemHeight'))
  .backgroundColor($s('colors.itemColor'))
  .borderRadius(24)
  Text(this.gridItem.itemName)
    .fontSize($s('integers.textSize'))
    .fontColor($s('colors.textColor'))
    .margin({ top: 6 })
    .maxLines(1)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
}

参考资料：这里参考了官方模板Grid Ability和使用了官方组件Swiper

核心代码：

Flex({
  direction: FlexDirection.Column,
  alignItems: ItemAlign.Center,
  justifyContent: FlexAlign.Center
}) {
  Swiper() {
    ForEach(this.upGridList, item => {
      Image($rawfile(item.itemIconPath))
        .sharedTransition('imageId'+item.itemId, { duration: 1000, curve: Curve.Smooth, delay: 100 })
        .width('100%')
        .height('100%')
        .objectFit(ImageFit.Contain)
    }, item => item.itemName)
  }
  .width('100%')
  .height('100%')
  .index(this.imageIndex) // 设置当前索引
  .onChange((index: number) => { // 索引变化
    // 更新索引值
    this.imageIndex = index
  })
}
.width('100%')
.height('100%')

参考资料：这里参考了官方模板Grid Ability和使用了官方组件Swiper

User模块

动图展示：

核心代码：

Scroll(this.scroller) {
  Flex({
    alignItems: ItemAlign.Start,
    justifyContent: FlexAlign.Center,
    wrap: FlexWrap.Wrap
  }) {
    ForEach(this.upGridList, item => {
      Column(){
        Image($rawfile(item.itemIconPath))
          .sharedTransition('imageId'+item.itemId, { duration: 600, curve: Curve.Smooth, delay: 100 })
          .onClick(() => {
            router.push({
              uri: 'pages/MorePicturePage',
              params: { imageIndex: item.itemId-1}
            })
          })
          .objectFit(ImageFit.Contain)
          .borderRadius(10)
          .width('45%')
          .height('20%')
        Text(item.itemName)
          .fontSize(24)
          .textAlign(TextAlign.Center)
          .margin(5)
      }
      .backgroundColor(0xEFEFEF)
      .borderRadius(15)
      .padding({top:10})
      .margin(5)
    })
  }
  .width('100%')
}

参考资料：这里的动画参考了官方的demo：TransitionAnimtaionETS和使用了官方组件Scroll

总结

通过这次挑战赛，了解了华为推出的方舟开发框架（ArkUI）,了解到使用基于TS扩展的声明式开发范式的方舟开发框架，采用更接近自然语义的编程方式，让开发者可以直观地描述UI界面，不必关心框架如何实现UI绘制和渲染，实现极简高效开发。从组件、动效和状态管理三个维度来提供UI能力，还提供了系统能力接口，实现系统能力的极简调用。希望后面有机会继续学习更新自己的知识库……