0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙ArkTS容器组件:Column

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-07-05 16:32 次阅读

Column

沿垂直方向布局的容器。

说明:
开发前请熟悉鸿蒙开发指导文档 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

可以包含子组件。

接口

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

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数

参数名参数类型必填参数描述
spacestringnumber

属性

除支持[通用属性]外,还支持以下属性:

名称参数类型描述
alignItems[HorizontalAlign]设置子组件在水平方向上的对齐格式。 默认值:HorizontalAlign.Center 从API version 9开始,该接口支持在ArkTS卡片中使用。
justifyContent8+[FlexAlign]设置子组件在垂直方向上的对齐格式。 默认值:FlexAlign.Start 从API version 9开始,该接口支持在ArkTS卡片中使用。

说明:
HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789是v直接拿
Column布局时若子组件不设置flexShrink则默认不会压缩子组件,即所有子组件主轴大小累加可超过容器主轴。

QQ浏览器截图20240320162546.png

事件

支持[通用事件]

示例

// xxx.ets
@Entry
@Component
struct ColumnExample {
  build() {
    Column({ space: 5 }) {
      // 设置子元素垂直方向间距为5
      Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Column({ space: 5 }) {
        Column().width('100%').height(30).backgroundColor(0xAFEEEE)
        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(0xAFEEEE)
        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(0xAFEEEE)
        Column().width('50%').height(30).backgroundColor(0x00FFFF)
      }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })

      Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Column() {
        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
        Column().width('50%').height(30).backgroundColor(0x00FFFF)
      }.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 })
      
      // 设置子元素垂直方向的对齐方式
      Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Column() {
        Column().width('90%').height(30).backgroundColor(0xAFEEEE)
        Column().width('90%').height(30).backgroundColor(0x00FFFF)
      }.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center)

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

column

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 组件
    +关注

    关注

    1

    文章

    512

    浏览量

    17817
  • 鸿蒙
    +关注

    关注

    57

    文章

    2345

    浏览量

    42823
收藏 人收藏

    评论

    相关推荐

    鸿蒙开发基础-Web组件之cookie操作

    }) ... } ... 本文章主要是对鸿蒙开发当中ArkTS语言的基础应用实战,Web组件里的cookie操作。更多的鸿蒙应用开发技术,可以前往我的主页学习更多,下面是一张
    发表于 01-14 21:31

    鸿蒙入门实战-ArkTS开发

    } 配置属性与布局 自定义组件的组成使用基础组件容器组件等内置组件进行组合。但有时内置组件
    发表于 01-16 17:27

    鸿蒙NEXT-Column和Row组件的使用

    ,介绍Column和Row组件的属性与使用。 2 组件介绍 布局容器概念 线性布局容器表示按照垂直方向或者水平方向排列子
    发表于 01-18 16:44

    鸿蒙ArkTS声明式组件:Blank

    空白填充组件,在容器主轴方向上,空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Colu
    的头像 发表于 06-19 16:21 551次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b>声明式<b class='flag-5'>组件</b>:Blank

    鸿蒙ArkTS容器组件:Flex

    以弹性方式布局子组件容器组件
    的头像 发表于 07-08 10:19 488次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>组件</b>:Flex

    鸿蒙ArkTS容器组件:GridCol

    栅格子组件,必须作为栅格容器组件([GridRow])的子组件使用。
    的头像 发表于 07-08 15:17 390次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>组件</b>:GridCol

    鸿蒙ArkTS容器组件:GridItem

    网格容器中单项内容容器
    的头像 发表于 07-09 09:25 388次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>组件</b>:GridItem

    鸿蒙ArkTS容器组件:Navigator

    路由容器组件,提供路由跳转能力。
    的头像 发表于 07-10 14:55 403次阅读

    鸿蒙ArkTS容器组件:Refresh

    可以进行页面下拉操作并显示刷新动效的容器组件
    的头像 发表于 07-11 16:11 502次阅读

    鸿蒙ArkTS容器组件:Scroll

    可滚动的容器组件,当子组件的布局尺寸超过父组件的尺寸时,内容可以滚动。
    的头像 发表于 07-12 15:24 1224次阅读

    鸿蒙ArkTS容器组件:SideBarContainer

    提供侧边栏可以显示和隐藏的侧边栏容器,通过子组件定义侧边栏和内容区,第一个子组件表示侧边栏,第二个子组件表示内容区。
    的头像 发表于 07-18 15:46 542次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>组件</b>:SideBarContainer

    鸿蒙ArkTS容器组件:Stack

    堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件
    的头像 发表于 07-15 18:23 869次阅读

    鸿蒙ArkTS容器组件:Swiper

    滑块视图容器,提供子组件滑动轮播显示的能力。
    的头像 发表于 07-15 09:51 620次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>组件</b>:Swiper

    鸿蒙ArkTS容器组件:Tabs

    通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图。
    的头像 发表于 07-15 09:48 811次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>组件</b>:Tabs

    鸿蒙ArkTS容器组件:WaterFlow

    瀑布流容器,由“行”和“列”分割的单元格所组成,通过容器自身的排列规则,将不同大小的“项目”自上而下,如瀑布般紧密布局。
    的头像 发表于 07-15 17:35 415次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>组件</b>:WaterFlow