ALDC七哩

本小节将以音乐专辑页为例，介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。 页面设计 音乐专辑页的页面设计如下。 同样观察音乐专辑的页面设计，不同断点下的页面设计有较多相似的地方。 据此，

本小节将以应用市场首页为例，介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。 页面设计 一个典型的应用市场首页的UX设计如下所示。 观察应用市场首页的页面设计，不同断点下的页面设计有较多相

虽然不同应用的页面千变万化，但对其进行拆分和分析，页面中的很多布局场景是相似的。本小节将介绍如何借助自适应布局、响应式布局以及常见的容器类组件，实现应用中的典型布局场景。 页签栏 布局效果 实现方案

自适应布局可以保证窗口尺寸在一定范围内变化时，页面的显示是正常的。但是将窗口尺寸变化较大时（如窗口宽度从400vp变化为1000vp），仅仅依靠自适应布局可能出现图片异常放大或页面内容稀疏、留白过多等

针对常见的开发场景，方舟开发框架提炼了七种自适应布局能力，这些布局可以独立使用，也可多种布局叠加使用。 下面我们依次介绍这几种自适应布局能力。 拉伸能力 拉伸能力是指容器组件尺寸发生变化时，增加或减小

本章介绍如何使用方舟开发框架“一多”能力，开发出在多设备上正常显示的页面。方舟开发框架推荐开发者使用声明式开发范式开发应用，故本章的内容和示例都主要基于声明式开发范式。本章主要包含如下内容： 布局能力

DevEco Studio的基本使用，请参考DevEco Studio使用指南。本章主要介绍如何使用DevEco Studio进行多设备应用开发。 工程创建 参考创建系统工程，先创建出最基本的项目工程

设计原则 当为多种不同的设备开发应用时，有如下设计原则： 差异性 充分了解所要支持的设备，包括屏幕尺寸、交互方式、使用场景、用户人群等，对设备的特性进行针对性的设计。 一致性 除了要考虑每个设备的特性

本章通过一个天气应用，介绍一多应用的整体开发过程，包括UX设计、工程管理及调试、页面开发等。 UX设计 本示例中的天气应用包含主页、管理城市和添加城市三个页面，其中主页中又包含菜单和更新间隔两个弹窗，