From 21e5a74349a9ebb53eb6fc680698d47d45127f88 Mon Sep 17 00:00:00 2001 From: swx1239486 Date: Thu, 1 Jun 2023 10:50:10 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=9B=B8=E5=85=B3=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B=E9=93=BE=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: swx1239486 --- .../multi-device-app-dev/appgallery-home-page.md | 9 ++++++++- .../multi-device-app-dev/music-album-page.md | 6 +++++- .../multi-device-app-dev/settings-application-page.md | 8 ++++++-- .../multi-device-app-dev/start-with-a-example.md | 5 ++++- 4 files changed, 23 insertions(+), 5 deletions(-) diff --git a/zh-cn/application-dev/key-features/multi-device-app-dev/appgallery-home-page.md b/zh-cn/application-dev/key-features/multi-device-app-dev/appgallery-home-page.md index 21f0212ff8..bbd697ddd6 100644 --- a/zh-cn/application-dev/key-features/multi-device-app-dev/appgallery-home-page.md +++ b/zh-cn/application-dev/key-features/multi-device-app-dev/appgallery-home-page.md @@ -1,7 +1,7 @@ # 应用市场首页 -本小节将以应用市场首页为例，介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。本示例已经在[OpenHarmony应用示例](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/AppMarket)中开源，读者可以根据需要自行下载源码并运行及查看效果。 +本小节将以应用市场首页为例，介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。 ## 页面设计 @@ -268,4 +268,11 @@ export default struct Home { | -------- | -------- | -------- | | ![zh-cn_image_0000001334345550](figures/zh-cn_image_0000001334345550.jpg) | ![zh-cn_image_0000001385105477](figures/zh-cn_image_0000001385105477.jpg) | ![zh-cn_image_0000001384985569](figures/zh-cn_image_0000001384985569.jpg) | +## 相关示例 + +本示例已经在[一多应用市场首页应用示例](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/AppMarket)中开源，读者可以根据需要自行下载源码并运行及查看效果。 + + + + \ No newline at end of file diff --git a/zh-cn/application-dev/key-features/multi-device-app-dev/music-album-page.md b/zh-cn/application-dev/key-features/multi-device-app-dev/music-album-page.md index 188506d6b9..5a82eb29f0 100644 --- a/zh-cn/application-dev/key-features/multi-device-app-dev/music-album-page.md +++ b/zh-cn/application-dev/key-features/multi-device-app-dev/music-album-page.md @@ -1,7 +1,7 @@ # 音乐专辑页 -本小节将以音乐专辑页为例，介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。本示例已经在[OpenHarmony应用示例](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/MusicAlbum)中开源，读者可以根据需要自行下载源码并运行及查看效果。 +本小节将以音乐专辑页为例，介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。 ## 页面设计 @@ -242,3 +242,7 @@ struct Index { | sm | md | lg | | -------- | -------- | -------- | | ![MusicAlbum_sm_running](figures/MusicAlbum_sm_running.png) | ![MusicAlbum_md_running](figures/MusicAlbum_md_running.png) | ![MusicAlbum_lg_running](figures/MusicAlbum_lg_running.png) | + +## 相关示例 + +本示例已经在[音乐专辑页应用示例](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/MusicAlbum)中开源，读者可以根据需要自行下载源码并运行及查看效果。 \ No newline at end of file diff --git a/zh-cn/application-dev/key-features/multi-device-app-dev/settings-application-page.md b/zh-cn/application-dev/key-features/multi-device-app-dev/settings-application-page.md index 40ec326319..d2e3691bfd 100644 --- a/zh-cn/application-dev/key-features/multi-device-app-dev/settings-application-page.md +++ b/zh-cn/application-dev/key-features/multi-device-app-dev/settings-application-page.md @@ -1,7 +1,6 @@ # 设置应用页面 -本小节以“设置”应用页面为例，介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。本示例已经在[OpenHarmony应用示例](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/Settings)中开源，读者可以根据需要自行下载源码并运行及查看效果。 - +本小节以“设置”应用页面为例，介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。 ## 页面设计 为充分利用屏幕尺寸优势，应用常常有在小屏设备上单栏显示，大屏设备上左右分两栏显示的设计，设置应用页面设计如下。 @@ -164,3 +163,8 @@ export struct WlanMoreSettingItem { * 激活`WlanSetting`中的`WlanMoreSettingItem`，可以加载及显示`WlanMoreSetting`。 Navigation组件支持自动切换单栏和双栏的显示效果，同时可以根据当前状态自动添加返回键及响应系统的返回键事件。借助Navigation组件，开发者不用关心单栏和双栏场景的差异而更关注于应用本身，极大的减少开发工作量及提高开发效率。 + +## 相关示例 + +本示例已经在[设置应用示例](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/Settings)中开源，读者可以根据需要自行下载源码并运行及查看效果。 + diff --git a/zh-cn/application-dev/key-features/multi-device-app-dev/start-with-a-example.md b/zh-cn/application-dev/key-features/multi-device-app-dev/start-with-a-example.md index a20bc3c2e5..4ee75acc5c 100644 --- a/zh-cn/application-dev/key-features/multi-device-app-dev/start-with-a-example.md +++ b/zh-cn/application-dev/key-features/multi-device-app-dev/start-with-a-example.md @@ -78,7 +78,7 @@ ## 页面开发 -天气应用中涉及较多的页面和弹窗，本小节以天气主页为例，简单介绍不同设备下的页面实现思路。天气应用已经在[OpenHarmony应用示例](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/Weather)中开源，感兴趣的读者可以自行下载及了解详细代码实现。 +天气应用中涉及较多的页面和弹窗，本小节以天气主页为例，简单介绍不同设备下的页面实现思路。 观察天气主页在不同设备上的UX设计图，可以进行如下设计： - 将天气主页划分为9个基础区域，如： @@ -272,4 +272,7 @@ struct Home { 在本文的[功能开发的一多能力介绍](development-intro.md)章节中，将详细展开介绍。 +## 相关示例 +天气应用已经在[天气应用示例](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/Weather)中开源，感兴趣的读者可以自行下载及了解详细代码实现。 + \ No newline at end of file -- GitLab