devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：盐析白兔 | 2024-02-15 13:15:35

赞

踩

breakpointconstants

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

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

活动主页

华为开发者论坛

规则要求具体要求如下：

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

创建应用

选择空模板。

cke_206.png

创建名为ArkTSMusicPlayer的HarmonyOS应用。

cke_207.png

核心代码讲解

主页

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

cke_208.png

代码如下：

  1. import { BreakpointConstants } from '../common/constants/BreakpointConstants';
  2.  
  3. import { StyleConstants } from '../common/constants/StyleConstants';
  4.  
  5. import { Content } from '../components/Content';
  6. import { Header } from '../components/Header';
  7. import { Player } from '../components/Player';
  8.  
  9. @Entry
  10. @Component
  11. struct Index {
  12.  
  13.   @State currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
  14.   build() {
  15.     Stack({ alignContent: Alignment.Top }) {
  16.       // 头部
  17.       Header({ currentBreakpoint: $currentBreakpoint })
  18.  
  19.       // 中部
  20.       Content({ currentBreakpoint: $currentBreakpoint })
  21.  
  22.       // 底部
  23.       Player({ currentBreakpoint: $currentBreakpoint })
  24.     }
  25.     .width(StyleConstants.FULL_WIDTH)
  26.   }
  27.  
  28. }
复制

头部

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

  1. import router from '@ohos.router';
  2. import { StyleConstants } from '../common/constants/StyleConstants';
  3. import { HeaderConstants } from '../common/constants/HeaderConstants';
  4. import { BreakpointType } from '../common/media/BreakpointSystem';
  5.  
  6. @Preview
  7. @Component
  8. export struct Header {
  9.   @Link currentBreakpoint: string;
  10.  
  11.   build() {
  12.     Row() {
  13.       // 返回按钮
  14.       Image($r('app.media.ic_back'))
  15.         .width($r('app.float.icon_width'))
  16.         .height($r('app.float.icon_height'))
  17.         .margin({ left: $r('app.float.icon_margin') })
  18.         .onClick(() => {
  19.           router.back()
  20.         })
  21.  
  22.       // 播放器名称
  23.       Text($r('app.string.play_list'))
  24.         .fontSize(new BreakpointType({
  25.           sm: $r('app.float.header_font_sm'),
  26.           md: $r('app.float.header_font_md'),
  27.           lg: $r('app.float.header_font_lg')
  28.         }).getValue(this.currentBreakpoint))
  29.         .fontWeight(HeaderConstants.TITLE_FONT_WEIGHT)
  30.         .fontColor($r('app.color.title_color'))
  31.         .opacity($r('app.float.title_opacity'))
  32.         .letterSpacing(HeaderConstants.LETTER_SPACING)
  33.         .padding({ left: $r('app.float.title_padding_left') })
  34.  
  35.       Blank()
  36.  
  37.       // 菜单
  38.       Image($r('app.media.ic_more'))
  39.         .width($r('app.float.icon_width'))
  40.         .height($r('app.float.icon_height'))
  41.         .margin({ right: $r('app.float.icon_margin') })
  42.         //.bindMenu(this.getMenu())
  43.     }
  44.     .width(StyleConstants.FULL_WIDTH)
  45.     .height($r('app.float.title_bar_height'))
  46.     .zIndex(HeaderConstants.Z_INDEX)
  47.   }
  48.  
  49. }
复制

中部

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

 

  1. import { GridConstants } from '../common/constants/GridConstants';
  2. import { StyleConstants } from '../common/constants/StyleConstants';
  3. import { AlbumCover } from './AlbumCover';
  4. import { PlayList } from './PlayList';
  5.  
  6. @Preview
  7. @Component
  8. export struct Content {
  9.   @Link currentBreakpoint: string;
  10.  
  11.   build() {
  12.     GridRow() {
  13.  
  14.       // 封面
  15.       GridCol({ span: { sm: GridConstants.SPAN_TWELVE, md: GridConstants.SPAN_SIX, lg: GridConstants.SPAN_FOUR } }) {
  16.         AlbumCover({ currentBreakpoint: $currentBreakpoint })
  17.       }
  18.       .backgroundColor($r('app.color.album_background'))
  19.  
  20.       // 歌曲列表
  21.       GridCol({ span: { sm: GridConstants.SPAN_TWELVE, md: GridConstants.SPAN_SIX, lg: GridConstants.SPAN_EIGHT } }) {
  22.         PlayList({ currentBreakpoint: $currentBreakpoint })
  23.       }
  24.       .borderRadius($r('app.float.playlist_border_radius'))
  25.     }
  26.     .height(StyleConstants.FULL_HEIGHT)
  27.     .onBreakpointChange((breakpoints: string) => {
  28.       this.currentBreakpoint = breakpoints;
  29.     })
  30.   }
  31. }
复制

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

  1. build() {
  2.     Column() {
  3.       // 播放全部
  4.       this.PlayAll()
  5.  
  6.       // 歌单列表
  7.       List() {
  8.         LazyForEach(new SongDataSource(this.songList), (item: SongItem, index: number) => {
  9.           ListItem() {
  10.             Column() {
  11.               this.SongItem(item, index)
  12.             }
  13.             .padding({
  14.               left: $r('app.float.list_item_padding'),
  15.               right: $r('app.float.list_item_padding')
  16.             })
  17.           }
  18.         }, (item, index) => JSON.stringify(item) + index)
  19.       }
  20.       .width(StyleConstants.FULL_WIDTH)
  21.       .backgroundColor(Color.White)
  22.       .margin({ top: $r('app.float.list_area_margin_top') })
  23.       .lanes(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
  24.       ContentConstants.COL_TWO : ContentConstants.COL_ONE)
  25.       .layoutWeight(1)
  26.       .divider({
  27.         color: $r('app.color.list_divider'),
  28.         strokeWidth: $r('app.float.stroke_width'),
  29.         startMargin: $r('app.float.list_item_padding'),
  30.         endMargin: $r('app.float.list_item_padding')
  31.       })
  32.     }
  33.     .padding({
  34.       top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? 0 : $r('app.float.list_area_padding_top'),
  35.       bottom: $r('app.float.list_area_padding_bottom')
  36.     })
  37.   }
复制

底部

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

  1. import { SongItem } from '../common/bean/SongItem';
  2. import { PlayerConstants } from '../common/constants/PlayerConstants';
  3. import { StyleConstants } from '../common/constants/StyleConstants';
  4. import { BreakpointType } from '../common/media/BreakpointSystem';
  5. import { MusicList } from '../common/media/MusicList';
  6.  
  7. @Preview
  8. @Component
  9. export struct Player {
  10.   @StorageProp('selectIndex') selectIndex: number = 0;
  11.   @StorageLink('isPlay') isPlay: boolean = false;
  12.   songList: SongItem[] = MusicList;
  13.   @Link currentBreakpoint: string;
  14.  
  15.   build() {
  16.     Row() {
  17.       Row() {
  18.         Image(this.songList[this.selectIndex]?.label)
  19.           .height($r('app.float.cover_height'))
  20.           .width($r('app.float.cover_width'))
  21.           .borderRadius($r('app.float.label_border_radius'))
  22.           .margin({ right: $r('app.float.cover_margin') })
  23.           .rotate({ angle: this.isPlay ? PlayerConstants.ROTATE : 0 })
  24.           .animation({
  25.             duration: PlayerConstants.ANIMATION_DURATION,
  26.             iterations: PlayerConstants.ITERATIONS,
  27.             curve: Curve.Linear
  28.           })
  29.         Column() {
  30.           Text(this.songList[this.selectIndex].title)
  31.             .fontColor($r('app.color.song_name'))
  32.             .fontSize(new BreakpointType({
  33.               sm: $r('app.float.song_title_sm'),
  34.               md: $r('app.float.song_title_md'),
  35.               lg: $r('app.float.song_title_lg')
  36.             }).getValue(this.currentBreakpoint))
  37.           Row() {
  38.             Image($r('app.media.ic_vip'))
  39.               .height($r('app.float.vip_icon_height'))
  40.               .width($r('app.float.vip_icon_width'))
  41.               .margin({ right: $r('app.float.vip_icon_margin') })
  42.             Text(this.songList[this.selectIndex].singer)
  43.               .fontColor($r('app.color.singer'))
  44.               .fontSize(new BreakpointType({
  45.                 sm: $r('app.float.singer_title_sm'),
  46.                 md: $r('app.float.singer_title_md'),
  47.                 lg: $r('app.float.singer_title_lg')
  48.               }).getValue(this.currentBreakpoint))
  49.               .opacity($r('app.float.singer_opacity'))
  50.           }
  51.         }
  52.         .alignItems(HorizontalAlign.Start)
  53.       }
  54.       .layoutWeight(PlayerConstants.LAYOUT_WEIGHT_PLAYER_CONTROL)
  55.  
  56.       Blank()
  57.  
  58.       Row() {
  59.         Image($r('app.media.ic_previous'))
  60.           .height($r('app.float.control_icon_height'))
  61.           .width($r('app.float.control_icon_width'))
  62.           .margin({ right: $r('app.float.control_icon_margin') })
  63.           .displayPriority(PlayerConstants.DISPLAY_PRIORITY_TWO)
  64.  
  65.         Image(this.isPlay ? $r('app.media.ic_play') : $r('app.media.ic_pause'))
  66.           .height($r('app.float.control_icon_height'))
  67.           .width($r('app.float.control_icon_width'))
  68.           .displayPriority(PlayerConstants.DISPLAY_PRIORITY_THREE)
  69.  
  70.         Image($r('app.media.ic_next'))
  71.           .height($r('app.float.control_icon_height'))
  72.           .width($r('app.float.control_icon_width'))
  73.           .margin({
  74.             right: $r('app.float.control_icon_margin'),
  75.             left: $r('app.float.control_icon_margin')
  76.           })
  77.           .displayPriority(PlayerConstants.DISPLAY_PRIORITY_TWO)
  78.         Image($r('app.media.ic_music_list'))
  79.           .height($r('app.float.control_icon_height'))
  80.           .width($r('app.float.control_icon_width'))
  81.           .displayPriority(PlayerConstants.DISPLAY_PRIORITY_ONE)
  82.       }
  83.       .width(new BreakpointType({
  84.         sm: $r('app.float.play_width_sm'),
  85.         md: $r('app.float.play_width_sm'),
  86.         lg: $r('app.float.play_width_lg')
  87.       }).getValue(this.currentBreakpoint))
  88.       .justifyContent(FlexAlign.End)
  89.     }
  90.     .width(StyleConstants.FULL_WIDTH)
  91.     .height($r('app.float.player_area_height'))
  92.     .backgroundColor($r('app.color.player_background'))
  93.     .padding({
  94.       left: $r('app.float.player_padding'),
  95.       right: $r('app.float.player_padding')
  96.     })
  97.     .position({
  98.       x: 0,
  99.       y: StyleConstants.FULL_HEIGHT
  100.     })
  101.     .translate({
  102.       x: 0,
  103.       y: StyleConstants.TRANSLATE_PLAYER_Y
  104.     })
  105.   }
  106. }
复制

效果演示

这个是竖版效果。

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咨询以及开发指导。除此之外，笔者也整理了以下学习资料。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/84787
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。