HarmonyOS NEXT应用开发边学边玩系列：从零实现一影视APP (五、电影详情页的设计实现)

在上一篇文章中，完成了电影列表页的开发。接下来，将进入电影详情页的设计实现阶段。这个页面将展示电影的详细信息，包括电影海报、评分、简介以及相关影人等。将使用 HarmonyOS 提供的常用组件，并结合第三方库 nutpi/axios 来实现网络请求。下面，一步步地来看如何实现电影详情页。

在这里插入图片描述
开源项目地址：https://atomgit.com/csdn-qq8864/hmmovie

好的作品是需要不断打磨，在你的学习和体验过程中有任何问题，欢迎到我的开源项目代码仓下面提交issue,持续优化。

获取电影详情接口

首先，需要定义一个用于获取电影详情的接口。这里使用 axiosClient.post 方法来实现，代码如下：

export const getDetailMv = (id: string): HttpPromise<DetailMvResp> => axiosClient.post({ url: '/detailmovie', data: { id: id } });

电影详情接口的具体信息如下：

POST http://120.27.146.247:8000/api/v1/detailmovie
Content-Type: application/json

{
    "id": "1292052"
}
电影详情页的组件使用

在电影详情页中，将使用 Badge、SymbolSpan、Button、Rating 等组件来展示电影的详细信息。

  1. Badge 组件

    Badge 组件用于在某个组件的右上角显示一个标记，通常用于展示某种数量或状态。在电影详情页中，将使用 Badge 组件来展示“想看”和“看过”的数量。

  2. SymbolSpan 组件

    SymbolSpan 组件用于在文本中嵌入图标。在电影详情页中，将使用 SymbolSpan 组件来展示“想看”和“看过”的图标。

  3. Button 组件

    Button 组件用于创建按钮，用户可以通过点击按钮来执行特定的操作。在电影详情页中，将使用 Button 组件来创建“播放”按钮，用户点击后可以跳转到视频播放页面。

  4. Rating 组件

    Rating 组件用于展示评分。在电影详情页中，将使用 Rating 组件来展示电影的豆瓣评分。

电影详情页的实现

下面，将展示电影详情页的具体实现代码：

import { getDetailMv, getMovieSrc } from "../../common/api/movie"
import { Log } from "../../utils/logutil"
import { BusinessError } from "@kit.BasicServicesKit"
import { DetailMvResp, DetailMvRespCast } from "../../common/bean/DetailMvResp"
import { LengthMetrics, promptAction } from "@kit.ArkUI"
import { MvSourceResp } from "../../common/bean/MvSourceResp"

@Builder
export function MovieDetailPageBuilder() {
  Detail()
}

@Component
struct Detail {
  pageStack: NavPathStack = new NavPathStack()
  private uid = ''
  @State detailData: DetailMvResp | null = null;
  private srcData: MvSourceResp | null = null;

  private description: string = ''
  private isToggle = false
  @State toggleText: string = ''
  @State toggleBtn: string = '展开'

  build() {
    NavDestination() {
      Column({ space: 0 }) {
        Row() {
          Image(this.detailData?.images).objectFit(ImageFit.Auto).width(120).borderRadius(5)
          Column({ space: 8 }) {
            Text(this.detailData?.title).fontSize(18)
            Text(this.detailData?.year + " " + this.detailData?.genre).fontSize(14)

            Row() {
              Badge({
                count: this.detailData?.wish_count,
                maxCount: 10000,
                position: BadgePosition.RightTop,
                style: { badgeSize: 22, badgeColor: '#fffab52a' }
              }) {
                Row() {
                  Text() {
                    SymbolSpan($r('sys.symbol.heart'))
                      .fontWeight(FontWeight.Lighter)
                      .fontSize(32)
                      .fontColor(['#fffab52a'])
                  }
                  Text('想看')
                }.backgroundColor('#f8f4f5').borderRadius(5).padding(5)
              }.padding(8)

              Blank(10).width(40)
              Badge({
                count: this.detailData?.reviews_count,
                maxCount: 10000,
                position: BadgePosition.RightTop,
                style: { badgeSize: 22, badgeColor: '#fffab52a' }
              }) {
                Row() {
                  Text() {
                    SymbolSpan($r('sys.symbol.star'))
                      .fontWeight(FontWeight.Lighter)
                      .fontSize(32)
                      .fontColor(['#fffab52a'])
                  }
                  Text('看过')
                }.backgroundColor('#f8f4f5').borderRadius(5).padding(5)
              }.padding(8)
            }

            Button('播放', { buttonStyle: ButtonStyleMode.NORMAL, role: ButtonRole.NORMAL })
              .borderRadius(8)
              .borderColor('#fffab52a')
              .fontColor('#fffab52a')
              .width(100)
              .height(35)
              .onClick(() => {
                console.info('Button onClick')
                if (this.srcData != null) {
                  this.pageStack.pushDestinationByName("VideoPlayerPage", { item: { video: this.srcData.urls[0], tvurls: this.srcData.tvurls, title: this.srcData.title, desc: this.detailData?.summary } }).catch((e: Error) => {
                    // 跳转失败，会返回错误码及错误信息
                    console.log(`catch exception: ${JSON.stringify(e)}`)
                  }).then(() => {
                    // 跳转成功

                  });
                } else {
                  promptAction.showToast({ message: '暂无资源' })
                }
              })
          }.alignItems(HorizontalAlign.Start) // 水平方向靠左对齐
            .justifyContent(FlexAlign.Start)   // 垂直方向靠上对齐
            .padding(10)
        }.height(160).width('100%')

        Row() {
          Text('豆瓣评分').fontSize(16).padding(5)
          Rating({ rating: (this.detailData?.rate ?? 0) / 2, indicator: true })
            .stars(5)
            .stepSize(0.5).height(28)

          Text(this.detailData?.rate.toString()).fontColor('#fffab52a').fontWeight(FontWeight.Bold).fontSize(36).padding(5)
        }.width('100%').height(80).borderRadius(5).backgroundColor('#f8f4f5').margin(20)

        Text('简介').fontSize(18).padding({ bottom: 10 }).fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Start)

        Text(this.toggleText).fontSize(14).lineHeight(20).alignSelf(ItemAlign.Start)
        Text(this.toggleBtn).fontSize(14).fontColor(Color.Gray).padding(10).alignSelf(ItemAlign.End).onClick(() => {
          this.isToggle = !this.isToggle
          if (this.isToggle) {
            this.toggleBtn = '收起'
            this.toggleText = this.description
          } else {
            this.toggleBtn = '展开'
            this.toggleText = this.description.substring(0, 100) + '...'
          }
        })

        Text('影人').fontSize(18).padding({ bottom: 10 }).fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Start)
        Scroll() {
          Row({ space: 5 }) {
            ForEach(this.detailData?.cast, (item: DetailMvRespCast) => {
              Column({ space: 0 }) {
                Image(item.cover).objectFit(ImageFit.Auto).height(120).borderRadius(5)
                  .onClick(() => {

                  })

                Text(item.name)
                  .alignSelf(ItemAlign.Center)
                  .maxLines(1)
                  .textOverflow({ overflow: TextOverflow.Ellipsis })
                  .fontSize(14).padding(10)
              }.justifyContent(FlexAlign.Center)

            }, (itm: DetailMvRespCast, idx) => itm.id)
          }
        }.scrollable(ScrollDirection.Horizontal)

      }.padding({ left: 10, right: 10 })
    }.title("电影详情")
      .width('100%')
      .height('100%')
      .onReady(ctx => {
        this.pageStack = ctx.pathStack
        //从上个页面拿参数
        this.pageStack.getParamByName("MovieDetailPage")
        interface params {
          id: string;
        }
        let par = ctx.pathInfo.param as params
        Log.debug("par:%s", par.id)
        this.uid = par.id
      })
      .onShown(() => {
        console.info('Detail onShown');
        getDetailMv(this.uid).then((res) => {
          Log.debug(res.data.message)
          Log.debug("request", "res.data.code:%{public}d", res.data.code)
          this.detailData = res.data
          this.description = this.detailData.summary
          this.toggleText = this.description.substring(0, 100) + '...'
        }).catch((err: BusinessError) => {
          Log.debug("request", "err.data.code:%d", err.code)
          Log.debug("request", err.message)
        });

        getMovieSrc(this.uid).then((res) => {
          Log.debug(res.data.message)
          Log.debug("request", "res.data.code:%{public}d", res.data.code)
          if (res.data.code == 0) {
            this.srcData = res.data
          }
        }).catch((err: BusinessError) => {
          Log.debug("request", "err.data.code:%d", err.code)
          Log.debug("request", err.message)
        });
      })
  }
}
折叠效果的实现

在电影详情页中，对于电影的简介，使用了折叠效果，即默认只显示部分简介内容，用户点击“展开”按钮后可以查看完整简介。这个效果的实现主要通过控制 Text 组件的显示内容来实现。具体代码如下：

Text(this.toggleText).fontSize(14).lineHeight(20).alignSelf(ItemAlign.Start)
Text(this.toggleBtn).fontSize(14).fontColor(Color.Gray).padding(10).alignSelf(ItemAlign.End).onClick(() => {
  this.isToggle = !this.isToggle
  if (this.isToggle) {
    this.toggleBtn = '收起'
    this.toggleText = this.description
  } else {
    this.toggleBtn = '展开'
    this.toggleText = this.description.substring(0, 100) + '...'
  }
})

通过上述代码，实现了电影简介内容的折叠效果。

总结

在本文中，完成了电影详情页的设计与实现。主要使用了 Badge、SymbolSpan、Button、Rating 等组件，并结合 nutpi/axios 库来实现网络请求。通过这些技术，可以快速地开发出功能丰富、用户体验良好的影视应用。希望本文对你有所帮助。

作者介绍

作者：csdn猫哥

原文链接：https://blog.csdn.net/yyz_1987

团队介绍

坚果派团队由坚果等人创建，团队拥有12个华为HDE带领热爱HarmonyOS/OpenHarmony的开发者，以及若干其他领域的三十余位万粉博主运营。专注于分享HarmonyOS/OpenHarmony、ArkUI-X、元服务、仓颉等相关内容，团队成员聚集在北京、上海、南京、深圳、广州、宁夏等地，目前已开发鸿蒙原生应用和三方库60+，欢迎交流。

版权声明

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

其他资源

官方系统图标资源：https://developer.huawei.com/consumer/cn/doc/design-guides/system-icons-0000001929854962

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md

https://developer.huawei.com/consumer/cn/design/harmonyos-symbol/

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/954467.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

交叉编译avahi到aarch64平台

交叉编译avahi到aarch64平台

谢绝转载 一、背景 准备学习无中心网络组网&#xff0c;研究如何实现无中心网络IP分配 二、环境搭建过程 找到的有参考价值的网页&#xff1a; https://zhuanlan.zhihu.com/p/60892150322 gcc_7.5.sh #! /bin/shexport PATH/home/ws/chain_tools/gcc-linaro-7.5.0-2019.1…
阅读更多...
springMVC实现文件上传

springMVC实现文件上传

目录 一、创建项目 二、引入依赖 三、web.xml 四、编写上传文件的jsp页面 五、spring-mvc.xml 六、controller 七、运行 一、创建项目 二、引入依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.o…
阅读更多...
6.1 MySQL数字函数和条件函数

6.1 MySQL数字函数和条件函数

以前我们在课程中使用过一些mysql的内置函数&#xff0c;比如说四舍五入的round函数&#xff0c;做日期计算的data, datediff函数等等。那么本次课程咱们就来系统的学习一下mysql的这些内置函数&#xff0c;我们使用编程语言写程序的时候&#xff0c;通常会把某一项业务功能封装…
阅读更多...
设计模式03：行为型设计模式之策略模式的使用情景及其基础Demo

设计模式03：行为型设计模式之策略模式的使用情景及其基础Demo

1.策略模式 好处&#xff1a;动态切换算法或行为场景&#xff1a;实现同一功能用到不同的算法时和简单工厂对比&#xff1a;简单工厂是通过参数创建对象&#xff0c;调用同一个方法&#xff08;实现细节不同&#xff09;&#xff1b;策略模式是上下文切换对象&#xff0c;调用…
阅读更多...
网安——CSS

网安——CSS

一、CSS基础概念 CSS有两个重要的概念&#xff0c;分为样式和布局 CSS的样式分为两种&#xff0c;一种是文字的样式&#xff0c;一种是盒模型的样式 CSS的另一个重要的特质就是辅助页面布局&#xff0c;完成HTML不能完成的功能&#xff0c;比如并排显示或精确定位显示 从HT…
阅读更多...
Pytorch基础教程：从零实现手写数字分类

Pytorch基础教程：从零实现手写数字分类

文章目录 1.Pytorch简介2.理解tensor2.1 一维矩阵2.2 二维矩阵2.3 三维矩阵 3.创建tensor3.1 你可以直接从一个Python列表或NumPy数组创建一个tensor&#xff1a;3.2 创建特定形状的tensor3.3 创建三维tensor3.4 使用随机数填充tensor3.5 指定tensor的数据类型 4.tensor基本运算…
阅读更多...
git操作（bitbucket仓库）

git操作（bitbucket仓库）

在代码远程版本控制和提交过程中需要经常使用git命令&#xff0c;熟练使用git是一个软件工程师必备的技能之一。 将主版本代码fork到自己的 bitbucket 子仓库中 克隆到本地 利用ssh链接进行克隆&#xff0c;将 fork 的子仓库克隆到本地。 git clone ssh://{$你fork的子bitbu…
阅读更多...
【AIGC】SYNCAMMASTER：多视角多像机的视频生成

【AIGC】SYNCAMMASTER：多视角多像机的视频生成

标题&#xff1a;SYNCAMMASTER: SYNCHRONIZING MULTI-CAMERA VIDEO GENERATION FROM DIVERSE VIEWPOINTS 主页&#xff1a;https://jianhongbai.github.io/SynCamMaster/ 代码&#xff1a;https://github.com/KwaiVGI/SynCamMaster 文章目录 摘要一、引言二、使用步骤2.1 TextT…
阅读更多...
登录系统网址作业

登录系统网址作业

目录 主页代码 主页​编辑 效果1 登录页面代码 登录页面 效果2 注册页面代码 注册页面 效果3 主页代码 <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8"> <meta name"viewport" content&qu…
阅读更多...
[Do374]Ansible一键搭建sftp实现用户批量增删

[Do374]Ansible一键搭建sftp实现用户批量增删

[Do374]Ansible一键搭建sftp实现用户批量增删 1. 前言2. 思路3. sftp搭建及用户批量新增3.1 配置文件内容3.2 执行测试3.3 登录测试3.4 确认sftp服务器配置文件 4. 测试删除用户 1. 前言 最近准备搞一下RHCA LV V,外加2.9之后的ansible有较大变化于是练习下Do374的课程内容. 工…
阅读更多...
00_专栏《Redis 7.x企业级开发实战教程》介绍

00_专栏《Redis 7.x企业级开发实战教程》介绍

大家好，我是袁庭新。Redis作为一款高性能、多用途的内存数据库，凭借其丰富的数据结构、高速读写能力、原子操作特性及发布订阅等功能，在缓存加速、分布式锁、消息队列等场景中不可或缺，极大提升了系统性能与开发效率，是现代互联网应用架构的关键组件。 你是否在学习Redis…
阅读更多...
wow-agent 学习笔记

wow-agent 学习笔记

wow-agent-课程详情 | Datawhale 前两课比较基础&#xff0c;无笔记 第三课 阅卷智能体这一块&#xff0c;曾经做过一点和AI助教相关的内容&#xff0c;也是用了一个prompt去进行CoT&#xff0c;但是风格和课程中的不太相同&#xff0c;在下面附上我的prompt 你是一名资深教…
阅读更多...
如何优化Elasticsearch大文档查询?

如何优化Elasticsearch大文档查询?

记录一次业务复杂场景下DSL优化的过程 背景 B端商城业务有一个场景就是客户可见的产品列表是需要N多闸口及各种其它逻辑组合过滤的&#xff0c;各种闸口数据及产品数据都是存储在ES的(有的是独立索引&#xff0c;有的是作为产品属性存储在产品文档上)。 在实际使用的过程中&a…
阅读更多...
idea分支合并代码

idea分支合并代码

步骤一 首先把两个分支的代码都提交了&#xff0c;保持和远程仓库一致&#xff0c;不要有任何没提交的代码。如果一些程序的yml配置文件&#xff0c;不想提交&#xff0c;可以复制一个&#xff0c;不受git管理。如果有没有提交的代码&#xff0c;合并分支的时候就会提示那些代…
阅读更多...
EasyLine(v2.0)自制光谱、曲线处理软件

EasyLine(v2.0)自制光谱、曲线处理软件

前言&#xff1a;因为这次更新对软件的整体变动较大&#xff0c;所以就没有取版本v1.1&#xff0c;而是直接使用v2.0版本。然后上一版的讲解也不是很清楚&#xff0c;这次也做重点讲解一下。 自制光谱、曲线处理软件-EasyLine 软件的安装软件的使用总体介绍文件格式处理的使用 …
阅读更多...
使用JMeter模拟多IP发送请求！

使用JMeter模拟多IP发送请求！

你是否曾遇到过这样的场景&#xff1a;使用 JMeter 进行压力测试时&#xff0c;单一 IP 被服务器限流或者屏蔽&#xff1f;这时&#xff0c;如何让 JMeter 模拟多个 IP 发送请求&#xff0c;成功突破测试限制&#xff0c;成为测试工程师必须攻克的难题。今天&#xff0c;我们就…
阅读更多...
python如何设计矩阵

python如何设计矩阵

python设计矩阵&#xff1a; 1、调用numpy模块创建矩阵并设置矩阵的行跟列 import numpy matrix numpy.array([[1,2,3],[4,5,6],[7,8,9]])#创建矩阵 2、通过下标的办法输出二维列表中的一维列表&#xff0c;达到输出矩阵的效果 vector numpy.array([[1,2,3],[4,5,6],[7,8,9]…
阅读更多...
量子计算：从薛定谔的猫到你的生活

量子计算：从薛定谔的猫到你的生活

文章背景 说到量子计算&#xff0c;不少人觉得它神秘又遥不可及。其实&#xff0c;它只是量子物理学的一个“应用小分支”。它的核心在于量子比特的“叠加”和“纠缠”&#xff0c;这些听上去像科幻小说的概念&#xff0c;却为计算世界开辟了一片全新的天地。如果经典计算是“…
阅读更多...
python 轮廓 获取环形区域

python 轮廓 获取环形区域

目录 效果图&#xff1a; 代码&#xff1a; 效果图&#xff1a; 代码&#xff1a; import cv2 import numpy as np# 读取图像 image cv2.imread(rE:\project\jijia\tools_jijia\img_tools\ground_mask.jpg, cv2.IMREAD_GRAYSCALE) # 二值化图像 # 二值化图像 _, binary cv…
阅读更多...
Python | 使用Matplotlib进行图案填充和边缘颜色分离的三种方法

Python | 使用Matplotlib进行图案填充和边缘颜色分离的三种方法

Matplotlib是Python中功能强大的绘图库&#xff0c;允许广泛的自定义选项。一个常见的要求是分离出图中的图案填充和边缘颜色。默认情况下&#xff0c;Matplotlib中的填充颜色与边缘颜色相关联&#xff0c;但有一些方法可以独立自定义这些颜色。本文将深入研究如何实现这一点的…
阅读更多...
最新文章

Copyright @ 2022~2023