このセクションでは、HarmonyOS ArkUI に基づいて List コンポーネントに音楽リスト機能を実装する方法を説明します。
この記事に含まれるすべてのソース コードは、記事の最後にあるリンクにあります。
イベントのホームページ
ルールの具体的な要件は次のとおりです。
- ステップ 1: 夏期生放送の <HarmonyOS レッスン 1> 「キャンプ」 • シリーズを視聴し、HarmonyOS の最新バージョンに基づくアプリケーション開発を段階的に学びます。
- ステップ 2: アダプティブ レイアウトとレスポンシブ レイアウトに基づいて、ワンタイム開発を実現し、複数の端末に音楽アルバムを展開し、音楽リスト ページの実現を正常に完了します。写真が示すように:
アプリケーションを作成する
空のテンプレートを選択します。
ArkTSMusicPlayer という名前の HarmonyOS アプリケーションを作成します。
コアコードの説明
ホームページ
メイン ページ Index.ets は、頭部、中部、下部の 3 つの部分に分かれています。
コードは以下のように表示されます:
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 は、戻るボタン、プレーヤー名、メニューの 3 つの部分に分かれています。コードは以下のように表示されます:
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
})
}
}
コピー
エフェクトデモ
これは垂直方向の効果です。
この横板効果。
アダプティブレイアウトとレスポンシブレイアウトをベースに、ワンタイム開発と多端末展開を実現します。
完全なビデオデモについては、次を参照してください: [Laowei Moving Bricks] Issue 039: HarmonyOS ArkTS Realizes Music Player UI_哔哩哔哩_bilibili
ソースコード
参照: GitHub - waylau/harmonyos-tutorial: HarmonyOS チュートリアル「Waylau から HarmonyOS 開発を学ぶ」
HarmonyOS について詳しく見る
開発者として、HarmonyOS 4 の学習に時間内に投資することが非常に必要です。紅蒙の生態系は困難な4年間を経験したが、軽船は万山を越え、今ではゆっくりと正しい軌道に乗り、繁栄への回帰は目前に迫っている。
最新の HaromnyOS コンサルティングおよび開発ガイダンスについては、HaromnyOS 公式 Web サイト ( Huawei HarmonyOS スマート ターミナル オペレーティング システム公式 Web サイト | アプリケーション デバイス分散開発者エコシステム) から学ぶことができます。また、著者は以下の学習教材も作成しました。
- ファーウェイ開発者アライアンス:ファーウェイ開発者フォーラム
- 「Waylau による HarmonyOS 開発の学習」オープンソース無料チュートリアル: GitHub - waylau/harmonyos-tutorial: HarmonyOS チュートリアル「Waylau による HarmonyOS 開発の学習」
- 『Hongmeng HarmonyOS モバイルアプリケーション開発実践』(清華大学出版局)
- 「Hongmeng HarmonyOS アプリケーション開発の入門から習得まで」(北京大学出版局)、
- 「Hongmeng システムの実践ショートビデオアプリで HarmonyOS を 0 から 1 までマスター」: 宏蒙システムの実践ショートビデオアプリで HarmonyOS を 0 から 1 までマスター_実践コース_MOOC