04. 快速上手！HarmonyOS4.0 布局组件（Column/Row）
04. 快速上手！HarmonyOS4.0 布局组件（Column/Row）
全栈若城
发布于 2024-03-30 10:18:50
发布于 2024-03-30 10:18:50
推荐阅读
01.HarmonyOS4.0 工具安装 — 启航篇 02. 快速上手！HarmonyOS4.0 Image组件详解 03. 快速上手！HarmonyOS4.0 Text/Span组件详解
主要内容（思维导图）
主轴和交叉轴概念
在布局容器中，默认存在两根轴，分别是主轴和交叉轴，这两个轴始终是相互垂直的。不同的容器中主轴的方向不一样的。
- 主轴：在Column容器中的子组件是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向；在Row容器中的组件是按照从左到右的水平方向布局的，其主轴的方向是水平方向。
- 交叉轴：与主轴垂直相交的轴线，如果主轴是垂直方向，则交叉轴就是水平方向；如果主轴是水平方向，则交叉轴是垂直方向。
Column组件详解
沿垂直方向布局的容器
alignItems
设置子组件在水平方向上的对齐格式。 默认值：HorizontalAlign.Center
效果展示
名称 | 描述 |
|---|---|
Start | 按照语言方向起始端对齐。 |
Center | 居中对齐，默认对齐方式。 |
End | 按照语言方向末端对齐。 |
代码演示
Column({space:10}) {
Text('item').fontSize(20)
Text('item').fontSize(20)
}.width('100%').height(60).margin({bottom:10}).backgroundColor('#0f0')
.alignItems(HorizontalAlign.Start)
Column({space:15}) {
Text('item').fontSize(20).fontColor('#fff')
Text('item').fontSize(20).fontColor('#fff')
}.width('100%').height(70).margin({bottom:10}).backgroundColor('#00f')
.alignItems(HorizontalAlign.Center)
Column({space:20}) {
Text('item').fontSize(20).fontColor('#fff')
Text('item').fontSize(20).fontColor('#fff')
}.width('100%').height(80).margin({bottom:10}).backgroundColor('#f00')
.alignItems(HorizontalAlign.End)justifyContent
设置子组件在垂直方向上的对齐格式。 默认值：FlexAlign.Start
效果展示
名称 | 描述 |
|---|---|
Start | 元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。 |
Center | 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 |
End | 元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。 |
SpaceBetween | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。 |
SpaceAround | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 |
SpaceEvenly | Flex主轴方向均匀分配弹性元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 |
代码展示
Column() {
Text('item').fontSize(20).fontColor('#fff')
}.width('100%').height(80).margin({bottom:10}).backgroundColor('#f00')
.justifyContent(FlexAlign.Start)
Column() {
Text('item').fontSize(20).fontColor('#fff')
}.width('100%').height(80).margin({bottom:10}).backgroundColor('#f00')
.justifyContent(FlexAlign.Center)
Column() {
Text('item').fontSize(20).fontColor('#fff')
}.width('100%').height(80).margin({bottom:10}).backgroundColor('#f00')
.justifyContent(FlexAlign.End)
Column() {
Text('item').fontSize(20).backgroundColor('#000').fontColor('#fff')
Text('item').fontSize(20).backgroundColor('#000').fontColor('#fff')
Text('item').fontSize(20).backgroundColor('#000').fontColor('#fff')
}.width('100%').height(100).margin({bottom:10}).backgroundColor('#0ff')
.justifyContent(FlexAlign.SpaceBetween)
Column() {
Text('item').fontSize(20).backgroundColor('#000').fontColor('#fff')
Text('item').fontSize(20).backgroundColor('#000').fontColor('#fff')
Text('item').fontSize(20).backgroundColor('#000').fontColor('#fff')
}.width('100%').height(100).margin({bottom:10}).backgroundColor('#0ff')
.justifyContent(FlexAlign.SpaceAround)
Column() {
Text('item').fontSize(20).backgroundColor('#000').fontColor('#fff')
Text('item').fontSize(20).backgroundColor('#000').fontColor('#fff')
Text('item').fontSize(20).backgroundColor('#000').fontColor('#fff')
}.width('100%').height(100).margin({bottom:10}).backgroundColor('#0ff')
.justifyContent(FlexAlign.SpaceEvenly)若城建议
关于Column 的布局其实可以参考Flex 布局 ， 在使用时合理的安排 justifyContent（主轴） 和 alignItems（交叉轴）的组合，会有不同的效果哦！！
拓展组件ColumnSplit
将子组件纵向布局，并在每个子组件之间插入一根横向的分割线。
效果演示
代码展示
Column() {
Text('Column').fontSize(20).backgroundColor('#000').fontColor('#fff')
// Text('Column').fontSize(20).backgroundColor('#000').fontColor('#fff')
// Text('Column').fontSize(20).backgroundColor('#000').fontColor('#fff')
ColumnSplit(){
Text('ColumnSplit').fontSize(20).fontColor('#ff0').width('100%').height(30)
Text('ColumnSplit').fontSize(20).fontColor('#ff0').width('100%').height(30)
Text('ColumnSplit').fontSize(20).fontColor('#ff0').width('100%').height(30)
}.borderWidth(10).resizeable(true).backgroundColor('#0f0')
}.width('100%').height(200).margin({bottom:10}).backgroundColor('#000')
.justifyContent(FlexAlign.SpaceEvenly)Row组件详解
沿水平方向布局容器。
alignItems
设置子组件在垂直方向上的对齐格式。 默认值：VerticalAlign.Center
效果展示
代码展示
Row(){
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
}.width('100%').height(100).backgroundColor('#000')
.alignItems(VerticalAlign.Top)
Row(){
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
}.width('100%').height(100).backgroundColor('#000')
.alignItems(VerticalAlign.Center)
Row(){
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
}.width('100%').height(100).backgroundColor('#000')
.alignItems(VerticalAlign.Bottom)justifyContent
设置子组件在水平方向上的对齐格式。 默认值：FlexAlign.Start
效果展示
代码展示
Row(){
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
}.width('100%').height(100).backgroundColor('#000')
.justifyContent(FlexAlign.Start)
Row(){
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
}.width('100%').height(100).backgroundColor('#000')
.justifyContent(FlexAlign.Center)
Row(){
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
}.width('100%').height(100).backgroundColor('#000')
.justifyContent(FlexAlign.End)
Row(){
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
}.width('100%').height(100).backgroundColor('#000')
.justifyContent(FlexAlign.SpaceBetween)
Row(){
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
}.width('100%').height(100).backgroundColor('#000')
.justifyContent(FlexAlign.SpaceAround)
Row(){
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
Text('item').fontSize(30).fontColor('#fff').padding(10)
}.width('100%').height(100).backgroundColor('#000')
.justifyContent(FlexAlign.SpaceEvenly)拓展组件RowSplit
将子组件横向布局，并在每个子组件之间插入一根纵向的分割线。
效果演示
代码展示
Row(){
Text('item').fontSize(30).fontColor('#fff')
RowSplit(){
Text('item').fontSize(30).fontColor('#fff').width('30%').textAlign(TextAlign.Center)
Text('item').fontSize(30).fontColor('#fff').width('30%').textAlign(TextAlign.Center)
}.width('80%').height(40).resizeable(true).borderWidth(2)
}.width('100%').height(100).backgroundColor('#000')本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2024-03-30，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读