鸿蒙HarmonyOS NEXT入门，影院列表实现（九）

浩宇软件开发

于 2024-08-01 11:28:28 发布

阅读量236

点赞数 8

分类专栏： HarmonyOS NEXT鸿蒙入门文章标签： HarmonyOS NEXT 华为

本文链接：https://blog.csdn.net/jky_yihuangxing/article/details/140842563

版权

HarmonyOS NEXT鸿蒙入门专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1. 涉及到的技术点

@Extend装饰器的使用
列表List的使用

2.官网文档教程

@Extend装饰器： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-extend-V5
列表 (List) https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-create-list-V5

3.demo实现过程

@Extend装饰器的使用
1. 和@Styles不同，@Extend仅支持在全局定义，不支持在组件内部定义。
2. 和@Styles不同，@Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法。
3. 和@Styles不同，@Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循TS方法传值调用。

/**
 * 和@Styles不同，@Extend仅支持在全局定义，不支持在组件内部定义
 */
@Extend(Text)
function FancyTextStyle(fontColor: string, backgroundColor: string) {
  .fontColor(fontColor)
  .backgroundColor(backgroundColor)
  .fontSize(10)
  .fontWeight(800)
  .padding({
    left: 6,
    right: 6,
    top
    : 3,
    bottom: 3
  })
  .borderRadius(2)

}

创建影院数据实体CinemaInfo

在项目ets->新建entity文件夹->新建CinemaInfo.ets类

export class CinemaInfo {
  cinema_name: string = ''
  cinema_address: string = ''

  constructor(cinema_name: string, cinema_address: string) {
    this.cinema_name = cinema_name
    this.cinema_address = cinema_address
  }
}

在aboutToAppear()生命周期函数中，初始化影院数据

 aboutToAppear(): void {
    this.cinemaInfoList.push(new CinemaInfo('0090激光影城', '金山区朱泾镇沈浦泾路50号1幢A-01'))
    this.cinemaInfoList.push(new CinemaInfo('1929电影公园（XWORLD青浦吾悦店）',
      '青浦区淀山湖大道漕盈路218号吾悦广场内5楼'))
    this.cinemaInfoList.push(new CinemaInfo('AMG大光明影城（紫叶广场店）', '闵行区紫星路488弄129号1F-D,3楼,4楼'))
    this.cinemaInfoList.push(new CinemaInfo('CMC大光明影城（莲花店）', '静安区万荣路777号大宁音乐广场A座1层'))
    this.cinemaInfoList.push(new CinemaInfo('CineMaple红叶巨幕影城', '普陀区中山北路3300号环球港4楼4038室'))
    this.cinemaInfoList.push(new CinemaInfo('DFC影城金山店（LUXE 4K ）', '浦东新区花木街道芳甸路208-233号联洋广场A区2层'))
    this.cinemaInfoList.push(new CinemaInfo('上影国际影城（新业坊店）',
      '闵行区莘庄镇沪闵路6088号莘庄凯德龙之梦购物中心4楼'))
  }

使用List实现列表

List({ space: 10 }) {
        ForEach(this.cinemaInfoList, (cinemaInfo: CinemaInfo, index: number) => {
          ListItem() {
            Column() {
              Row() {
                Text(cinemaInfo.cinema_name).layoutWeight(1)
                Button('选座购票').height(30).backgroundColor('#e22418').width(77).fontSize(11)
              }

              Row() {
                Image($r('app.media.img_location')).width(20).margin({ left: -5 })
                Text(cinemaInfo.cinema_address).fontSize(12).fontColor('#999999')
              }.width('100%').margin({ top: 10 })

              Row() {
                Text('4DX厅')
                  .FancyTextStyle('#f5810d', '#fef8e0')
                Text('杜比全景声厅')
                  .FancyTextStyle('#d67477', '#ffeef4').margin({ left: 10, right: 10 })
                Text('LUXE巨幕厅')
                  .FancyTextStyle('#99763c', '#f4ead4')
              }.width('100%').margin({ top: 10 })


              Row() {

              }.backgroundColor('#f5f5f5').height(1).width('100%').margin({ top: 10 })

            }.width('100%').padding({ left: 10, right: 10 })
          }
        })
      }.margin({ top: 20 })

影院列表页具体代码实现

import { router } from '@kit.ArkUI';
import { CinemaInfo } from '../entity/CinemaInfo';

/**
 * 和@Styles不同，@Extend仅支持在全局定义，不支持在组件内部定义
 */
@Extend(Text)
function FancyTextStyle(fontColor: string, backgroundColor: string) {
  .fontColor(fontColor)
  .backgroundColor(backgroundColor)
  .fontSize(10)
  .fontWeight(800)
  .padding({
    left: 6,
    right: 6,
    top
    : 3,
    bottom: 3
  })
  .borderRadius(2)

}


class MovieInfo {
  movie_title: string = ''
}

@Entry
@Component
struct CinemaListPage {
  @State cinemaInfoList: Array<CinemaInfo> = []
  @State movieInfo: MovieInfo = {
    movie_title: ''
  }

  aboutToAppear(): void {
    //接收跳转传值
    this.movieInfo = router.getParams() as MovieInfo

    this.cinemaInfoList.push(new CinemaInfo('0090激光影城', '金山区朱泾镇沈浦泾路50号1幢A-01'))
    this.cinemaInfoList.push(new CinemaInfo('1929电影公园（XWORLD青浦吾悦店）',
      '青浦区淀山湖大道漕盈路218号吾悦广场内5楼'))
    this.cinemaInfoList.push(new CinemaInfo('AMG大光明影城（紫叶广场店）', '闵行区紫星路488弄129号1F-D,3楼,4楼'))
    this.cinemaInfoList.push(new CinemaInfo('CMC大光明影城（莲花店）', '静安区万荣路777号大宁音乐广场A座1层'))
    this.cinemaInfoList.push(new CinemaInfo('CineMaple红叶巨幕影城', '普陀区中山北路3300号环球港4楼4038室'))
    this.cinemaInfoList.push(new CinemaInfo('DFC影城金山店（LUXE 4K ）', '浦东新区花木街道芳甸路208-233号联洋广场A区2层'))
    this.cinemaInfoList.push(new CinemaInfo('上影国际影城（新业坊店）',
      '闵行区莘庄镇沪闵路6088号莘庄凯德龙之梦购物中心4楼'))
  }

  build() {
    Column() {
      Row() {
        Image($r('app.media.img_back')).width(26).onClick(() => {
          router.back()
        })
        //标题栏
        Text('影院列表')
          .fontSize(21)
          .fontWeight(600)
      }
      .width('100%')


      List({ space: 10 }) {
        ForEach(this.cinemaInfoList, (cinemaInfo: CinemaInfo, index: number) => {
          ListItem() {
            Column() {
              Row() {
                Text(cinemaInfo.cinema_name).layoutWeight(1)
                Button('选座购票').height(30).backgroundColor('#e22418').width(77).fontSize(11)
              }

              Row() {
                Image($r('app.media.img_location')).width(20).margin({ left: -5 })
                Text(cinemaInfo.cinema_address).fontSize(12).fontColor('#999999')
              }.width('100%').margin({ top: 10 })

              Row() {
                Text('4DX厅')
                  .FancyTextStyle('#f5810d', '#fef8e0')
                Text('杜比全景声厅')
                  .FancyTextStyle('#d67477', '#ffeef4').margin({ left: 10, right: 10 })
                Text('LUXE巨幕厅')
                  .FancyTextStyle('#99763c', '#f4ead4')
              }.width('100%').margin({ top: 10 })


              Row() {

              }.backgroundColor('#f5f5f5').height(1).width('100%').margin({ top: 10 })

            }.width('100%').padding({ left: 10, right: 10 })
          }
        })
      }.margin({ top: 20 })

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