基于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.mzph.cn/news/55809.shtml

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

相关文章

(WAF)Web应用程序防火墙介绍

&#xff08;WAF&#xff09;Web应用程序防火墙介绍 1. WAF概述 ​ Web应用程序防火墙&#xff08;WAF&#xff09;是一种关键的网络安全解决方案&#xff0c;用于保护Web应用程序免受各种网络攻击和威胁。随着互联网的不断发展&#xff0c;Web应用程序变得越来越复杂&#x…

使用 uniapp 适用于wx小程序 - 实现移动端头部的封装和调用

图例&#xff1a;红框区域&#xff0c;使其标题区与胶囊对齐 一、组件 navigation.vue <template><view class"nav_name"><view class"nav-title" :style"{color : props.color, padding-top : toprpx,background : props.bgColor,he…

【字节跳动青训营】后端笔记整理-4 | Go框架三件套之GORM的使用

**本人是第六届字节跳动青训营&#xff08;后端组&#xff09;的成员。本文由博主本人整理自该营的日常学习实践&#xff0c;首发于稀土掘金。 我的go开发环境&#xff1a; *本地IDE&#xff1a;GoLand 2023.1.2 *go&#xff1a;1.20.6 *MySQL&#xff1a;8.0 本文介绍Go框架三…

【Java 高阶】一文精通 Spring MVC - 数据验证(七)

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…

iOS 如何对整张图分别局部磨砂,并完全贴合

官方磨砂方式 - (UIVisualEffectView *)effectView{if(!_effectView){UIBlurEffect *blur [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];_effectView [[UIVisualEffectView alloc] initWithEffect:blur];}return _effectView; }使用这种方式对一张图的上半部分和…

Nacos 注册中心的使用(单体)

环境 springboot springcloud Nacos注册中心服务端 下载windows版或Linux版&#xff1a;https://nacos.io/zh-cn 目录结构&#xff1a; 配置文件./config/application.properties 启动文件./bin/startup.cmd&#xff1a; cmd命令启动单机服务startup.cmd -m standalone 父…

dig批量域名逆向查询ip

dig批量域名逆向查询ip dig nocmd noall answer -f iplist.txtiplist.txt中内容 效果图&#xff1a; dig其他选项参数&#xff1a; dig www.baidu.com A # 查询A记录&#xff0c;如果域名后面不加任何参数&#xff0c;默认查询A记录 dig www.baidu.com MX # 查询MX记…

云服务器 宝塔(每次更新)

su root 输入密码 使用 root 权限 /etc/init.d/bt default 获取宝塔登录 位置和账号密码。进入宝塔 删除数据库 删除php前端站点 删除PM2后端项目 前端更改完配置打包dist文件 后端更改完配置项目打包 数据库结构导出 导入数据库 配置 PM2 后端 安装依赖

言有三新书出版,《深度学习之图像识别(全彩版)》上市发行,配套超详细的原理讲解与丰富的实战案例!...

各位同学&#xff0c;今天有三来发布新书了&#xff0c;名为《深度学习之图像识别&#xff1a;核心算法与实战案例&#xff08;全彩版&#xff09;》&#xff0c;本次书籍为我写作并出版的第6本书籍。 前言 2019年5月份我写作了《深度学习之图像识别&#xff1a;核心技术与案例…

Spring框架

一.简介 Spring 是 2003 年兴起,通过使用IOC 和 AOP 组成的轻量级的为解决企业级开发的Java开发框架 官网:Spring | Home 特点: 1.轻量级:资源jar包少,运行时框架占用资源少,效率更高 2.IOC(Inversion of Control),由Spring容器来对对象实行管理 3.AOP(面相切面的编程)是…

华为eNSP模拟器中,路由器如何添加serial接口

在ensp模拟器中新建拓扑后&#xff0c;添加2个路由器。 在路由器图标上单击鼠标右键&#xff0c;选择设置选项。 在【视图】选项卡的【eNSP支持的接口卡】窗口查找serial接口卡。 选择2SA接口卡&#xff0c;将其拖动到路由器空置的卡槽位。 如上图所示&#xff0c;已经完成路由…

【C++】map的奇葩用法:和函数结合

2023年8月26日&#xff0c;周六下午 今天才发现map居然还能这样用... #include <iostream> #include <map> #include <functional>void printOne() {std::cout << "已经打印出1" << std::endl; }void printTwo() {std::cout <<…

2023年03月 C/C++(四级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题:最佳路径 如下所示的由正整数数字构成的三角形: 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 从三角形的顶部到底部有很多条不同的路径。对于每条路径,把路径上面的数加起来可以得到一个和,和最大的路径称为最佳路径。你的任务就是求出最佳路径上的数字之和。 注意:路径上的每一步…

Go语言入门记录:从基础到变量、函数、控制语句、包引用、interface、panic、go协程、Channel、sync下的waitGroup和Once等

程序入口文件的包名必须是main&#xff0c;但主程序文件所在文件夹名称不必须是main&#xff0c;即我们下图hello_world.go在main中&#xff0c;所以感觉package main写顺理成章&#xff0c;但是如果我们把main目录名称改成随便的名字如filename也是可以运行的&#xff0c;所以…

AI创作助手:介绍 TensorFlow 的基本概念和使用场景

目录 背景 环境测试 入门示例 背景 TensorFlow 是一个强大的开源框架&#xff0c;用于实现深度学习和人工智能模型。它最初由 Google 开发&#xff0c;现在已经成为广泛使用的机器学习框架之一。 TensorFlow 简单来说就是一个用于创建和运行机器学习模型的库。它的核心概念…

Vue2向Vue3过度核心技术路由

目录 1 路由介绍1.思考2.路由的介绍3.总结 2 路由的基本使用1.目标2.作用3.说明4.官网5.VueRouter的使用&#xff08;52&#xff09;6.代码示例7.两个核心步骤8.总结 3 组件的存放目录问题1.组件分类2.存放目录3.总结 4 路由的封装抽离5 Vue路由-重定向1.问题2.解决方案3.语法4…

(vue)el-table 怎么把表格列中相同的数据 合并为一行

(vue)el-table 怎么把表格列中相同的数据 合并为一行 效果&#xff1a; 文档解释&#xff1a; 写法&#xff1a; <el-table:data"tableData"size"mini"class"table-class"borderstyle"width:100%"max-height"760":span-…

【集合学习ConcurrentHashMap】ConcurrentHashMap集合学习

ConcurrentHashMap集合学习 一、JDK1.7 和 1.8 版本ConcurrenHashMap对比分析 JDK 1.7版本 在JDK 1.7版本ConcurrentHashMap使用了分段锁的方式&#xff08;对Segment进行加锁&#xff09;&#xff0c;其实际结构为&#xff1a;Segment数组 HashEntry数组 链表。由很多个 …

Shiro认证框架

目录 概述 认证授权及鉴权 Shiro框架的核心组件 基本流程 spring bootshiromybatisPlus...实现用户登录 step1:准备工作 (1)坐标 (2)连接数据库 (3)JavaBean (4)dao数据访问层 (5)密码工具类 DigestsUtil (6)配置类 step2&#xff1a;认证功能 step3:授权鉴权 概述…