OpenHarmony——ArkTS声明式开发与应用 课件 项目2-任务2-1 线性布局.pptxVIP

线性布局

目录CONTENTS线性布局的主轴与交叉轴1垂直线性布局容器Column2水平线性布局容器Row3线性布局中的权重设置4线性布局中的空白填充组件Blank5

01线性布局的主轴与交叉轴知识储备

线性布局的主轴与交叉轴布局都是容器组件，可以放置子组件；线性布局的子组件可以沿水平方向或垂直方向线性排列；ArkTS中提供了Row和Column线性布局，Row是按水平方向排列子组件，Column是按垂直方向排列子组件；线性布局有主轴和交叉轴的方法，Row布局的主轴是水平方向，而交叉轴是垂直方向，Column的主轴是垂直方向，交叉轴是水平方向。

02垂直线性布局容器Column知识储备

垂直线性布局容器ColumnColumn组件是沿垂直方向布局子组件，它的主轴是垂直方向，交叉轴是水平方向。ColumnColumn在主轴上的对齐属性是.justifyContent(),用枚举值FlexAlign设置不同的对齐方式。主轴对齐Column在交叉轴上的对齐属性是.alignItems(),用枚举值HorizontalAlign设置不同的对齐方式。交叉轴对齐

Column在主轴方向上的对齐选项justifyContent设置子组件在主轴方向上的对齐格式，默认值为FlexAlign.Start。各枚举值设置的效果如下。垂直方向上的对齐

Column在交叉轴方向上的对齐选项alignIte