宏盟发展】系统组件专栏
最编程
2024-04-14 07:12:22
...
Column组件
Column沿垂直方向布局的容器。
接口:
Column(value?: {space?: string | number})
参数:
参数名 |
参数类型 |
必填 |
参数描述 |
---|---|---|---|
space |
string | number |
否 |
纵向布局元素垂直方向间距。 从API version 9开始,space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。 默认值:0 说明: 可选值为大于等于0的数字,或者可以转换为数字的字符串。 |
属性:
除支持通用属性外,还支持以下属性:
名称 |
参数类型 |
描述 |
---|---|---|
alignItems |
HorizontalAlign |
设置子组件在水平方向上的对齐格式。 默认值:HorizontalAlign.Center 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
justifyContent8+ |
FlexAlign |
设置子组件在垂直方向上的对齐格式。 默认值:FlexAlign.Start 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
UI结构示例,1列3行文本
@Entry
@Component
struct APage {
build() {
Column({ space: 30 }) {
Row() {
Text("头部")
.width('100%')
.fontColor(Color.White)
.textAlign(TextAlign.Center)
}
.backgroundColor(Color.Red)
.width('50%')
.height(100)
Row() {
Text("内容")
.width('100%')
.fontColor(Color.White)
.textAlign(TextAlign.Center)
}
.backgroundColor(Color.Blue)
.width('50%')
.height(100)
Row() {
Text("尾部")
.width('100%')
.fontColor(Color.White)
.textAlign(TextAlign.Center)
}
.backgroundColor(Color.Pink)
.width('50%')
.height(100)
}
.width('100%')
.height('100%')
}
}
垂直方向对齐
FlexAlign.Start
@Entry
@Component
struct APage {
build() {
Column({ space: 30 }) {
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Start)
}
}
FlexAlign.Center
@Entry
@Component
struct APage {
build() {
Column({ space: 30 }) {
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
FlexAlign.End
@Entry
@Component
struct APage {
build() {
Column({ space: 30 }) {
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.End)
}
}
水平方向对齐
HorizontalAlign.Start
@Entry
@Component
struct APage {
build() {
Column({ space: 30 }) {
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Start)
}
}
HorizontalAlign.Center
@Entry
@Component
struct APage {
build() {
Column({ space: 30 }) {
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Center)
}
}
HorizontalAlign.End
@Entry
@Component
struct APage {
build() {
Column({ space: 30 }) {
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.End)
}
}
上一篇: OS 第 2 章:流程管理
下一篇: Redis 的常用命令
推荐阅读
-
openEuler郑州用户组成立!openEuler与hyperfusion携手共建河南地区用户生态 - 开幕致辞 超融合操作系统业务总经理、openEuler委员会成员蒋振华先生为本次活动致辞。 在本次活动的致辞中,他提到,作为openEuler社区早期的成员,超融合见证了openEuler从成立到在各行业商业落地,再到跨越生态拐点的过程,感谢openEuler提供了一个全产业链共同创新的平台,共同推动创新技术的商业落地。 同时,本次活动得到了郑州市郑东新区大数据管理局、郑州中原科技城投资服务局的大力支持。 郑东新区大数据管理局曹光远 在活动致辞中表示,openEuler的应用和*应用设施的深度优化,为郑东新区数字化转型提供了安全、可靠、高性能的技术基础;郑州中原科技城招商服务局王林表示,郑东新区欢迎所有openEuler生态相关企业扎根当地,围绕openEuler社区共同发展,形成合力。 openEuler社区及运维功能介绍 openEuler技术委员会委员胡峰 openEuler技术委员会委员胡峰先生在本次活动中介绍了openEuler社区目前发展的整体情况,并重点从技术层面介绍了openEuler的运维功能。 openEuler 晚会 胡峰先生介绍智能运维工具 A-Ops 和 openEuler gala、 阿波罗 Apollo、智能漏洞管理解决方案等新功能,以及涵盖各种运维场景的精品运维组件。在*交流环节,许多用户就目前使用的 openEuler 在*交流环节,许多用户就自己在使用openEuler过程中遇到的一些问题与胡峰先生进行了进一步的交流。 软硬结合,构建多样化算力操作系统 Hyperfusion 基于 openEuler 的基础上,结合自身软硬件技术积累,推出了富讯服务器操作系统 FusionOS FusionOS. FusionOS 首席架构师张海亮 分享了 FusionOS FusionOS首席架构师张海亮分享了FusionOS的软硬件协同优势、卓越的性能和可靠性,以及FusionOS在金融、运营商、*、互联网等行业的实践案例,引起了众多用户的兴趣,分享结束后,不少参会者就FusionOS的特点向讲师提问并进行了交流。
-
宏盟发展】系统组件专栏