#鸿蒙通关秘籍#使用HarmonyOS List组件实现影院列表展示

HarmonyOS
2024-12-02 13:41:49
776浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
暖风细雨JSON

在HarmonyOS中,通过List组件和数据绑定可以轻松实现影院列表的渲染。以下是实现影院数据列表的步骤:

定义数据实体类

首先定义一个CinemaInfo类来表示影院信息:

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
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

初始化影院数据

aboutToAppear()声明周期函数中,初始化影院数据:

aboutToAppear(): void {
    this.cinemaInfoList.push(new CinemaInfo('0090激光影城', '金山区朱泾镇沈浦泾路50号1幢A-01'))
    // 添加其他影院信息...
}
  • 1.
  • 2.
  • 3.
  • 4.

使用List组件展示影院信息

通过List组件结合ForEach遍历展示影院信息:

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')
            // 其他厅信息...
          }
          .width('100%').margin({ top: 10 })
        }
        .width('100%').padding({ left: 10, right: 10 })
      }
    })
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.

通过上述代码,通过循环和FancyTextStyle实现了影院列表及其厅类型样式的动态展示。

分享
微博
QQ
微信
回复
2024-12-02 16:10:23
相关问题
HarmonyOS 列表展示list懒加载问题
1294浏览 • 1回复 待解决