Column:沿垂直方向布局的容器
Column(value:{space?: Length}) //space:纵向布局元素间距,默认为0
Column属性:
1,alignItems(设置子组件在水平方向上的对齐格式)
2,justifyContent8+(设置子组件在垂直方向上的对齐格式)
直接上图:
上代码:
@Entry
@Component
struct ColumnT {
build() {
Column() {
Text('space').fontSize(9).fontColor(0x000000).width('90%')
//space:纵向布局元素间距
Column({ space: 5 }) {
Text().width('100%').height(30).backgroundColor(0xAFEEEE)
Text().width('100%').height(30).backgroundColor(0x00FFFF)
}.width('90%').height(80).border({ width: 1 })
Text('alignItems').fontSize(9).fontColor(0x000000).width('90%')
//alignItems:设置子组件在水平方向上的对齐格式(属性有:Start,Center,End),默认Center
Column({ space: 5 }) {
Text().width('50%').height(30).backgroundColor(0xAFEEEE)
Text().width('50%').height(30).backgroundColor(0x00FFFF)
}.alignItems(HorizontalAlign.Center).width('90%').height(80).border({ width: 1 })
Text('justifyContent').fontSize(9).fontColor(0x000000).width('90%')
//justifyContent:设置子组件在垂直方向上的对齐格式
Column() {//注意:此处不能添加space属性,添加之后justifyContent属性失效(基于sdk8)
Text().width('50%').height(30).backgroundColor(0xAFEEEE)
Text().width('50%').height(30).backgroundColor(0x00FFFF)
}.height('15%').border({width:1}).justifyContent(FlexAlign.End)
}
.width('100%')
.height('100%')
}
}