openharmony/applications_app_samples
1
0
Fork 0
mirror of https://gitee.com/openharmony/applications_app_samples synced 2024-11-27 02:30:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

!4793 【Sample】MusicAlbum 适配xs屏幕尺寸显示UI

Browse Source 
Merge pull request !4793 from yuandongping/music
This commit is contained in:
openharmony_ci 2024-09-27 09:22:29 +00:00 committed by Gitee
commit 65e1b18a91
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
3 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
code/SuperFeature/MultiDeviceAppDev/MusicAlbum/Readme.md
View File

@ -14,7 +14,7 @@
本示例使用[一次开发多端部署](https://gitee.com/openharmony/docs/tree/master/zh-cn/application-dev/key-features/multi-device-app-dev)中介绍的自适应布局能力和响应式布局能力进行多设备（或多窗口尺寸）适配，保证应用在不同设备或不同窗口尺寸下可以正常显示。
用到了媒体查询接口[@ohos.mediaquery](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-mediaquery.md)。
用到了媒体查询接口[@ohos.mediaquery](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-mediaquery.md)。
### 效果预览

4
code/SuperFeature/MultiDeviceAppDev/MusicAlbum/entry/src/main/ets/common/Content.ets
View File

@ -22,7 +22,7 @@ export default struct Content {
build() {
GridRow() {
GridCol({ span: { sm: 12, md: 6, lg: 4 } }) {
GridCol({ span: { xs: 12, sm: 12, md: 6, lg: 4 } }) {
PlayListCover()
.onAreaChange((oldArea: Area, newArea: Area) => {
this.coverHeight = newArea.height as number
@ -30,7 +30,7 @@ export default struct Content {
}
.backgroundColor('#e4ecf7')
GridCol({ span: { sm: 12, md: 6, lg: 8 } }) {
GridCol({ span: { xs: 12, sm: 12, md: 6, lg: 8 } }) {
PlayList()
}
.borderRadius(40)

12
code/SuperFeature/MultiDeviceAppDev/MusicAlbum/entry/src/main/ets/common/PlayListCover.ets
View File

@ -100,15 +100,15 @@ export default struct PlayListCover {
if (this.currentBreakpoint === 'sm') {
Column() {
GridRow() {
GridCol({ span: { sm: 4, md: 10 }, offset: { sm: 0, md: 1, lg: 1 } }) {
GridCol({ span: { xs: 4, sm: 4, md: 10 }, offset: { xs: 0, sm: 0, md: 1, lg: 1 } }) {
this.CoverImage()
}
GridCol({ span: { sm: 8, md: 10 }, offset: { sm: 0, md: 2, lg: 2 } }) {
GridCol({ span: { xs: 8, sm: 8, md: 10 }, offset: { xs: 0, sm: 0, md: 2, lg: 2 } }) {
this.CoverIntroduction()
}
GridCol({ span: { sm: 12, md: 10 }, offset: { sm: 0, md: 2, lg: 2 } }) {
GridCol({ span: { xs: 12, sm: 12, md: 10 }, offset: { xs: 0, sm: 0, md: 2, lg: 2 } }) {
this.CoverOptions()
}
}
@ -118,15 +118,15 @@ export default struct PlayListCover {
} else {
Column() {
GridRow() {
GridCol({ span: { sm: 4, md: 10 }, offset: { sm: 0, md: 1, lg: 1 } }) {
GridCol({ span: { xs: 4, sm: 4, md: 10 }, offset: { xs: 0, sm: 0, md: 1, lg: 1 } }) {
this.CoverImage()
}
GridCol({ span: { sm: 8, md: 10 }, offset: { sm: 0, md: 2, lg: 2 } }) {
GridCol({ span: { xs: 8, sm: 8, md: 10 }, offset: { xs: 0, sm: 0, md: 2, lg: 2 } }) {
this.CoverIntroduction()
}
GridCol({ span: { sm: 12, md: 10 }, offset: { sm: 0, md: 2, lg: 2 } }) {
GridCol({ span: { xs: 12, sm: 12, md: 10 }, offset: { xs: 0, sm: 0, md: 2, lg: 2 } }) {
this.CoverOptions()
}.margin({
top: this.currentBreakpoint === 'sm' ? 15 : 0,