鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之线性布局容器Column组件

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之线性布局容器Column组件

一、操作环境

操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1

二、Column组件

沿垂直方向布局的容器。

子组件

可以包含子组件。

接口

Column(value?:{space?: string | number})

参数
参数名 参数类型 必填 默认值 参数描述
space string|number 0 纵向布局元素间距。
属性
名称 参数类型 默认值 描述
alignItems HorizontalAlign HorizontalAlign.Center 设置子组件在水平方向上的对齐格式。
justifyContent8+ FlexAlign FlexAlign.Start 设置子组件在垂直方向上的对齐格式。

三、示例

代码
复制代码
// xxx.ets
@Entry
@Component
struct ColumnExample {
  build() {
    Column() {
      Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Column({ space: 5 }) {
        Column().width('100%').height(30).backgroundColor("#FF1493")
        Column().width('100%').height(30).backgroundColor(0x00FFFF)
      }.width('90%').height(100).border({ width: 1 })

      Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Column() {
        Column().width('50%').height(30).backgroundColor("#FF1493")
        Column().width('50%').height(30).backgroundColor(0x00FFFF)
      }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })

      Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Column() {
        Column().width('50%').height(30).backgroundColor("#FF1493")
        Column().width('50%').height(30).backgroundColor(0x00FFFF)
      }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })

      Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Column() {
        Column().width('30%').height(30).backgroundColor("#FF1493")
        Column().width('30%').height(30).backgroundColor(0x00FFFF)
      }.height('15%').border({ width: 1 }).justifyContent(FlexAlign.Center)

      Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Column() {
        Column().width('30%').height(30).backgroundColor("#FF1493")
        Column().width('30%').height(30).backgroundColor(0x00FFFF)
      }.height('15%').border({ width: 1 }).justifyContent(FlexAlign.End)
    }.width('100%').padding({ top: 5 })
  }
}
图片

好了就写到这吧!

你有时间常去我家看看我在这里谢谢你啦...

我家地址:亚丁号

最后送大家一首诗:

山高路远坑深,

大军纵横驰奔,

谁敢横刀立马?

惟有点赞加关注大军。

相关推荐
Bert丶seven1 小时前
鸿蒙Harmony实战开发教学(No.7)-Image组件基础到进阶篇
华为·harmonyos·arkts·鸿蒙·鸿蒙系统·arkui·开发教学
Bert丶seven7 小时前
鸿蒙Harmony实战开发教学(No.6)-Search组件基础到进阶篇
华为·harmonyos·arkts·鸿蒙·鸿蒙系统·arkui·开发教学
万少7 小时前
HarmonyOS6 应用升级经验分享
harmonyos
蓝冰印7 小时前
HarmonyOS Next 快速参考手册
linux·ubuntu·harmonyos
流影ng7 小时前
【HarmonyOS】并发线程间的通信
typescript·harmonyos
君逸臣劳10 小时前
【Harmony Next】手把手撸一个支持高度自定义的Toast
harmonyos
安卓开发者11 小时前
鸿蒙NEXT传感器开发概述:开启智能感知新时代
华为·harmonyos
安卓开发者1 天前
鸿蒙NEXT按键拦截与监听开发指南
华为·harmonyos
2503_928411561 天前
10.13 Tabs选项卡布局
华为·harmonyos·鸿蒙
我爱学习_zwj1 天前
【鸿蒙进阶-7】鸿蒙与web混合开发
前端·华为·harmonyos