Astro轻应用 AstroZero-标准页面布局:自适应布局

时间：2023-11-01 16:25:38

Astro轻应用 AstroZero

自适应布局

自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态布局，确保一个页面在所有终端上（各种尺寸的PC、平板、手机、智能手表等）都能显示出令人满意的效果。利用流式布局加弹性布局，分别为不同的屏幕分辨率定义布局。

标准页面的自适应布局主要是通过“分栏”组件实现的。“分栏”组件中包含一个或多个“栏”组件，“栏”组件可以简单理解为上一小节介绍的“容器”组件，用来提供某一部分的布局，多个“栏”组件组成“分栏”组件。通过配置不同分辨率屏幕中，“栏”组件的呈现形式，实现不同大小屏幕下不同的显示方案，如图13。

图13 分栏组件

“分栏”组件右侧属性配置面板的“行布局”中，可以选择“分栏”组件在PC端和移动端下“栏”的布局形式。“PC”属性中可以依据图示选择“分栏”组件，在PC端包含多少个“栏”。

为了方便说明，如何使用“分栏”组件实现自适应布局，向画布中拖拽一个“分栏”组件，在“PC”下选择从左到右三个“栏”的布局形式。向每个“栏”中拖拽一个“标签”组件和一个“输入框”组件用来模拟录入员工信息的场景，如图14。

图14 分栏组件模拟录入员工信息

“phone”属性中，可以依据图示，选择“分栏”组件中“栏”，在移动端的布局形式，如图12所示。当在“PC”选择左到右三个“栏”的布局形式时，移动端的屏幕较小，仍然选择从左到右布局可能导致页面元素显示不全或变形，这时可以在“phone”中选择在移动端下“栏”转换为从上到下排列，此时单击页面上方的“全屏”，手机图标就可以模拟在移动端展示的效果，如图15。

图15 移动端展示效果“竖排”

如果在“phone”中，依旧选择从左到右的布局方式，则展示效果如图16。

图16 移动端展示效果“横排”

布局模式：可以调整“分栏”组件为流式布局或弹性布局，用来控制“分栏”组件中多个“栏”组件或其他组件的布局，更多流式布局和弹性布局的介绍请参见基础布局设置。

录入分隔比例：在“PC”属性的选项中，单击最后的齿轮按钮，可以设置“录入分隔比例”。这个比例指的是将整个屏幕宽度划分为24份，每个“栏”组件所占宽度比例，通过设置“录入分隔比例”，在不同大小的屏幕下“分栏”组件获得屏幕的宽度，决定每个“栏”的宽度，即使在不同大小的屏幕下显示的比例是不变的，从而实现自适应布局。设置“分栏”选择从左到右三个“栏”均分，显示“录入分隔比例”为“8:8:8”，如图17所示。

图17 “录入分隔比例”为“8:8:8”