HarmonyOS鸿蒙Next开发ArkUI实现电影票务应用界面

HarmonyOS鸿蒙Next开发ArkUI实现电影票务应用界面

最近在尝试用HarmonyOS NEXT的ArkUI方舟开发框架开发一个电影票务应用。作为刚接触鸿蒙生态不久的开发者，记录一下开发过程中的一些实践心得。

ArkUI的声明式开发方式确实让界面构建变得直观。在开发电影列表页面时，通过简单的组件组合就能实现不错的视觉效果。比如这个电影卡片组件，使用了Flex布局和条件渲染：

@Component
struct MovieItem {
  @Prop movie: Movie // 电影数据对象

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
      Image(this.movie.posterUrl)
        .width('100%')
        .aspectRatio(0.67)
        .borderRadius(8)

      Text(this.movie.title)
        .fontSize(16)
        .margin({ top: 8 })
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })

      Row() {
        ForEach(this.movie.genres, (genre: string) => {
          Text(genre)
            .fontSize(12)
            .padding(4)
            .backgroundColor('#f5f5f5')
            .borderRadius(4)
            .margin({ right: 6 })
        })
        .margin({ top: 6 })

        if (this.movie.hot) {
          Text('热映中')
            .fontSize(12)
            .fontColor('#ff4d4f')
            .margin({ top: 8 })
        }
      }
      .padding(12)
      .backgroundColor(Color.White)
      .borderRadius(12)
      .shadow({ radius: 8, color: '#00000010', offsetX: 0, offsetY: 2 })
    }
  }
}

在HarmonyOS NEXT环境下，ArkUI的组件响应式特性表现得很好。当电影数据更新时，界面会自动刷新，不需要手动操作DOM。对于票务类应用常见的座位选择功能，我尝试用Grid容器实现了影院座位图：

Grid() {
  ForEach(this.seats, (seat: Seat) => {
    GridItem() {
      Image(seat.available ? $r('app.media.seat_avail') : $r('app.media.seat_sold'))
        .onClick(() => {
          if (seat.available) {
            this.selectSeat(seat)
          }
        })
    }
  })
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr')
.rowsGap(12)
.columnsGap(12)

ArkUI方舟开发框架的实时预览功能确实提升了开发效率，修改样式后能立即看到效果。在API12版本中，新增的动效API让页面转场更加流畅，比如电影详情页的打开动效：

// 页面跳转时添加动效
router.pushUrl({
  url: 'pages/MovieDetail',
  params: { movieId: this.movie.id }
}, router.RouterMode.Standard, (err) => {
  if (!err) {
    animateTo({
      duration: 300,
      curve: Curve.EaseOut
    }, () => {
      // 动画效果
    })
  }
})

目前还在学习HarmonyOS NEXT更多特性，特别是分布式能力如何应用在票务场景中。ArkUI的组件体系已经能满足大部分界面需求，但有些自定义交互还需要进一步探索实现方案。