介绍
沿垂直方向布局的容器，该布局内的控件，都是独占一行的
接口
Column(value?: {space?: string | number})
参数
- space：类型：
string | number，元素垂直方向间距。
可选值为 大于等于0 的数字，或者可以转换为数字的字符串。默认值：0，单位：vp
注意：justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。
简单例子
@Entry
@Component
struct Index {
build() {
Column() {
Text('column布局：')
Text('用户名：')
Text('密码：')
// Divider()
}
// .alignItems(HorizontalAlign.Start)
}
}
例子：观察子控件的默认宽度
通过下面例子可以得出结论：
- 子控件没有设置宽度时，由内部文字撑开
- 子控件默认是水平居中对齐（可通过
alignItems属性设置水平对齐方式）
@Entry
@Component
struct Index {
build() {
Column() {
Text('column布局：')
.border({
width:1,
color:Color.Red
})
Text('用户名：')
.border({
width:1,
color:Color.Red
})
Text('密码：')
.border({
width:1,
color:Color.Red
})
// Divider()
}
// .alignItems(HorizontalAlign.Start)
}
}
例子：观察Column布局的宽度、高度
通过下面例子可以得出结论：Column布局的宽度、高度，如果没有设置，那么由子控件撑开
@Entry
@Component
struct Index {
build() {
Column() {
Text('column布局：')
.border({
width:1,
color:Color.Red
})
Text('用户名：')
.border({
width:1,
color:Color.Red
})
Text('密码：')
.border({
width:1,
color:Color.Red
})
// Divider()
}
// .height("100%")
.border({ // 设置Column布局的边框
width:2,
color:Color.Green
})
// .alignItems(HorizontalAlign.Start) // 靠左对齐
// .justifyContent(FlexAlign.Center)
}
}
属性：alignItems 水平方向对齐方式
设置子组件在水平方向上的对齐方式
alignItems(value: HorizontalAlign)
参数
- value：类型：HorizontalAlign，必填，子组件在水平方向上的对齐格式。
HorizontalAlign.Start：左对齐。HorizontalAlign.Center：居中对齐，默认对齐方式。HorizontalAlign.End：右对齐。
例子：靠左对齐
@Entry
@Component
struct Index {
build() {
Column() {
Text('column布局：')
.border({
width:1,
color:Color.Red
})
Text('用户名：')
.border({
width:1,
color:Color.Red
})
Text('密码：')
.border({
width:1,
color:Color.Red
})
// Divider()
}
.alignItems(HorizontalAlign.Start) // 靠左对齐
}
}
属性：justifyContent 垂直方向上的对齐方式
设置子组件在垂直方向上的对齐方式
justifyContent(value: FlexAlign)
参数
- value：类型：FlexAlign，必填，子组件在垂直方向上的对齐格式。默认值：
FlexAlign.Start
FlexAlign 枚举
提示：看文字不好理解，详见下面例子
Start：元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
垂直方向靠顶部对齐，元素紧挨在一起
Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
垂直方向居中对齐，元素紧挨在一起
End：元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
垂直方向靠底部对齐，元素紧挨在一起
SpaceEvenly：Flex主轴方向均匀分配弹性元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
元素垂直方向均匀分配，且距离相同
SpaceBetween：Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
第一个元素与行首对齐，最后一个元素与行尾对齐。其余元素垂直方向均匀分配，且距离相同。
SpaceAround：Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
例子：FlexAlign.Center
垂直方向居中对齐，元素紧挨在一起
@Entry
@Component
struct Index {
build() {
Column() {
Text('column布局：')
.border({
width:1,
color:Color.Red
})
Text('用户名：')
.border({
width:1,
color:Color.Red
})
Text('密码：')
.border({
width:1,
color:Color.Red
})
// Divider()
}
// 设置Column布局高度，否则 justifyContent 无效
.height("50%")
.border({ // 设置Column布局的边框
width:2,
color:Color.Green
})
// .alignItems(HorizontalAlign.Start) // 靠左对齐
// Column布局高度比子控件要高，才能看出效果，所以要设置高度
// 设置垂直方向对齐方式
.justifyContent(FlexAlign.Center)
}
}
例子：FlexAlign.End
垂直方向靠底部对齐，元素紧挨在一起
例子：FlexAlign.SpaceEvenly
元素垂直方向均匀分配，且距离相同
例子：FlexAlign.SpaceBetween
与 SpaceEvenly 类似，但是，第一个元素与顶部对齐，最后一个元素与底部对齐。其余元素垂直方向均匀分配，且距离相同。
例子：FlexAlign.SpaceAround
与 SpaceEvenly 类似，元素垂直方向均匀分配，且距离相同。
但是，第一个元素到顶部的距离、最后一个元素到底部的距离，是相邻元素之间距离的一半
