在鸿蒙ArkTS开发时，书写如下代码
build() {
Column() {
Row() {
Text('短信验证码登录')
Text('忘记密码')
}
.justifyContent(FlexAlign.SpaceBetween)
}
.width('100%')
}
这时justifyContent并没有出现两端对齐的效果
原因是没有设置Row组件的宽度，增加 .width(‘100%’) 即可
build() {
Column() {
Row() {
Text('短信验证码登录')
Text('忘记密码')
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
}
.width('100%')
}
justifyContent设置子组件在主轴上的对齐方式
类型为 FlexAlign
| 名称 | 说明 |
|---|---|
| Start | 主轴首端，Row为左对齐，Column为顶部对齐 |
| Center | 主轴中心，就是居中对齐 |
| End | 主轴末端 |
| SpaceBetween | 第一个元素在首端，最后一个元素在末端 |
| SpaceAround | 第一个元素后最后一个元素离边框的距离是元素之间距离的一半 |
| SpaceEvenly | 元素等间距布局 |