Column容器:
整个页面沿垂直方向布局
Row容器:
整个页面沿水平方向布局
布局容器的基础知识:
默认存在两根轴,主轴和交叉轴,是相互垂直的
Column容器是垂直方向布局,主轴的方向是垂直方向,交叉轴则是水平方向
Row容器是水平方向布局,主轴的方向是水平方向,交叉轴则是垂直方向
参数:
space:子组件在主轴方向上的间距 可选
Row({ space: 20 }) {
Text('短信验证码登录')
Text('忘记密码?')
}
容器组件的属性:
-
justifyContent:
设置子组件在主轴方向上的对齐格式。参数类型:FlexAlign
Row({space:50}) {
this.imageButton($r('app.media.app_icon'))
this.imageButton($r('app.media.app_icon'))
this.imageButton($r('app.media.app_icon'))
}
.justifyContent(FlexAlign.SpaceEvenly)
.width('100%')
-
alignltems
设置子组件在交叉轴方向上的对齐格式
Column容器中的参数类型HorizontalAlign (水平对齐)
Row容器中的参数类型VerticalAlign (垂直对齐)