华为云首页用户手册

ASTRO轻应用 ASTROZERO-设置AstroZero标准页面容器组件属性:基本属性

时间：2024-12-18 16:27:26

ASTRO轻应用 ASTROZERO

基本属性

流式布局
 容器组件默认弹性布局未开启，处于流式布局的状态，如图5所示。

图5 流式布局

在流式布局中，组件默认为块级（Block）元素，即不论组件宽度是多少，默认占据全部父级元素的宽度。如图6所示，向画布中拖拽一个“容器”组件，再向“容器”组件中拖入两个“标题”组件，“标题”组件为块级元素，默认占据全部父级元素宽度，即外层“容器”的宽度，第二个“标题”组件会在第一个“标题”组件的下方。

图6 流式布局中组件为块级元素

流式布局中，组件由上至下依次排布，可以通过“水平对齐方式”对容器内组件进行水平位置调整，如图7、图8所示。

图7 居中水平对齐

 图8 靠右水平对齐
弹性布局
 将“容器”组件属性面板中的“弹性布局”开启后，布局由流式布局切换到弹性布局。在弹性布局的属性配置中，会出现“排列方向”、“水平对齐方式”和“垂直对齐方式”，如图9所示。

图9 弹性布局

为了方便说明弹性布局，向画布中拖拽一个“容器”组件，再向“容器”组件中拖入五个“容器”组件，将每个“容器”组件的宽度和高度设置为100px，并为每个“容器”组件设置不同的背景颜色，在每个“容器”中加入一个“标题”组件，分别显示A、B、C、D、E。

默认弹性布局下，排列方向为“行”，水平对齐方式为“起点对齐”，垂直对齐方式为“起点对齐”，如图10所示。

图10 弹性布局默认效果

排列方向属性决定了容器内组件的排列方向。当排列方向为“行”时，容器内组件从左到右排布。排列方向为“列”时，容器内组件从上到下排布，如图11。

图11 排列方向“列”

水平排列方式属性，决定了容器主轴方向排列方式。当容器排列方向为“行”时，水平排列方式属性作用于水平方向。当容器排列方向为“列”时，水平排列方式属性作用于垂直方向。排列方向为行时起点为左，水平对齐方式选择“中间对齐”和“终点对齐”时，如图12、图13所示。

图12 水平对齐方式选择“中间对齐”

图13 水平对齐方式选择“终点对齐”

垂直排列方式属性决定了容器交叉轴方向排列方式。当容器排列方向为“行”时，垂直排列方式属性作用于垂直方向。容器排列方向为“列”时，垂直排列方式属性作用于水平方向。当容器排列方向为行时起点为上，垂直对齐方式选择“中间对齐”和“终点对齐”时，如图14、图15所示。

图14 垂直对齐方式选择“中间对齐”

图15 垂直对齐方式选择“终点对齐”

通过对弹性布局属性的不同组合配置，实现用户想要实现的布局效果。例如，将排列方向设置为“行”，水平对齐方式和垂直对齐方式设置成“中间对齐”，实现居中布局的效果，如图16所示。

图16 弹性布局实现居中