Column 子元素按直方向排列
Row 子元素按水平方向排列
基本概念
主轴：Row 容器主轴为水平方向，Column 容器主轴为垂直方向。
交叉轴：垂直于主轴方向的轴线。Row 容器交叉轴为垂直方向，Column 容器交叉轴为水平方向。
当不指定宽高时，自身默认宽高由子组件决定，这时设置排列方向是看不到效果的。
Column 交叉轴方向即横向，只有 3 个参数 HorizontalAlign.Start，Center，End，即子组件按左，居中，右排列，比较简单。
Row 交叉轴方向即纵向，是由 VerticalAlign.Top,Center,Bottom，即子组件按上，居中，下排列。
以下演示一下主轴方向的排列，也是比较常用的：FlexAlign
Start 首端对齐
Center 中心对齐
End 尾部对齐
SpaceBetween 第一个元与行首对齐，最后一个元素尾对齐，相邻元素间距相同
SpaceAround 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半
SpaceEvenly 相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样
@Entry@Componentstruct test{ build() { Column({space:'40'}){ Row(){ Column(){ Text('1').height(90).width('100%').backgroundColor(0xF5DEB3) Text('2').width('100%').backgroundColor(0xF5DEB3) Text('3').width('100%').backgroundColor(0xF5DEB3) }.height(360).width(50).backgroundColor(Color.Orange) .justifyContent(FlexAlign.SpaceBetween) .alignItems(HorizontalAlign.Start) Column(){ Text('1').width('100%').backgroundColor(0xF5DEB3) Text('2').height(90).width('100%').backgroundColor(0xF5DEB3) Text('3').width('100%').backgroundColor(0xF5DEB3) }.height(360).width(50).backgroundColor(Color.Blue) .justifyContent(FlexAlign.SpaceAround) Column(){ Text('1').width('100%').backgroundColor(0xF5DEB3) Text('2').width('100%').backgroundColor(0xF5DEB3) Text('3').height(90).width('100%').backgroundColor(0xF5DEB3) }.height(360).width(50).backgroundColor(Color.Green) .justifyContent(FlexAlign.SpaceEvenly) }.width('100%').alignItems(VerticalAlign.Center).justifyContent(FlexAlign.SpaceEvenly)//当我们需要在一行首尾增加一个布局时，除了使用RelativeContainer相对布局之外，还可以使用这种方式，利用SpaceBetween首尾排列，然后再设置尾部元素距离右边距，即可实现 Row(){ Column(){}.height(40).width(100).backgroundColor(Color.Green) Column(){}.height(40).width(50).backgroundColor(Color.Brown).margin({right:50}) }.width('100%').justifyContent(FlexAlign.SpaceBetween) }.width('100%').backgroundColor(Color.Gray) }}
复制代码
评论