Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
a3eee5cb
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
a3eee5cb
编写于
6月 02, 2023
作者:
O
openharmony_ci
提交者:
Gitee
6月 02, 2023
浏览文件
操作
浏览文件
下载
差异文件
!19055 【master】抽取相关实例模块
Merge pull request !19055 from songqq0825/master
上级
de94a44f
35aecac4
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
33 addition
and
5 deletion
+33
-5
zh-cn/application-dev/key-features/multi-device-app-dev/appgallery-home-page.md
...key-features/multi-device-app-dev/appgallery-home-page.md
+9
-1
zh-cn/application-dev/key-features/multi-device-app-dev/music-album-page.md
...dev/key-features/multi-device-app-dev/music-album-page.md
+8
-1
zh-cn/application-dev/key-features/multi-device-app-dev/settings-application-page.md
...eatures/multi-device-app-dev/settings-application-page.md
+7
-2
zh-cn/application-dev/key-features/multi-device-app-dev/start-with-a-example.md
...key-features/multi-device-app-dev/start-with-a-example.md
+9
-1
未找到文件。
zh-cn/application-dev/key-features/multi-device-app-dev/appgallery-home-page.md
浏览文件 @
a3eee5cb
# 应用市场首页
本小节将以应用市场首页为例,介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。
本示例已经在
[
OpenHarmony应用示例
](
https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/AppMarket
)
中开源,读者可以根据需要自行下载源码并运行及查看效果。
本小节将以应用市场首页为例,介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。
## 页面设计
...
...
@@ -268,4 +268,12 @@ 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_check-->
\ No newline at end of file
zh-cn/application-dev/key-features/multi-device-app-dev/music-album-page.md
浏览文件 @
a3eee5cb
# 音乐专辑页
本小节将以音乐专辑页为例,介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。
本示例已经在
[
OpenHarmony应用示例
](
https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/MusicAlbum
)
中开源,读者可以根据需要自行下载源码并运行及查看效果。
本小节将以音乐专辑页为例,介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。
## 页面设计
...
...
@@ -242,3 +242,10 @@ 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
)
zh-cn/application-dev/key-features/multi-device-app-dev/settings-application-page.md
浏览文件 @
a3eee5cb
# 设置应用页面
本小节以“设置”应用页面为例,介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。本示例已经在
[
OpenHarmony应用示例
](
https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/Settings
)
中开源,读者可以根据需要自行下载源码并运行及查看效果。
本小节以“设置”应用页面为例,介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。
## 页面设计
为充分利用屏幕尺寸优势,应用常常有在小屏设备上单栏显示,大屏设备上左右分两栏显示的设计,设置应用页面设计如下。
...
...
@@ -164,3 +163,9 @@ export struct WlanMoreSettingItem {
*
激活
`WlanSetting`
中的
`WlanMoreSettingItem`
,可以加载及显示
`WlanMoreSetting`
。
Navigation组件支持自动切换单栏和双栏的显示效果,同时可以根据当前状态自动添加返回键及响应系统的返回键事件。借助Navigation组件,开发者不用关心单栏和双栏场景的差异而更关注于应用本身,极大的减少开发工作量及提高开发效率。
## 相关实例
针对“设置”应用页面,有以下相关实例可以参考:
设置:
[
设置应用示例
](
https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/Settings
)
zh-cn/application-dev/key-features/multi-device-app-dev/start-with-a-example.md
浏览文件 @
a3eee5cb
...
...
@@ -78,7 +78,7 @@
## 页面开发
天气应用中涉及较多的页面和弹窗,本小节以天气主页为例,简单介绍不同设备下的页面实现思路。
天气应用已经在
[
OpenHarmony应用示例
](
https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/Weather
)
中开源,感兴趣的读者可以自行下载及了解详细代码实现。
天气应用中涉及较多的页面和弹窗,本小节以天气主页为例,简单介绍不同设备下的页面实现思路。
观察天气主页在不同设备上的UX设计图,可以进行如下设计:
-
将天气主页划分为9个基础区域,如:
...
...
@@ -272,4 +272,12 @@ struct Home {
在本文的
[
功能开发的一多能力介绍
](
development-intro.md
)
章节中,将详细展开介绍。
## 相关实例
针对天气应用,有以下相关实例可供参考:
天气应用:
[
天气应用示例
](
https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/Weather
)
<!--no_check-->
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录