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.isToggleif (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 paramsLog.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.datathis.description = this.detailData.summarythis.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.isToggleif (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/

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Vulnhub DC-8靶机攻击实战(一)

Vulnhub DC-8靶机攻击实战(一)

导语   Vulnhub DC-8靶机教程来了，好久没有更新打靶的教程了，这次我们在来更新一期关于Vulnhub DC-8的打靶训练，如下所示。 安装并且启动靶机 安装并且启动靶机，如下所示。 开始信息采集 进入到Kali中，通过如下的命令来查找到靶机的IP地址。 arp-scan -l根据上面的结…
阅读更多...
神经网络基础-正则化方法

神经网络基础-正则化方法

文章目录 1. 什么是正则化2. 正则化方法2.1 Dropout正则化2.2 批量归一化(BN层) 学习目标&#xff1a; 知道正则化的作用掌握随机失活 DropOut 策略知道 BN 层的作用 1. 什么是正则化 在设计机器学习算法时希望在新样本上的泛化能力强。许多机器学习算法都采用相关的策略来减小…
阅读更多...
【Linux】12.Linux进程概念（1）

【Linux】12.Linux进程概念（1）

文章目录 1. 冯诺依曼体系结构2. 操作系统(Operator System)概念设计OS的目的胆小的操作系统定位如何理解 "管理"总结 3. 进程基本概念task_struct-PCB的一种task_ struct内容分类组织进程查看进程通过系统调用获取进程标示符通过系统调用创建进程-fork初识 1. 冯诺依…
阅读更多...
【Linux网络编程】序列化与反序列化

【Linux网络编程】序列化与反序列化

目录 一&#xff0c;序列化和反序列化的说明 二&#xff0c;Jsoncpp库的介绍 三&#xff0c;Jsoncpp库的使用 3-1&#xff0c;Json::Value类 3-2&#xff0c;Json::StreamWriter类 3-3&#xff0c;Json::CharReader类 一&#xff0c;序列化和反序列化的说明 序列化与反…
阅读更多...
Oracle报错ORA-01078、LRM-00109

Oracle报错ORA-01078、LRM-00109

虚拟机异常关机后&#xff0c;rac数据库备机无法启动数据库&#xff0c;报错如下 解决方法&#xff1a; 找到如下路径文件 执行&#xff1a; cp init.ora.016202516818 /u01/app/oracle/product/19.3.0/db/dbs/ mv init.ora.016202516818 initplm2.ora 再次进入命令行sqlpl…
阅读更多...
STM32-keil安装时遇到的一些问题以及解决方案

STM32-keil安装时遇到的一些问题以及解决方案

前言&#xff1a; 本人项目需要使用到STM32,故需配置keil 5&#xff0c;在配置时遇到了以下问题&#xff0c;并找到相应的解决方案&#xff0c;希望能够为遇到相同问题的道友提供一些解决思路 1、提示缺少&#xff08;missing&#xff09;version 5编译器 step1&#xff1a;找…
阅读更多...
【Hive】海量数据存储利器之Hive库原理初探

【Hive】海量数据存储利器之Hive库原理初探

文章目录 一、背景二、数据仓库2.1 数据仓库概念2.2 数据仓库分层架构2.2.1 数仓分层思想和标准2.2.2 阿里巴巴数仓3层架构2.2.3 ETL和ELT2.2.4 为什么要分层 2.3 数据仓库特征2.3.1 面向主题性2.3.2 集成性2.3.3 非易失性2.3.4 时变性 三、hive库3.1 hive概述3.2 hive架构3.2.…
阅读更多...
mqtt详细介绍及集成到springboot

mqtt详细介绍及集成到springboot

mqtt详细介绍及集成到springboot 1.mqtt发布/订阅消息参数详细介绍2. mqtt客户端连接参数介绍3. docker-compose搭建mqtt服务端4. springboot集成mqtt实现发布订阅5. 测试注意事项 1.mqtt发布/订阅消息参数详细介绍 1.1. qosQoS0 &#xff0c;Sender 发送的一条消息&#xff0…
阅读更多...
基于springboot的租房网站系统

基于springboot的租房网站系统

作者&#xff1a;学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等 文末获取“源码数据库万字文档PPT”&#xff0c;支持远程部署调试、运行安装。 项目包含&#xff1a; 完整源码数据库功能演示视频万字文档PPT 项目编码&#xff1…
阅读更多...
自动化办公|xlwings简介

自动化办公|xlwings简介

xlwings 是一个开源的 Python 库&#xff0c;旨在实现 Python 与 Microsoft Excel 的无缝集成。它允许用户使用 Python 脚本自动化 Excel 操作&#xff0c;读取和写入数据&#xff0c;执行宏&#xff0c;甚至调用 VBA 脚本。这使得数据分析、报告生成和其他与 Excel 相关的任务…
阅读更多...
概率函数,累计分布函数

概率函数,累计分布函数

四. 累计分布函数 1. 累计分布函数&#xff08;CDF, Cumulative Distribution Function&#xff09; 累计分布函数是用来描述随机变量取值小于或等于某个给定值的概率。它适用于离散型和连续型随机变量&#xff0c;并且能够通过概率质量函数&#xff08;PMF&#xff09;或概率…
阅读更多...
Flutter项目适配鸿蒙

Flutter项目适配鸿蒙

Flutter项目适配鸿蒙 前言Flutter项目适配鸿蒙新工程直接支持ohos构建新项目编译运行 适配已有的Flutter项目 前言 目前市面上使用Flutter技术站的app不在少数&#xff0c;对于Flutter的项目&#xff0c;可能更多的是想直接兼容Harmonyos&#xff0c;而不是直接在重新开发一个…
阅读更多...
链家房价数据爬虫和机器学习数据可视化预测

链家房价数据爬虫和机器学习数据可视化预测

完整源码项目包获取→点击文章末尾名片&#xff01;
阅读更多...
【20250113】基于肌肉形变测量的连续步态相位估计算法，可自适应步行速度和地形坡度...

【20250113】基于肌肉形变测量的连续步态相位估计算法，可自适应步行速度和地形坡度...

【基本信息】 论文标题&#xff1a;Continuous Gait Phase Estimation by Muscle Deformations with Speed and Ramp Adaptability 发表期刊&#xff1a;IEEE Sensors Journal 发表时间&#xff1a;2024年5月30日 【访问链接】 论文链接&#xff1a;https://ieeexplore.ieee.or…
阅读更多...
【全套】基于分类算法的学业警示预测信息管理系统

【全套】基于分类算法的学业警示预测信息管理系统

【全套】基于分类算法的学业警示预测信息管理系统 【摘 要】 随着网络技术的发展基于分类算法的学业警示预测信息管理系统是一种新的管理方式&#xff0c;同时也是现代学业预测信息管理的基础&#xff0c;利用互联网的时代与实际情况相结合来改变过去传统的学业预测信息管理中…
阅读更多...
小程序组件 —— 31 事件系统 - 事件绑定和事件对象

小程序组件 —— 31 事件系统 - 事件绑定和事件对象

小程序中绑定事件和网页开发中绑定事件几乎一致&#xff0c;只不过在小程序不能通过 on 的方式绑定事件&#xff0c;也没有 click 等事件&#xff0c;小程序中绑定事件使用 bind 方法&#xff0c;click 事件也需要使用 tap 事件来进行代替&#xff0c;绑定事件的方式有两种&…
阅读更多...
邮箱发送验证码（nodemailer）

邮箱发送验证码（nodemailer）

邮箱发送验证码 打开SMTP 服务使用 Node.js 邮件发送模块&#xff08;nodemailer&#xff09;封装验证码组件 开发中经常会遇到需要验证码&#xff0c;不过手机验证码需要money&#xff0c;不到必要就不必花费&#xff0c;所以可以使用邮箱发送验证码 打开SMTP 服务 根据自己想…
阅读更多...
AV1视频编解码简介、码流结构(OBU)

AV1视频编解码简介、码流结构(OBU)

我的音视频/流媒体开源项目(github) 目录 一、AV1编码技术 二、AV1码流结构(OBU) 三、IVF文件格式 四、ffmpeg支持AV1 五、关于常见格式对AV1的封装 一、AV1编码技术 AV1是由开放媒体联盟(AOM&#xff0c;Alliance for Open Media)在2018年发布的&#xff0c;AV1的前身…
阅读更多...
Sentaurus TCAD学习笔记：transform指令

Sentaurus TCAD学习笔记：transform指令

目录 一、transform指令简介二、transform指令的实现1.cut指令2.flip指令3.rotate指令4.stretch指令5.translate指令6.reflect指令 三、transform指令示例 一、transform指令简介 在Sentaurus中&#xff0c;如果需要对器件进行翻转、平移等操作&#xff0c;可以通过transform指…
阅读更多...
kafka消费堆积问题探索

kafka消费堆积问题探索

背景 我们的商城项目用PHP写的&#xff0c;原本写日志方案用的是PHP的方案&#xff0c;但是&#xff0c;这个方案导致资源消耗一直降不下来&#xff0c;使用了20个CPU。后面考虑使用通过kafka的方案写日志&#xff0c;商城中把产生的日志丢到kafka中&#xff0c;在以go写的项目…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023