当前位置: 首页 > news >正文

基于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_实战课程_慕课网

相关文章:

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

本节将演示如何在基于HarmonyOS ArkUI的List组件来实现音乐列表功能。 本文涉及的所有源码&#xff0c;均可以在文末链接中找到。 活动主页 华为开发者论坛 规则要求具体要求如下&#xff1a; 第1步&#xff1a;观看<HarmonyOS第一课>“营”在暑期•系列直播&#x…...

Android系统启动流程 源码解析

Android系统启动流程 本文链接&#xff1a;https://blog.csdn.net/feather_wch/article/details/132518105 有道云脑图&#xff1a;https://note.youdao.com/s/GZ9d8vzO 1、整体流程 Boot RoomBootLoaderidle kthreadinit init ServiceManagerzygote zygote SystemServerap…...

【头歌】构建哈夫曼树及编码

构建哈夫曼树及编码 第1关:构建哈夫曼树 任务描述 本关任务:构建哈夫曼树,从键盘读入字符个数n及这n个字符出现的频率即权值,构造带权路径最短的最优二叉树(哈夫曼树)。 相关知识 哈夫曼树的定义 设二叉树具有n个带权值的叶子结点{w1,w2,...,wn},从根结点到每个叶…...

创建本地镜像

通过前面文章的阅读&#xff0c;读者已经了解到所谓的容器实际上是在父镜像的基础上创建了一个可读写的文件层级&#xff0c;所有的修改操作都在这个文件层级上进行&#xff0c;而父镜像并未受影响&#xff0c;如果读者需要根据这种修改创建一个新的本地镜像&#xff0c;有两种…...

网络编程套接字(2): 简单的UDP网络程序

文章目录 网络编程套接字(2): 简单的UDP网络程序3. 简单的UDP网络程序3.1 服务端创建(1) 创建套接字(2) 绑定端口号(3) sockaddr_in结构体(4) 数据的接收与发送接收发送 3.2 客户端创建3.3 代码编写(1) v1_简单发送消息(2) v2_小写转大写(3) v3_模拟命令行解释器(4) v4_多线程版…...

Android Mvvm设计模式的详解与实战教程

一、介绍 在开发设计模式中&#xff0c;模式经历了多次迭代&#xff0c;从MVC到MVP&#xff0c;再到如今的MVVM。发现的过程其实很简单&#xff0c;就是为了项目更好的管理。 设计模式严格来说属于软件工程的范畴&#xff0c;但是如今在各大面试中或者开发中&#xff0c;设计模…...

软考A计划-系统集成项目管理工程师-小抄手册(共25章节)-下

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…...

渗透测试是什么?怎么做?

渗透测试报告 一、什么是渗透测试&#xff1f; 渗透测试是可以帮助用户对目前自己的网络、系统、应用的缺陷有相对直观的认识和了解。渗透测试尽可能地以黑客视角对用户网络安全性进行检查&#xff0c;对目标网络、系统和应用的安全性作深入的探测&#xff0c;发现系统最脆弱的…...

【软件安装】Python安装详细教程(附安装包)

软件简介 Python由荷兰数学和计算机科学研究学会的Guido van Rossum 于1990 年代初设计&#xff0c;作为一门叫做ABC语言的替代品。Python提供了高效的高级数据结构&#xff0c;还能简单有效地面向对象编程。Python语法和动态类型&#xff0c;以及解释型语言的本质&#xff0c…...

微信小程序的form表单提交

获取input有两种方法&#xff1a; 第一&#xff1a;bindsubmit方法 注意&#xff1a; 1.使用form里面定义bindsubmit事件 2.bindsubmit事件需要配合button里面定义的formType“submit” 操作 3.设置input的name值来获取对应的数据 <form bindsubmit"formSubmit"…...

WOFOST模型与PCSE模型应用

实现作物产量的准确估算对于农田生态系统响应全球变化、可持续发展、科学粮食政策制定、粮食安全维护都至关重要。传统的经验模型、光能利用率模型等估产模型原理简单&#xff0c;数据容易获取&#xff0c;但是作物生长发育非常复杂&#xff0c;中间涉及众多生理生化过程&#…...

5-W806-RC522-SPI

main.c #include <stdio.h> #include "wm_hal.h" #include "rc522.h"int main(void) {SystemClock_Config(CPU_CLK_160M);printf("enter main\r\n");HAL_Init();RC522_Init();PcdReset();M500PcdConfigISOType ( A );//设置工作方式IC_te…...

Python实现自动登录+获取数据

前言 Dy这个东西想必大家都用过&#xff0c;而且还经常刷&#xff0c;今天就来用代码&#xff0c;获取它的视频数据 环境使用 Python 3.8 Pycharm 模块使用 requests selenium json re 一. 数据来源分析 1. 明确需求 明确采集网站以及数据内容 网址: https://www.dy.co…...

yolov8热力图可视化

安装pytorch_grad_cam pip install grad-cam自动化生成不同层的bash脚本 # 循环10次&#xff0c;将i的值从0到9 for i in $(seq 0 13) doecho "Running iteration $i";python yolov8_heatmap.py $i; done热力图生成python代码 import warnings warnings.filterwarn…...

【SpringBoot】第一篇:redis使用

背景&#xff1a; 本文是教初学者如何正确使用和接入redis。 一、引入依赖 <!--redis--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><depen…...

Springboot profile多环境配置

1. 前言 profile用于多环境的激活和配置&#xff0c;用来切换生产&#xff0c;测试&#xff0c;本地等多套不通环境的配置。如果每次去更改配置就非常麻烦&#xff0c;profile就是用来切换多环境配置的。 2. 配置方法 三种方式。 2.1 多profile文件方式 在resource目录下新…...

(1)进程与线程区别

1.什么是线程、进程 进程&#xff1a;操作系统资源分配的基本单位线程&#xff1a;处理器任务调度和执行的基本单位。 一个进程至少有一个线程&#xff0c;线程是进程的一部分&#xff0c;所以线程也被称为轻权进程或者轻量级进程。 2.并行与并发 一个基本的事实前提&#x…...

学习JAVA打卡第四十天

对象的字符串表示 在此类中我们讲过&#xff0c;所有的类都默认是java.lang包中object类的子类或间接子类。 Object类有一个public String toString&#xff08;&#xff09;方法,一个对象通过调用该方法可以获得该对象的字符串表示。一个对象调用toString法&#xff08;&…...

【跟小嘉学 Rust 编程】十四、关于 Cargo 和 Crates.io

系列文章目录 【跟小嘉学 Rust 编程】一、Rust 编程基础 【跟小嘉学 Rust 编程】二、Rust 包管理工具使用 【跟小嘉学 Rust 编程】三、Rust 的基本程序概念 【跟小嘉学 Rust 编程】四、理解 Rust 的所有权概念 【跟小嘉学 Rust 编程】五、使用结构体关联结构化数据 【跟小嘉学…...

防关联指纹浏览器:高效地管理你的Facebook账户

Facebook&#xff0c;作为全球最受欢迎社交平台的第一名已经成为我们日常和工作中不可或缺的一部分了。不管是用于日常分享、媒体营销、还是店铺运营&#xff0c;Facebook都占据着重要的位置。多个Facebook账户的优势非常明显&#xff0c;然而&#xff0c;当你需要同时管理他们…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...