基于HarmonyOS ArkUI实现音乐列表功能

本节将演示如何在基于HarmonyOS ArkUI的List组件来实现音乐列表功能。

本文涉及的所有源码,均可以在文末链接中找到。

活动主页

华为开发者论坛

规则要求具体要求如下:

  • 第1步:观看<HarmonyOS第一课>“营”在暑期•系列直播,一步步学会基于HarmonyOS最新版本的应用开发。
  • 第2步:基于自适应布局和响应式布局,实现一次开发,多端部署音乐专辑,并成功完成展现音乐列表页的实现。如图所示:

创建应用

选择空模板。

cke_206.png

创建名为ArkTSMusicPlayer的HarmonyOS应用。

cke_207.png

核心代码讲解

主页

主页Index.ets 分为三部分:头部、中部、底部。

cke_208.png

代码如下:

import { BreakpointConstants } from '../common/constants/BreakpointConstants';import { StyleConstants } from '../common/constants/StyleConstants';import { Content } from '../components/Content';
import { Header } from '../components/Header';
import { Player } from '../components/Player';@Entry
@Component
struct Index {@State currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;build() {Stack({ alignContent: Alignment.Top }) {// 头部Header({ currentBreakpoint: $currentBreakpoint })// 中部Content({ currentBreakpoint: $currentBreakpoint })// 底部Player({ currentBreakpoint: $currentBreakpoint })}.width(StyleConstants.FULL_WIDTH)}}复制

头部

头部Header.ets分为三部分:返回按钮、播放器名称、菜单。代码如下:

import router from '@ohos.router';
import { StyleConstants } from '../common/constants/StyleConstants';
import { HeaderConstants } from '../common/constants/HeaderConstants';
import { BreakpointType } from '../common/media/BreakpointSystem';@Preview
@Component
export struct Header {@Link currentBreakpoint: string;build() {Row() {// 返回按钮Image($r('app.media.ic_back')).width($r('app.float.icon_width')).height($r('app.float.icon_height')).margin({ left: $r('app.float.icon_margin') }).onClick(() => {router.back()})// 播放器名称Text($r('app.string.play_list')).fontSize(new BreakpointType({sm: $r('app.float.header_font_sm'),md: $r('app.float.header_font_md'),lg: $r('app.float.header_font_lg')}).getValue(this.currentBreakpoint)).fontWeight(HeaderConstants.TITLE_FONT_WEIGHT).fontColor($r('app.color.title_color')).opacity($r('app.float.title_opacity')).letterSpacing(HeaderConstants.LETTER_SPACING).padding({ left: $r('app.float.title_padding_left') })Blank()// 菜单Image($r('app.media.ic_more')).width($r('app.float.icon_width')).height($r('app.float.icon_height')).margin({ right: $r('app.float.icon_margin') })//.bindMenu(this.getMenu())}.width(StyleConstants.FULL_WIDTH).height($r('app.float.title_bar_height')).zIndex(HeaderConstants.Z_INDEX)}}复制

中部

头部Content.ets分为2部分:封面和歌曲列表。代码如下:

 

import { GridConstants } from '../common/constants/GridConstants';
import { StyleConstants } from '../common/constants/StyleConstants';
import { AlbumCover } from './AlbumCover';
import { PlayList } from './PlayList';@Preview
@Component
export struct Content {@Link currentBreakpoint: string;build() {GridRow() {// 封面GridCol({ span: { sm: GridConstants.SPAN_TWELVE, md: GridConstants.SPAN_SIX, lg: GridConstants.SPAN_FOUR } }) {AlbumCover({ currentBreakpoint: $currentBreakpoint })}.backgroundColor($r('app.color.album_background'))// 歌曲列表GridCol({ span: { sm: GridConstants.SPAN_TWELVE, md: GridConstants.SPAN_SIX, lg: GridConstants.SPAN_EIGHT } }) {PlayList({ currentBreakpoint: $currentBreakpoint })}.borderRadius($r('app.float.playlist_border_radius'))}.height(StyleConstants.FULL_HEIGHT).onBreakpointChange((breakpoints: string) => {this.currentBreakpoint = breakpoints;})}
}复制

其中,歌曲列表的核心是通过List组件实现的,核心代码如下:

build() {Column() {// 播放全部this.PlayAll()// 歌单列表List() {LazyForEach(new SongDataSource(this.songList), (item: SongItem, index: number) => {ListItem() {Column() {this.SongItem(item, index)}.padding({left: $r('app.float.list_item_padding'),right: $r('app.float.list_item_padding')})}}, (item, index) => JSON.stringify(item) + index)}.width(StyleConstants.FULL_WIDTH).backgroundColor(Color.White).margin({ top: $r('app.float.list_area_margin_top') }).lanes(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?ContentConstants.COL_TWO : ContentConstants.COL_ONE).layoutWeight(1).divider({color: $r('app.color.list_divider'),strokeWidth: $r('app.float.stroke_width'),startMargin: $r('app.float.list_item_padding'),endMargin: $r('app.float.list_item_padding')})}.padding({top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? 0 : $r('app.float.list_area_padding_top'),bottom: $r('app.float.list_area_padding_bottom')})}复制

底部

底部就是歌曲播放器了。代码如下:

import { SongItem } from '../common/bean/SongItem';
import { PlayerConstants } from '../common/constants/PlayerConstants';
import { StyleConstants } from '../common/constants/StyleConstants';
import { BreakpointType } from '../common/media/BreakpointSystem';
import { MusicList } from '../common/media/MusicList';@Preview
@Component
export struct Player {@StorageProp('selectIndex') selectIndex: number = 0;@StorageLink('isPlay') isPlay: boolean = false;songList: SongItem[] = MusicList;@Link currentBreakpoint: string;build() {Row() {Row() {Image(this.songList[this.selectIndex]?.label).height($r('app.float.cover_height')).width($r('app.float.cover_width')).borderRadius($r('app.float.label_border_radius')).margin({ right: $r('app.float.cover_margin') }).rotate({ angle: this.isPlay ? PlayerConstants.ROTATE : 0 }).animation({duration: PlayerConstants.ANIMATION_DURATION,iterations: PlayerConstants.ITERATIONS,curve: Curve.Linear})Column() {Text(this.songList[this.selectIndex].title).fontColor($r('app.color.song_name')).fontSize(new BreakpointType({sm: $r('app.float.song_title_sm'),md: $r('app.float.song_title_md'),lg: $r('app.float.song_title_lg')}).getValue(this.currentBreakpoint))Row() {Image($r('app.media.ic_vip')).height($r('app.float.vip_icon_height')).width($r('app.float.vip_icon_width')).margin({ right: $r('app.float.vip_icon_margin') })Text(this.songList[this.selectIndex].singer).fontColor($r('app.color.singer')).fontSize(new BreakpointType({sm: $r('app.float.singer_title_sm'),md: $r('app.float.singer_title_md'),lg: $r('app.float.singer_title_lg')}).getValue(this.currentBreakpoint)).opacity($r('app.float.singer_opacity'))}}.alignItems(HorizontalAlign.Start)}.layoutWeight(PlayerConstants.LAYOUT_WEIGHT_PLAYER_CONTROL)Blank()Row() {Image($r('app.media.ic_previous')).height($r('app.float.control_icon_height')).width($r('app.float.control_icon_width')).margin({ right: $r('app.float.control_icon_margin') }).displayPriority(PlayerConstants.DISPLAY_PRIORITY_TWO)Image(this.isPlay ? $r('app.media.ic_play') : $r('app.media.ic_pause')).height($r('app.float.control_icon_height')).width($r('app.float.control_icon_width')).displayPriority(PlayerConstants.DISPLAY_PRIORITY_THREE)Image($r('app.media.ic_next')).height($r('app.float.control_icon_height')).width($r('app.float.control_icon_width')).margin({right: $r('app.float.control_icon_margin'),left: $r('app.float.control_icon_margin')}).displayPriority(PlayerConstants.DISPLAY_PRIORITY_TWO)Image($r('app.media.ic_music_list')).height($r('app.float.control_icon_height')).width($r('app.float.control_icon_width')).displayPriority(PlayerConstants.DISPLAY_PRIORITY_ONE)}.width(new BreakpointType({sm: $r('app.float.play_width_sm'),md: $r('app.float.play_width_sm'),lg: $r('app.float.play_width_lg')}).getValue(this.currentBreakpoint)).justifyContent(FlexAlign.End)}.width(StyleConstants.FULL_WIDTH).height($r('app.float.player_area_height')).backgroundColor($r('app.color.player_background')).padding({left: $r('app.float.player_padding'),right: $r('app.float.player_padding')}).position({x: 0,y: StyleConstants.FULL_HEIGHT}).translate({x: 0,y: StyleConstants.TRANSLATE_PLAYER_Y})}
}复制

效果演示

这个是竖版效果。

cke_209.png

这个横板效果。

cke_210.png

基于自适应布局和响应式布局,实现一次开发,多端部署。

完整视频演示见:【老卫搬砖】039期:HarmonyOS ArkTS实现音乐播放器UI_哔哩哔哩_bilibili

music.gif

源码

见:GitHub - waylau/harmonyos-tutorial: HarmonyOS Tutorial. 《跟老卫学HarmonyOS开发》

学习更多HarmonyOS

作为开发者,及时投入HarmonyOS 4的学习是非常必要的。鸿蒙生态经历了艰难的四年,但轻舟已过万重山,目前已经慢慢走上了正轨,再现繁荣指日可待。

可以从HaromnyOS 官网(华为HarmonyOS智能终端操作系统官网 | 应用设备分布式开发者生态)了解到最新的HaromnyOS咨询以及开发指导。除此之外,笔者也整理了以下学习资料。

  • 华为开发者联盟:华为开发者论坛
  • 《跟老卫学HarmonyOS开发》 开源免费教程:GitHub - waylau/harmonyos-tutorial: HarmonyOS Tutorial. 《跟老卫学HarmonyOS开发》
  • 《鸿蒙HarmonyOS手机应用开发实战》(清华大学出版社)
  • 《鸿蒙HarmonyOS应用开发从入门到精通战》(北京大学出版社),
  • “鸿蒙系统实战短视频App 从0到1掌握HarmonyOS” :鸿蒙系统实战短视频App 从0到1掌握HarmonyOS_实战课程_慕课网

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

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

相关文章

RabbitMQ---订阅模型-Topic

订阅模型-Topic • Topic类型的Exchange与Direct相比&#xff0c;都是可以根据RoutingKey把消息路由到不同的队列。只不过Topic类型Exchange可以让队列在绑定Routing key 的时候使用通配符&#xff01; • Routingkey 一般都是有一个或多个单词组成&#xff0c;多个单词之间以…

c++的分文件编写

前言 在C中&#xff0c;你可以将代码分割成多个文件来提高可维护性和组织性。分割文件有助于将代码模块化&#xff0c;使大型项目更易于管理。以下是C中关于分文件的一些规则和概念&#xff1a; 理论知识 头文件&#xff08;Header Files&#xff09;&#xff1a; 头文件通常…

海外网红营销中的创新技术与趋势:AI、AR和VR的应用探索

随着全球数字化时代的不断发展&#xff0c;互联网已经成为连接人们的桥梁&#xff0c;而社交媒体则在其中扮演着举足轻重的角色。在这个全球性的社交媒体网络中&#xff0c;海外网红以其独特的个人魅力和内容创作能力迅速崭露头角。而为了在竞争激烈的市场中脱颖而出&#xff0…

在编辑器中使用正则

正则是一种文本处理工具&#xff0c;常见的功能有文本验证、文本提取、文本替换、文本切割等。有一些地方说的正则匹配&#xff0c;其实是包括了校验和提取两个功能。 校验常用于验证整个文本的组成是不是符合规则&#xff0c;比如密码规则校验。提取则是从大段的文本中抽取出…

php开发websocket笔记(1)

1.运行server1.php文件 Windows命令行运行 php server1.php<?phperror_reporting(E_ALL); set_time_limit(0); //ob_implicit_flush(); $address 0.0.0.0;//可以监听网络上的请求 $address 127.0.0.1;//只能监听本机的请求$port 10005; //创建端口 $socket1 socket_cr…

JVM7:垃圾回收是什么?从运行时数据区看垃圾回收到底回收哪块区域?垃圾回收如何去回收?垃圾回收策略,引用计数算法及循环引用问题,可达性分析算法

垃圾回收是什么&#xff1f;从运行时数据区看垃圾回收到底回收哪块区域&#xff1f; 垃圾回收如何去回收&#xff1f; 垃圾回收策略 引用计数算法及循环引用问题 可达性分析算法 垃圾回收是什么&#xff1f;从运行时数据区看垃圾回收到底回收哪块区域&#xff1f;垃圾回收如何去…

(java) 进程调度

目录 进程 首先我们要了解一下什么是进程&#xff1f; 那如何管理进程&#xff1f; PCB中比较重要的属性 进程调度 为什么要进行进程调度&#xff1f; 状态 优先级 上下文 拓展介绍一下寄存器 记账信息 进程 首先我们要了解一下什么是进程&#xff1f; 简单来说…

网络电子词典

一、项目要求&#xff1a; 1. 登录注册功能&#xff0c;不能重复登录&#xff0c;重复注册 2. 单词查询功能 3. 历史记录功能&#xff0c;存储单词&#xff0c;意思&#xff0c;以及查询时间 4. 基于TCP&#xff0c;支持多客户端连接 5. 采用数据库保存用户信息与历史记录…

java: 无法访问org.springframework.boot.SpringApplication 错误的类文件

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 错误1&#xff1a; java: 无法访问org.springframework.boot.SpringApplication 错误的类文件: /D:/Software/env-java/apache-maven-3.6.1/repository/org/springframework/boot/spring-boot/3.1.2/sp…

C#,《小白学程序》第四课:数学计算

1 文本格式 /// <summary> /// 《小白学程序》第四课&#xff1a;数学计算 /// 这节课超级简单&#xff0c;就是计算成绩的平均值&#xff08;平均分&#xff09; /// 这个是老师们经常做的一件事。 /// </summary> /// <param name"sender"></…

图片换脸-->>视频换脸-->>直播换脸

资源网站&#xff1a;https://tianfeng.space/ 个人娱乐&#xff0c;切勿作恶 下载 ​ 网盘&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1DHMY1mCXpT0OtpmlvIoMKA 提取码&#xff1a;nf57 使用 下载解压后&#xff0c;打开 第一个就是你要替换的人脸&#xff0c;…

MyCAT命令行监控

9066端口 &#xff0c;用mysql命令行连接 Mysql –utest –ptest –P9066 show help 可显示所有相关管理命令 显示后端物理库连接信息&#xff0c;包括当前连接数&#xff0c;端口 Show backend Show connection 显示当前前端客户端连接情况&#xff0c;已经网络流量信息、…

再见 Xshell替代工具Tabby

替代Xshell 之前经常使用Xshell来操作Linux虚拟机&#xff0c;基本上是够用了。但是Xshell免费使用只供非商业用途&#xff0c;而且如果你想用FTP来进行文件传输的话&#xff0c;还需单独下载Xftp。 无意中发现了另一款开源的终端工具Tabby&#xff0c;它直接集成了SFTP功能&…

Qt XML文件解析 QDomDocument

QtXml模块提供了一个读写XML文件的流&#xff0c;解析方法包含DOM和SAX,两者的区别是什么呢&#xff1f; DOM&#xff08;Document Object Model&#xff09;&#xff1a;将XML文件保存为树的形式&#xff0c;操作简单&#xff0c;便于访问。 SAX&#xff08;Simple API for …

渗透测试工具ZAP入门教程(1)-安装和快速开始

介绍 ZAP Zed Attack Proxy&#xff08;ZAP&#xff09;是一个免费的开源渗透测试工具&#xff0c;在 软件安全项目 &#xff08;SSP&#xff09;。ZAP 专为测试 Web 应用程序而设计&#xff0c;既灵活又可扩展。 ZAP的核心是所谓的“中间人代理”。它位于测试人员的浏览器和…

go学习-指针 标识符

指针&#xff0c;以及标识符 1.指针 &#xff08;1&#xff09;.基本介绍 1&#xff09;基本数据类型&#xff0c;变量存的值&#xff0c;也叫值类型 2&#xff09;获取变量的地址用&&#xff0c;比如 var num int ,获取num的地址&#xff1a;&num 3)指针类型&…

Yolo系列-yolov2

YOLO-V2 更快&#xff01;更强&#xff01; YOLO-V2-BatchNormalization BatchNormalization&#xff08;批归一化&#xff09;是一个常用的深度神经网络优化技术&#xff0c;它可以将输入数据进行归一化处理&#xff0c;使得神经网络更容易进行学习。在YOLOv2中&#xff0c;B…

promise

promise 属于事件循环的微任务&#xff0c;具体详见&#xff1a;事件循环 Promise 语法: const p1 new Promise((reslove,reject)>{console.log(2);reslove(1) }).then((data)>{console.log(3);console.log(data) }).catch((data)>{console.log(3); }) promise.th…

基于Milvus Cloud的相似穿搭推荐系统教程——图像分割

作为一个大众眼中的“非典型程序员”,我喜欢拥抱时尚和潮流,比如我经常在演讲时穿粉色裤子,这甚至已经成为一个标志性打扮。某天又逢主题演讲日,我站在衣柜前挑选上衣的时候,忽然灵光乍现:有没有可能借助 Milvus Cloud找到和我穿搭风格最为相似的明星呢? 这个想法在我脑…

Oracle给表空间添加容量

假如给SYSTEM表空间添加 查看文件位置和容量&#xff1a;Select * FROM DBA_DATA_FILES; FILE_NAME就是要修改的文件 查看每一个表空间的容量&#xff0c;单位MB&#xff1a; SELECT t.tablespace_name, round(SUM(bytes / (1024 * 1024)), 0) ts_size FROM dba_tablespaces…