# MusicUI4HM

**Repository Path**: liuzian310011/music-ui4-hm

## Basic Information

- **Project Name**: MusicUI4HM
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-25
- **Last Updated**: 2024-08-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MusicUI4HM

### 作者：清明雨揽月

## 介绍

#### 本项目为一次开发，多端部署的单页面UI展示，目前在折叠设备和手机验证，不同类型设备有不一样的UI布局展示，本Demo使用的是响应式布局

### 项目运行效果

![img_sm.png](screenshots%2Fimg_sm.png)
![img_md.png](screenshots%2Fimg_md.png)

### 使用方式

#### 真机运行
#### 克隆本仓库，在HarmonyOS NEXT设备上运行即可，支持运行的设备类型为折叠设备和手机，系统需升级为NEXT 0.0.60及以上

#### 模拟器运行
#### 克隆本仓库，使用DevEco Studio打开，DevEco Studio版本为5.0.3.700（Beta5）即以上，仓颉UI插件为Beta5版本及以上，不同芯片、系统支持情况不一样

## 代码解释

### 获取设备屏幕宽度（单位：vp）

#### 在项目的src/utils/windows_manager.cj文件中，提供了两个函数getDeviceWidth(windowStage: WindowStage)和updateBreakPoint(width: UInt32)

#### getDeviceWidth(windowStage: WindowStage)：用于获取当前设备的宽度，单位非vp

#### updateBreakPoint(width: UInt32)：用于判断设备属于什么类型，“xs”｜“sm”｜“md”｜“lg”

## 主页代码

![img_code.png](screenshots%2Fimg_code.png)

#### 在主页UI中，定义了5个组件：Head()、Content()、PlayerBar()、PlayListCover()、PlayList()

#### Head()：Demo中头部组件

#### Content()：Demo中最中间内容，包含音乐封面组件和音乐列表组件

#### PlayerBar()：Demo中音乐播放器栏组件

#### PlayListCover()：Demo中音乐封面组件

#### PlayList()：Demo中音乐列表组件