鸿蒙HarmonyOS NEXT入门，电影购票日期选择列表（十）

已于 2024-08-02 09:32:21 修改
阅读量301 收藏 6
点赞数 8
文章标签： HarmonyOS NEXT harmonyos Android开发
于 2024-08-02 09:31:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jky_yihuangxing/article/details/140852807
版权

文章目录

1. 涉及到的技术点

  1. @Extend装饰器的使用
  2. List列表的使用
  3. 日期Date的使用

2. 官方文档指南

  1. @Extend装饰器：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-extend-V5

  2. 列表 (List)：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-create-list-V5

3. demo具体实现过程

  1. 自动获取今天，明天，后天的日期，首先定义一个DayInfo接口，用来获取日期
interface DayInfo {
  today: string
  tomorrow: string
  dayAfterTomorrow: string

}
  1. 写一个获取日期的方法
 /**
   * 获取今天，明天，后天的日期
   */
  getDays(): DayInfo {
    //今天
    const today = new Date();
    //+1 明天
    const tomorrow = new Date(today);
    tomorrow.setDate(tomorrow.getDate() + 1);
    //+2 后天
    const dayAfterTomorrow = new Date(today);
    dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 2);
    //为什么要定义DayInfo的好处，直接return一个对象出去
    return {
      today: today.toLocaleDateString('zh-CN', { month: 'long', day: 'numeric' }),
      tomorrow: tomorrow.toLocaleDateString('zh-CN', { month: 'long', day: 'numeric' }),
      dayAfterTomorrow: dayAfterTomorrow.toLocaleDateString('zh-CN', { month: 'long', day: 'numeric' })
    }
  }
  1. 写一个根据日期获取影片购票的时间段
    注意：在这里使用本地数据模拟影片播购票的时间段
/**
   * 获取影片播购票的时间段
   */
  getMovieDateList(postion: number) {
    this.movieDateInfoList = []
    if (postion == 0) {
      this.movieDateInfoList.push(new MovieDateInfo("08:45", "09:45散场", "原版3D", "1号厅", 58))
      this.movieDateInfoList.push(new MovieDateInfo("09:35", "10:28散场", "原版2D", "2号厅", 68));
      this.movieDateInfoList.push(new MovieDateInfo("10:05", "12:09散场", "原版3D", "3号厅", 38));
      this.movieDateInfoList.push(new MovieDateInfo("13:25", "15:25散场", "原版2D", "4号厅", 78));
      this.movieDateInfoList.push(new MovieDateInfo("16:45", "16:26散场", "原版3D", "5号厅", 88));
      this.movieDateInfoList.push(new MovieDateInfo("19:55", "21:35散场", "原版2D", "6号厅", 48));
      this.movieDateInfoList.push(new MovieDateInfo("20:45", "22:25散场", "原版2D", "7号厅", 28));
      this.movieDateInfoList.push(new MovieDateInfo("21:00", "23:22散场", "原版3D", "8号厅", 78));
      this.movieDateInfoList.push(new MovieDateInfo("22:15", "23:46散场", "原版2D", "9号厅", 90));
      this.movieDateInfoList.push(new MovieDateInfo("10:25", "12:06散场", "原版2D", "10号厅", 108));
    } else if (postion == 1) {
      this.movieDateInfoList.push(new MovieDateInfo("09:35", "11:22散场", "原版2D", "1号厅", 68));
      this.movieDateInfoList.push(new MovieDateInfo("10:05", "11:20散场", "原版3D", "2号厅", 38));
      this.movieDateInfoList.push(new MovieDateInfo("13:25", "15:24散场", "原版3D", "3号厅", 78));
      this.movieDateInfoList.push(new MovieDateInfo("16:45", "18:21散场", "原版2D", "4号厅", 88));
      this.movieDateInfoList.push(new MovieDateInfo("21:00", "22:16散场", "原版3D", "5号厅", 78));
      this.movieDateInfoList.push(new MovieDateInfo("22:15", "23:38散场", "原版2D", "6号厅", 90));
      this.movieDateInfoList.push(new MovieDateInfo("10:25", "13:56散场", "原版2D", "7号厅", 108));
    } else {
      this.movieDateInfoList.push(new MovieDateInfo("13:25", "15:25散场", "原版3D", "1号厅", 58));
      this.movieDateInfoList.push(new MovieDateInfo("16:45", "18:23散场", "原版2D", "2号厅", 48));
      this.movieDateInfoList.push(new MovieDateInfo("20:45", "21:22散场", "原版3D", "3号厅", 28));
      this.movieDateInfoList.push(new MovieDateInfo("21:00", "22:25散场", "原版2D", "4号厅", 78));
      this.movieDateInfoList.push(new MovieDateInfo("10:25", "12:29散场", "原版3D", "5号厅", 108));
    }

  }
  1. 数据MovieDateInfo实体
    项目->ets->新建entity文件夹 ->新建MovieDateInfo.ets类
export class MovieDateInfo {
  time: string = ''
  end_time: string = ''
  type: string = ''
  few_number: string = ''
  price: number = 0

  constructor(time: string, end_time: string, type: string, few_number: string, price: number) {
    this.time = time
    this.end_time = end_time
    this.type = type
    this.few_number = few_number
    this.price = price
  }
}
  1. 综合代码实现过程
import { router } from '@kit.ArkUI'
import { MovieDateInfo } from '../entity/MovieDateInfo'


/**
 * @Extend装饰器 和@Styles不同，@Extend仅支持在全局定义，不支持在组件内部定义
 */
@Extend(Text)
function fanCurrentTextStatus() {
  .width(80)
  .height(32)
  .borderRadius(20)
  .fontSize(13)
  .textAlign(TextAlign.Center)
}

interface DayInfo {
  today: string
  tomorrow: string
  dayAfterTomorrow: string

}


@Entry
@Component
struct SelectMovieDatePage {
  @State currentIndex: number = 0
  @State movieDateInfoList: Array<MovieDateInfo> = []

  setSelectedCurrentIndex(index: number) {
    this.currentIndex = index
  }

  /**
   * 获取影片播购票的时间段
   */
  getMovieDateList(postion: number) {
    this.movieDateInfoList = []
    if (postion == 0) {
      this.movieDateInfoList.push(new MovieDateInfo("08:45", "09:45散场", "原版3D", "1号厅", 58))
      this.movieDateInfoList.push(new MovieDateInfo("09:35", "10:28散场", "原版2D", "2号厅", 68));
      this.movieDateInfoList.push(new MovieDateInfo("10:05", "12:09散场", "原版3D", "3号厅", 38));
      this.movieDateInfoList.push(new MovieDateInfo("13:25", "15:25散场", "原版2D", "4号厅", 78));
      this.movieDateInfoList.push(new MovieDateInfo("16:45", "16:26散场", "原版3D", "5号厅", 88));
      this.movieDateInfoList.push(new MovieDateInfo("19:55", "21:35散场", "原版2D", "6号厅", 48));
      this.movieDateInfoList.push(new MovieDateInfo("20:45", "22:25散场", "原版2D", "7号厅", 28));
      this.movieDateInfoList.push(new MovieDateInfo("21:00", "23:22散场", "原版3D", "8号厅", 78));
      this.movieDateInfoList.push(new MovieDateInfo("22:15", "23:46散场", "原版2D", "9号厅", 90));
      this.movieDateInfoList.push(new MovieDateInfo("10:25", "12:06散场", "原版2D", "10号厅", 108));
    } else if (postion == 1) {
      this.movieDateInfoList.push(new MovieDateInfo("09:35", "11:22散场", "原版2D", "1号厅", 68));
      this.movieDateInfoList.push(new MovieDateInfo("10:05", "11:20散场", "原版3D", "2号厅", 38));
      this.movieDateInfoList.push(new MovieDateInfo("13:25", "15:24散场", "原版3D", "3号厅", 78));
      this.movieDateInfoList.push(new MovieDateInfo("16:45", "18:21散场", "原版2D", "4号厅", 88));
      this.movieDateInfoList.push(new MovieDateInfo("21:00", "22:16散场", "原版3D", "5号厅", 78));
      this.movieDateInfoList.push(new MovieDateInfo("22:15", "23:38散场", "原版2D", "6号厅", 90));
      this.movieDateInfoList.push(new MovieDateInfo("10:25", "13:56散场", "原版2D", "7号厅", 108));
    } else {
      this.movieDateInfoList.push(new MovieDateInfo("13:25", "15:25散场", "原版3D", "1号厅", 58));
      this.movieDateInfoList.push(new MovieDateInfo("16:45", "18:23散场", "原版2D", "2号厅", 48));
      this.movieDateInfoList.push(new MovieDateInfo("20:45", "21:22散场", "原版3D", "3号厅", 28));
      this.movieDateInfoList.push(new MovieDateInfo("21:00", "22:25散场", "原版2D", "4号厅", 78));
      this.movieDateInfoList.push(new MovieDateInfo("10:25", "12:29散场", "原版3D", "5号厅", 108));
    }

  }

  /**
   * 获取今天，明天，后天的日期
   */
  getDays(): DayInfo {
    //今天
    const today = new Date();
    //+1 明天
    const tomorrow = new Date(today);
    tomorrow.setDate(tomorrow.getDate() + 1);
    //+2 后天
    const dayAfterTomorrow = new Date(today);
    dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 2);
    //为什么要定义DayInfo的好处，直接return一个对象出去
    return {
      today: today.toLocaleDateString('zh-CN', { month: 'long', day: 'numeric' }),
      tomorrow: tomorrow.toLocaleDateString('zh-CN', { month: 'long', day: 'numeric' }),
      dayAfterTomorrow: dayAfterTomorrow.toLocaleDateString('zh-CN', { month: 'long', day: 'numeric' })
    }
  }

  aboutToAppear(): void {
    this.getMovieDateList(this.currentIndex)
  }

  build() {
    Column() {

      //标题栏
      Row() {
        Image($r('app.media.img_back')).width(26).onClick(() => {
          router.back()
        })
        //标题栏
        Text('上影国际影城（新业坊店）')
          .fontSize(21)
          .fontWeight(600)
      }
      .width('100%')

      //选择日日期栏
      Row() {
        Text(`今天${this.getDays().today}`)
          .fanCurrentTextStatus()
          .backgroundColor(this.currentIndex == 0 ? '#e22418' : '#f5f5f5')
          .fontColor(this.currentIndex == 0 ? Color.White : Color.Black)
          .onClick(() => {
            this.setSelectedCurrentIndex(0)
            this.getMovieDateList(this.currentIndex)
          })
        Text(`明天${this.getDays().tomorrow}`)
          .fanCurrentTextStatus()
          .backgroundColor(this.currentIndex == 1 ? '#e22418' : '#f5f5f5')
          .fontColor(this.currentIndex == 1 ? Color.White : Color.Black)
          .margin({ left: 10, right: 10 })
          .onClick(() => {
            this.setSelectedCurrentIndex(1)
            this.getMovieDateList(this.currentIndex)
          })
        Text(`后天${this.getDays().dayAfterTomorrow}`)
          .fanCurrentTextStatus()
          .backgroundColor(this.currentIndex == 2 ? '#e22418' : '#f5f5f5')
          .fontColor(this.currentIndex == 2 ? Color.White : Color.Black)
          .onClick(() => {
            this.setSelectedCurrentIndex(2)
            this.getMovieDateList(this.currentIndex)
          })
      }.width('100%').padding(10).margin(16)


      List({ space: 16 }) {

        ForEach(this.movieDateInfoList, (item: MovieDateInfo) => {
          ListItem() {
            Row() {
              //左边结构
              Row() {
                Column() {
                  Text(item.time).fontSize(13).fontColor('#333333')
                  Text(item.end_time).margin({ top: 10 }).fontSize(10).fontColor('#999999')
                }.alignItems(HorizontalAlign.Start).margin({ left: 10 })

                Column() {
                  Text(item.type).fontSize(11).fontColor('#333333')
                  Text(item.few_number).margin({ top: 10 }).fontSize(10).fontColor('#999999')
                }.alignItems(HorizontalAlign.Start).margin({ left: 30 })

              }

              //右边结构
              Row() {
                Row() {
                  Text(`¥${item.price}`).fontColor('#FF6D00').fontSize(15)
                }

                Column() {
                  Text('购票')
                    .backgroundColor('#e22418')
                    .textAlign(TextAlign.Center)
                    .padding({
                      left: 10,
                      right: 10,
                      top: 3,
                      bottom: 3
                    })
                    .fontColor(Color.White)
                    .fontSize(12)
                    .borderRadius(4)
                }.margin({ left: 50, right: 10 })
              }

            }.width('100%').justifyContent(FlexAlign.SpaceBetween)
          }
        })
      }

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

注意事项：在使用ForEach渲染列表的时候，ListItem只能在循环里面

4. 运行效果图

在这里插入图片描述

浩宇软件开发
关注
  • 8
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浩宇软件开发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值