• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 多设备自适应的FA页面
2
3### 简介
4
5本示例构建了常见应用的信息展示页面,包含搜索栏,列表展示。在不同尺寸的设备上,通过拉伸、缩放、隐藏、均分、占比等自适应能力,使用多态控件、布局和组件的延展性以及响应式布局的运用,自适应展示为合理的布局效果。
6
7实现效果如下:
8
9![](screenshots/device/JsAdaptivePortalPage.png)
10
11### 相关概念
12
13资源限定与访问:资源限定词可以由一个或多个表征应用场景或设备特征的限定词组合而成,包括屏幕密度等维度,限定词之间通过中划线(-)连接,开发者在resources目录下创建限定词文件。
14
15原子布局:在屏幕形态和规格不同等情况下,布局效果需要实现自适应,因此系统提供了面向不同屏幕尺寸界面自适应适配的布局能力,称为原子布局。
16
17响应式布局:通过使用响应式布局能力开发新应用或者改造已有应用,可以使应用在手机、平板、智慧屏等各种尺寸的设备都有良好的展示效果。
18
19### 相关权限
20
21不涉及。
22
23### 使用说明
24
251.点击**tab-bar**按钮进行页面切换,可上下滑动内容页,左右滑动列表查看隐藏内容。
26
272.开发者可将本示例安装到不同类型设备上,查看自适应效果。
28
29### 约束与限制
30
311.本示例仅支持在大型系统上运行。
32
332.本示例需要使用DevEco Studio 3.0 Beta4 (Build Version: 3.0.0.992, built on July 14, 2022)才可编译运行。