📢 重磅福利！参与活动赢好礼，马克杯、鼠标垫、贴纸、8月1日-12月31日等你来！
点击链接：   华为开发者学堂

简介

本文档为影音娱乐类HarmonyOS应用的架构设计实践，提供影音娱乐类应用常见的音频播控、音频文件管理、播放记录、收藏等功能，帮助开发者快速构建一款影音娱乐类应用。

  • Stage开发模型+声明式UI开发范式。
  • 按照应用设备形态，规划一个手机设备Entry类型HAP包。
  • 本实践性能优先，应用程序包大小可控，且无单独加载模块场景，业务模块包类型采用HAR包。
  • 本实践侧重音频娱乐行业。

应用布局

说明

实践应用框架代码运行图，开发者可以基于框架代码替换相关资源文件，以保证应用良好的使用体验。

  • 应用首页采用常见页面导航布局。
  • 首页导航包含“推荐”、“发现”、“喜欢”、“动态”和“我的”五个功能入口，分别对应五个功能模块，额外有一个“播放”模块（模块划分详见本实践软件视图）。

应用架构设计

模块划分

根据行业应用的功能，按照高内聚，低耦合的原则，常见影音娱乐类应用功能以及职责划分模块如下，开发者在实际设计过程中，可以根据模块的复杂程度实际情况再进一步细分：

表1 模块划分

模块名称

功能点

推荐

每日热门歌曲推荐

发现

应用官方排行榜

喜欢

收藏的喜欢歌曲列表

动态

音乐评论和分享

我的

个人信息

播放

音乐播放

软件视图设计

应用分层模块类型划分指导，参见分层模块化实践。

产品定制层：本应用只涉及手机端，设计为一个HAP，包含页面框架、导航、手机独有资源等。

基础特性层：将“推荐”、“音频文件管理”、“发现”、“喜欢”、“动态”、“我的”、“播放” 等功能模块打包为HAR包被上层产品组件引用。

公共能力层：将“文件管理”、“网络交互”、“DFX”等基础公共模块打包为HAR包被上层业务组件引用。

组件间依赖说明：上层组件可依赖下层，不建议跨层依赖、反向依赖、横向依赖。

图1 软件视图

逻辑视图设计

根据本应用功能的模块以及依赖，分解对基础服务以及三方的依赖，逻辑视图如下：

图2 逻辑视图

公共关键技术方案

介绍行业应用通用的公共关键技术，详见 公共关键技术方案。

行业关键技术方案

音频播控技术方案

功能设计

提供音频文件的播放、暂停、跳转、停止等能力，支持后台、锁屏播放。页面路径：首页->音频播放，如下图所示：

图3 音频播放功能

方案设计

  • 使用Media Kit（媒体服务）实现音频播放功能，实现播放、暂停、跳转、停止能力。
  • 使用AVSession Kit（音视频播控服务），实现后台播放或熄屏播放。

代码参考

代码参见音乐播放暂停实现。

播放历史、收藏技术方案

功能设计

提供播放历史查看、清空，歌曲收藏、取消收藏能力；数据在端侧本地存储闭环。页面路径：首页->播放历史/收藏，如下图所示：

图4 音频播放功能

方案设计

  • 使用ArkData（方舟数据管理）关系型数据库实现本地数据的存储管理。
  • 用户行为数据属于个人敏感数据，数据库开启加密保护。

代码参考

代码参见播放历史和收藏。

应用框架代码

说明

本篇代码非应用的全量代码，只包括应用的部分框架代码。

框架代码中登录验证，只是UI演示。

代码运行环境

软件要求

  • DevEco Studio版本：DevEco Studio 5.0.1 Release及以上。
  • HarmonyOS SDK版本：HarmonyOS 5.0.1 Release SDK及以上。

硬件要求

  • 设备类型：华为手机。
  • HarmonyOS系统：HarmonyOS 5.0.1 Release及以上。

环境搭建

历史工程迁移

开发者使用HarmonyOS 5.0.1 Release及以上版本导入代码，使用一体化的历史工程迁移能力，帮助开发者快速完成工程转换。

代码结构解读

本篇代码非应用的全量代码，只包括脱敏后的应用框架代码，开发者可以通过链接下载全量的框架代码。



    
 
  1. entry/src/main/ets/
    2. 
 
  2. ├── components
    3. 
 
  3. │ └── PlayerNav.ets // 播放栏样式
    4. 
 
  4. ├── constants
    5. 
 
  5. │ ├── EventConstants.ets // 自定义事件名称
    6. 
 
  6. │ ├── Index.ets // SONG_KEY常量
    7. 
 
  7. │ └── MusicConstants.ets // 歌单、评论等数据
    8. 
 
  8. ├── entryability
    9. 
 
  9. │ └── EntryAbility.ets
    10. 
 
  10. ├── entryformability
    11. 
 
  11. │ └── EntryFormAbility.ets
    12. 
 
  12. ├── models
    13. 
 
  13. │ ├── Index.ets // 导航栏结构
    14. 
 
  14. │ ├── Music.ets // 音乐结构
    15. 
 
  15. │ └── PlayState.ets // 传输数据的结构
    16. 
 
  16. ├── pages
    17. 
 
  17. │ ├── find
    18. 
 
  18. │ │ └── Find.ets // “发现”页
    19. 
 
  19. │ ├── mine
    20. 
 
  20. │ │ └── Mine.ets // “我的”页
    21. 
 
  21. │ ├── moment
    22. 
 
  22. │ │ └── Moment.ets // “动态”页
    23. 
 
  23. │ ├── play
    24. 
 
  24. │ │ └── Play.ets // 音乐播放页
    25. 
 
  25. │ ├── recommend
    26. 
 
  26. │ │ └── Recommend.ets // "推荐"页
    27. 
 
  27. │ ├── like
    28. 
 
  28. │ │ └── Like.ets // 喜欢页
    29. 
 
  29. │ └── Index.ets // 下导航栏、背景设置
    30. 
 
  30. └── utils
    31. 
 
  31. ├── AVPlayerManager.ets // 播放器创建
    32. 
 
  32. ├── AVSessionManager.ets // 媒体会话
    33. 
 
  33. ├── ImageSave.ets // 图片保存
    34. 
 
  34. └── SongManager.ets // 歌曲管理
    35. 



音乐播放暂停实现




    
 
  1. // entry/src/main/ets/utils/AVPlayerManager.ets
    2. 
 
  2. // 单歌播放
    3. 
 
  3. static async singlePlay(song: songItemType) {
    4. 
 
  4. AVPlayerManager.startBackgroundTask()
    5. 
 
  5. // 添加到播放列表中，再进行播放
    6. 
 
  6. const isList = AVPlayerManager.currentSong.playList.some(
    7. 
 
  7. (item: songItemType) => item.id === song.id
    8. 
 
  8. )
    9. 
 
  9. if (isList) {
    10. 
 
  10. // 是不是正在播放的
    11. 
 
  11. if (AVPlayerManager.player!.url === song.url) {
    12. 
 
  12. // 重新播放（切换当前播放索引的歌曲）
    13. 
 
  13. AVPlayerManager.player?.play()
    14. 
 
  14. AVPlayerManager.currentSong.isPlay = true
    15. 
 
  15. } else {
    16. 
 
  16. // 切换歌曲（更新播放索引切换歌曲）
    17. 
 
  17. AVPlayerManager.currentSong.playIndex =
    18. 
 
  18. AVPlayerManager.currentSong.playList.findIndex(
    19. 
 
  19. (item: songItemType) => item.id === song.id
    20. 
 
  20. )
    21. 
 
  21. AVPlayerManager.changePlay()
    22. 
 
  22. }
    23. 
 
  23. } else {
    24. 
 
  24. AVPlayerManager.currentSong.playList.unshift(song)
    25. 
 
  25. AVPlayerManager.currentSong.playIndex = 0
    26. 
 
  26. AVPlayerManager.changePlay()
    27. 
 
  27. }
    28. 
 
  28. AppStorage.setOrCreate<PlayStateType>(SONG_KEY, AVPlayerManager.currentSong) // 更新全局状态
    29. 
 
  29. AVSessionManager.setAVPlaybackState() // 更新状态
    30. 
 
  30. }
    31. 
 
  31. 
 
  32. // 暂停播放
    33. 
 
  33. static pause() {
    34. 
 
  34. AVPlayerManager.player!.pause()
    35. 
 
  35. // 更新播放器状态
    36. 
 
  36. AVPlayerManager.currentSong.isPlay = false
    37. 
 
  37. AVSessionManager.setAVPlaybackState() // 更新状态
    38. 
 
  38. }
    39. 
 
  39. 
 
  40. // 上一首
    41. 
 
  41. static prevPlay() {
    42. 
 
  42. // 如果是随机播放
    43. 
 
  43. if (AVPlayerManager.currentSong.playMode === "random" && AVPlayerManager.currentSong.playList.length > 1) {
    44. 
 
  44. let index = -1
    45. 
 
  45. do {
    46. 
 
  46. index = Math.floor(Math.random() * AVPlayerManager.currentSong.playList.length)
    47. 
 
  47. } while (index === AVPlayerManager.currentSong.playIndex)
    48. 
 
  48. AVPlayerManager.currentSong.playIndex = index
    49. 
 
  49. } else {
    50. 
 
  50. AVPlayerManager.currentSong.playIndex--
    51. 
 
  51. // 有可能减到负数
    52. 
 
  52. AVPlayerManager.currentSong.playIndex =
    53. 
 
  53. (AVPlayerManager.currentSong.playIndex + AVPlayerManager.currentSong.playList.length) %
    54. 
 
  54. AVPlayerManager.currentSong.playList.length
    55. 
 
  55. }
    56. 
 
  56. AVPlayerManager.singlePlay(AVPlayerManager.currentSong.playList[AVPlayerManager.currentSong.playIndex])
    57. 
 
  57. }
    58. 
 
  58. 
 
  59. // 下一首
    60. 
 
  60. static nextPlay(repeat?: boolean) {
    61. 
 
  61. if (!AVPlayerManager.currentSong.playList.length) {
    62. 
 
  62. return
    63. 
 
  63. }
    64. 
 
  64. if (!repeat) {
    65. 
 
  65. if (AVPlayerManager.currentSong.playMode === "random" && AVPlayerManager.currentSong.playList.length > 1) {
    66. 
 
  66. let index = 0
    67. 
 
  67. do {
    68. 
 
  68. index = Math.floor(Math.random() * AVPlayerManager.currentSong.playList.length)
    69. 
 
  69. } while (index === AVPlayerManager.currentSong.playIndex)
    70. 
 
  70. AVPlayerManager.currentSong.playIndex = index
    71. 
 
  71. } else {
    72. 
 
  72. AVPlayerManager.currentSong.playIndex++
    73. 
 
  73. // 有可能减到负数
    74. 
 
  74. AVPlayerManager.currentSong.playIndex =
    75. 
 
  75. (AVPlayerManager.currentSong.playIndex + AVPlayerManager.currentSong.playList.length) %
    76. 
 
  76. AVPlayerManager.currentSong.playList.length
    77. 
 
  77. }
    78. 
 
  78. }
    79. 
 
  79. AVPlayerManager.singlePlay(AVPlayerManager.currentSong.playList[AVPlayerManager.currentSong.playIndex])
    80. 
 
  80. }
    81. 



音乐后台播放实现




    
 
  1. // entry/src/main/ets/utils/AVPlayerManager.ets
    2. 
 
  2. static async startBackgroundTask() {
    3. 
 
  3. if (AVSessionManager.session.sessionId) {
    4. 
 
  4. // 如果有会话，则不用开启后台任务
    5. 
 
  5. return
    6. 
 
  6. }
    7. 
 
  7. try {
    8. 
 
  8. let wantAgentInfo: wantAgent.WantAgentInfo = {
    9. 
 
  9. wants: [
    10. 
 
  10. {
    11. 
 
  11. bundleName: "com.example.mymusic",
    12. 
 
  12. abilityName: "com.example.mymusic.EntryAbility"
    13. 
 
  13. }
    14. 
 
  14. ],
    15. 
 
  15. actionType: wantAgent.OperationType.START_ABILITY,
    16. 
 
  16. requestCode: 0,
    17. 
 
  17. wantAgentFlags: [wantAgent.WantAgentFlags.UPDATE_PRESENT_FLAG]
    18. 
 
  18. };
    19. 
 
  19. const want = await wantAgent.getWantAgent(wantAgentInfo)
    20. 
 
  20. await backgroundTaskManager.startBackgroundRunning(
    21. 
 
  21. getContext(),
    22. 
 
  22. backgroundTaskManager.BackgroundMode.AUDIO_PLAYBACK,
    23. 
 
  23. want
    24. 
 
  24. )
    25. 
 
  25. } catch (e) {
    26. 
 
  26. AlertDialog.show({ message: e.message })
    27. 
 
  27. }
    28. 
 
  28. }
    29. 



播放历史和收藏




    
 
  1. // entry/src/main/ets/pages/play/Play.ets
    2. 
 
  2. build() {
    3. 
 
  3. Stack({ alignContent: Alignment.Bottom }) {
    4. 
 
  4. // 播放
    5. 
 
  5. Stack() {
    6. 
 
  6. // 变色背景
    7. 
 
  7. Image(this.playState.img)
    8. 
 
  8. .width('100%')
    9. 
 
  9. .height('100%')
    10. 
 
  10. .blur(1000)
    11. 
 
  11. // 内容
    12. 
 
  12. Column() {
    13. 
 
  13. // 播放界面
    14. 
 
  14. Column() {
    15. 
 
  15. //头部控制
    16. 
 
  16. Row(){
    17. 
 
  17. Image($r('app.media.chevron_down'))
    18. 
 
  18. .width(24)
    19. 
 
  19. .height(24)
    20. 
 
  20. Row(){
    21. 
 
  21. Text()
    22. 
 
  22. .backgroundColor('#465065')
    23. 
 
  23. .height(6)
    24. 
 
  24. .width(6)
    25. 
 
  25. .borderRadius('50%')
    26. 
 
  26. Text()
    27. 
 
  27. .width(4)
    28. 
 
  28. Text()
    29. 
 
  29. .backgroundColor('#DFE0E4')
    30. 
 
  30. .height(6)
    31. 
 
  31. .width(12)
    32. 
 
  32. .borderRadius('50%')
    33. 
 
  33. }
    34. 
 
  34. 
 
  35. 
 
  36. Image($r('app.media.people_wifi'))
    37. 
 
  37. .width(26)
    38. 
 
  38. .height(22)
    39. 
 
  39. }
    40. 
 
  40. .height(48)
    41. 
 
  41. .margin({
    42. 
 
  42. top: AppStorage.get<number>('topHeight'),
    43. 
 
  43. })
    44. 
 
  44. .width('1100px')
    45. 
 
  45. .justifyContent(FlexAlign.SpaceBetween)
    46. 
 
  46. // 图片
    47. 
 
  47. Image(this.playState.img)
    48. 
 
  48. .height('1100px')
    49. 
 
  49. .width('1100px')
    50. 
 
  50. .objectFit(ImageFit.Cover)
    51. 
 
  51. .borderRadius(10)
    52. 
 
  52. .margin({
    53. 
 
  53. top:24,
    54. 
 
  54. bottom:24
    55. 
 
  55. })
    56. 
 
  56. // 歌曲信息
    57. 
 
  57. Row(){
    58. 
 
  58. Column() {
    59. 
 
  59. Text(this.playState.name)
    60. 
 
  60. .fontSize(25)
    61. 
 
  61. .fontWeight(FontWeight.Bold)
    62. 
 
  62. .fontColor('#E1E2E7')
    63. 
 
  63. Text(this.playState.author)
    64. 
 
  64. .fontSize(18)
    65. 
 
  65. .fontColor('#989EAD')
    66. 
 
  66. }
    67. 
 
  67. .alignItems(HorizontalAlign.Start)
    68. 
 
  68. Stack(){
    69. 
 
  69. Image($r('app.media.ic_like'))
    70. 
 
  70. .width(24)
    71. 
 
  71. Text('1w+')
    72. 
 
  72. .fontColor(Color.White)
    73. 
 
  73. .fontSize(10)
    74. 
 
  74. .padding({
    75. 
 
  75. bottom:20,
    76. 
 
  76. left:20
    77. 
 
  77. })
    78. 
 
  78. .fontWeight(600)
    79. 
 
  79. .width(40)
    80. 
 
  80. .height(40)
    81. 
 
  81. }
    82. 
 
  82. .width(40)
    83. 
 
  83. .height(40)
    84. 
 
  84. }.justifyContent(FlexAlign.SpaceBetween)
    85. 
 
  85. .width('1100px')
    86. 
 
  86. .height(47)
    87. 
 
  87. .margin({
    88. 
 
  88. bottom:84
    89. 
 
  89. })
    90. 
 
  90. // 操作
    91. 
 
  91. Row() {
    92. 
 
  92. //歌单
    93. 
 
  93. Image($r('app.media.ic_song_list'))
    94. 
 
  94. .fillColor(Color.White)
    95. 
 
  95. .width(28)
    96. 
 
  96. .onClick(() => {
    97. 
 
  97. this.panelHeight = '100%'
    98. 
 
  98. })
    99. 
 
  99. //下载
    100. 
 
  100. Image($r('app.media.ic_download_o'))
    101. 
 
  101. .fillColor(Color.White)
    102. 
 
  102. .width(30)
    103. 
 
  103. //铃声
    104. 
 
  104. Image($r('app.media.ic_sing'))
    105. 
 
  105. .fillColor(Color.White)
    106. 
 
  106. .width(30)
    107. 
 
  107. 
 
  108. //其他
    109. 
 
  109. Image($r('app.media.ic_other'))
    110. 
 
  110. .fillColor(Color.White)
    111. 
 
  111. .width(30)
    112. 
 
  112. }
    113. 
 
  113. .width('100%')
    114. 
 
  114. .justifyContent(FlexAlign.SpaceBetween)
    115. 
 
  115. .margin({
    116. 
 
  116. bottom:10
    117. 
 
  117. })
    118. 
 
  118. // 播放
    119. 
 
  119. Column() {
    120. 
 
  120. // 进度条
    121. 
 
  121. Slider({
    122. 
 
  122. value: this.playState.time,
    123. 
 
  123. min: 0,
    124. 
 
  124. max: this.playState.duration,
    125. 
 
  125. style:SliderStyle.InSet,
    126. 
 
  126. })
    127. 
 
  127. .blockBorderWidth(0)
    128. 
 
  128. .blockSize({
    129. 
 
  129. width:0.2,
    130. 
 
  130. height:0.2
    131. 
 
  131. })
    132. 
 
  132. .trackThickness(5)
    133. 
 
  133. .blockColor(Color.White)
    134. 
 
  134. .blockBorderColor(Color.White)
    135. 
 
  135. .selectedColor(Color.White)
    136. 
 
  136. .trackColor('#ccc5c5c5')
    137. 
 
  137. .onChange((val) => {
    138. 
 
  138. AVPlayerManager.player!.seek(val)
    139. 
 
  139. }).margin({
    140. 
 
  140. bottom:-10,
    141. 
 
  141. left:-7,
    142. 
 
  142. right:-7
    143. 
 
  143. })
    144. 
 
  144. //时间
    145. 
 
  145. Row() {
    146. 
 
  146. Text(this.number2time(this.playState.time))
    147. 
 
  147. .fontSize(12)
    148. 
 
  148. .fontColor('#A5B4B1')
    149. 
 
  149. Text(this.number2time(this.playState.duration))
    150. 
 
  150. .fontSize(12)
    151. 
 
  151. .fontColor('#A5B4B1')
    152. 
 
  152. }
    153. 
 
  153. .justifyContent(FlexAlign.SpaceBetween)
    154. 
 
  154. .width('100%')
    155. 
 
  155. .margin({
    156. 
 
  156. bottom:10
    157. 
 
  157. })
    158. 
 
  158. 
 
  159. // 切换
    160. 
 
  160. Row() {
    161. 
 
  161. Image($r('app.media.ic_prev'))
    162. 
 
  162. .fillColor(Color.White)
    163. 
 
  163. .width(40)
    164. 
 
  164. .fillColor(Color.White)
    165. 
 
  165. .onClick(() => {
    166. 
 
  166. AVPlayerManager.prevPlay()
    167. 
 
  167. })
    168. 
 
  168. // 播放按钮
    169. 
 
  169. Image(this.playState.isPlay ? $r('app.media.ic_paused') : $r('app.media.ic_play'))
    170. 
 
  170. .fillColor(Color.White)
    171. 
 
  171. .width(80)
    172. 
 
  172. .objectFit(ImageFit.Contain)
    173. 
 
  173. .onClick(() => {
    174. 
 
  174. if (!this.playState.isPlay) {
    175. 
 
  175. AVPlayerManager.singlePlay(this.playState.playList[this.playState.playIndex])
    176. 
 
  176. this.animatorResult.play()
    177. 
 
  177. } else {
    178. 
 
  178. AVPlayerManager.pause()
    179. 
 
  179. this.animatorResult.pause()
    180. 
 
  180. }
    181. 
 
  181. })
    182. 
 
  182. // 下一首
    183. 
 
  183. Image($r('app.media.ic_next'))
    184. 
 
  184. .fillColor(Color.White)
    185. 
 
  185. .width(40)
    186. 
 
  186. .fillColor(Color.White)
    187. 
 
  187. .onClick(() => {
    188. 
 
  188. AVPlayerManager.nextPlay()
    189. 
 
  189. })
    190. 
 
  190. }
    191. 
 
  191. .width('100%')
    192. 
 
  192. .padding({
    193. 
 
  193. bottom: 24
    194. 
 
  194. })
    195. 
 
  195. .justifyContent(FlexAlign.SpaceAround)
    196. 
 
  196. }
    197. 
 
  197. .width('100%')
    198. 
 
  198. }
    199. 
 
  199. .layoutWeight(1)
    200. 
 
  200. .width('1100px')
    201. 
 
  201. }
    202. 
 
  202. }
    203. 
 
  203. .backgroundColor(Color.Transparent)
    204. 
 
  204. 
 
  205. // 列表
    206. 
 
  206. Column() {
    207. 
 
  207. Column() {
    208. 
 
  208. 
 
  209. }
    210. 
 
  210. .width('100%')
    211. 
 
  211. .layoutWeight(1)
    212. 
 
  212. .onClick(() => {
    213. 
 
  213. this.panelHeight = '0%'
    214. 
 
  214. })
    215. 
 
  215. 
 
  216. Column() {
    217. 
 
  217. Row() {
    218. 
 
  218. Row() {
    219. 
 
  219. Image($r('app.media.ic_play'))
    220. 
 
  220. .width(20)
    221. 
 
  221. .fillColor('#ff5186')
    222. 
 
  222. }
    223. 
 
  223. .width(50)
    224. 
 
  224. .aspectRatio(1)
    225. 
 
  225. .justifyContent(FlexAlign.Center)
    226. 
 
  226. 
 
  227. Row({ space: 8 }) {
    228. 
 
  228. Text(`播放列表 (${this.playState.playList?.length})`)
    229. 
 
  229. .fontColor(Color.White)
    230. 
 
  230. .fontSize(14)
    231. 
 
  231. }
    232. 
 
  232. .layoutWeight(1)
    233. 
 
  233. 
 
  234. Image($r('app.media.ic_close'))
    235. 
 
  235. .fillColor('#ffa49a9a')
    236. 
 
  236. .width(24)
    237. 
 
  237. .height(24)
    238. 
 
  238. .margin({ right: 16 })
    239. 
 
  239. .onClick(() => {
    240. 
 
  240. this.panelHeight = '0%'
    241. 
 
  241. })
    242. 
 
  242. }
    243. 
 
  243. .width('100%')
    244. 
 
  244. .backgroundColor('#ff353333')
    245. 
 
  245. .padding(8)
    246. 
 
  246. .border({
    247. 
 
  247. width: { bottom: 1 },
    248. 
 
  248. color: '#12ec5c87'
    249. 
 
  249. })
    250. 
 
  250. .borderRadius({
    251. 
 
  251. topLeft: 4,
    252. 
 
  252. topRight: 4
    253. 
 
  253. })
    254. 
 
  254. 
 
  255. // 播放列表
    256. 
 
  256. List() {
    257. 
 
  257. ForEach(this.playState.playList, (item: songItemType, index: number) => {
    258. 
 
  258. ListItem() {
    259. 
 
  259. Row() {
    260. 
 
  260. Row() {
    261. 
 
  261. Text((index + 1).toString())
    262. 
 
  262. .fontColor('#ffa49a9a')
    263. 
 
  263. }
    264. 
 
  264. .width(50)
    265. 
 
  265. .aspectRatio(1)
    266. 
 
  266. .justifyContent(FlexAlign.Center)
    267. 
 
  267. 
 
  268. // 列表
    269. 
 
  269. Row({ space: 10 }) {
    270. 
 
  270. Column() {
    271. 
 
  271. Text(item.name)
    272. 
 
  272. .fontSize(14)
    273. 
 
  273. .fontColor(this.playState.playIndex === index ? $r('app.color.primary_light') : '#ffa49a9a')
    274. 
 
  274. Text(item.author)
    275. 
 
  275. .fontSize(12)
    276. 
 
  276. .fontColor(this.playState.playIndex === index ? $r('app.color.primary_light') : Color.Gray)
    277. 
 
  277. }
    278. 
 
  278. .layoutWeight(1)
    279. 
 
  279. .alignItems(HorizontalAlign.Start)
    280. 
 
  280. .justifyContent(FlexAlign.Center)
    281. 
 
  281. }
    282. 
 
  282. .layoutWeight(1)
    283. 
 
  283. 
 
  284. Image($r('app.media.ic_more'))
    285. 
 
  285. .width(24)
    286. 
 
  286. .height(24)
    287. 
 
  287. .margin({ right: 16 })
    288. 
 
  288. .fillColor(Color.Gray)
    289. 
 
  289. }
    290. 
 
  290. .alignItems(VerticalAlign.Center)
    291. 
 
  291. }
    292. 
 
  292. .onClick(() => {
    293. 
 
  293. AVPlayerManager.singlePlay(item)
    294. 
 
  294. })
    295. 
 
  295. .swipeAction({
    296. 
 
  296. end: this.deleteButton(index)
    297. 
 
  297. })
    298. 
 
  298. .border({
    299. 
 
  299. width: { bottom: 1 },
    300. 
 
  300. color: '#12ec5c87'
    301. 
 
  301. })
    302. 
 
  302. })
    303. 
 
  303. }
    304. 
 
  304. .layoutWeight(1)
    305. 
 
  305. .backgroundColor('#ff353333')
    306. 
 
  306. }
    307. 
 
  307. .height(400)
    308. 
 
  308. }
    309. 
 
  309. .height(this.panelHeight)
    310. 
 
  310. .animation({
    311. 
 
  311. duration: 300
    312. 
 
  312. })
    313. 
 
  313. 
 
  314. }
    315. 
 
  315. .width('100%')
    316. 
 
  316. .height('100%')
    317. 
 
  317. .backgroundColor(Color.Transparent)
    318. 
 
  318. .opacity(this.opacityNum)
    319. 
 
  319. }
    320. 





代码下载链接


影音娱乐示例代码.zip


 
  

        # harmonyos
      
        # 娱乐
      
        # 华为
      
  
 
 Logo 
HarmonyOS开发者社区
 
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
 
 
  
更多推荐
  
cover
 
ArkTS 核心语法精讲：运算符、空安全与流程控制
 
 
avatar HarmonyOS开发者社区
 
 
#基于HarmonyOS API 24实战解析投资理财记账应用深度技术解析,开闭原则（对扩展开放、对修改关闭）的实践，是构建可维护软件系统的黄金准则
 
在移动互联网与智能穿戴设备高度普及的今天，"习惯养成"已经从一个模糊的自我管理理念，演变为一个可量化、可追踪、可视化的数字化产品赛道。越来越多的人希望借助手中的智能终端，把"早起、冥想、阅读、运动"这些抽象的自律行为，转化为一条条清晰的数据曲线和一张张可触摸的打卡卡片。而鸿蒙生态（HarmonyOS）凭借其跨设备协同、分布式软总线以及声明式 UI 开发框架 ArkUI，为这类注重"轻量化交互 + 
 
avatar HarmonyOS开发者社区
 
 
#基于HarmonyOS API 24实战解析投资理财记账应用深度技术解析,开闭原则（对扩展开放、对修改关闭）的实践，是构建可维护软件系统的黄金准则
 
在移动互联网与智能穿戴设备高度普及的今天，"习惯养成"已经从一个模糊的自我管理理念，演变为一个可量化、可追踪、可视化的数字化产品赛道。越来越多的人希望借助手中的智能终端，把"早起、冥想、阅读、运动"这些抽象的自律行为，转化为一条条清晰的数据曲线和一张张可触摸的打卡卡片。而鸿蒙生态（HarmonyOS）凭借其跨设备协同、分布式软总线以及声明式 UI 开发框架 ArkUI，为这类注重"轻量化交互 + 
 
avatar HarmonyOS开发者社区