当前仓库属于关闭状态,部分功能使用受限,详情请查阅 仓库状态说明
1.4K Star 7.4K Fork 8.2K

OpenHarmony/docs
关闭

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
docker
en
zh-cn
application-dev
IDL
account
ads-service/oaid
ai
application-models
application-test
arkts-utils
communication
connectivity
database
device-usage-statistics
device
dfx
faqs
file-management
internationalization
key-features/multi-device-app-dev
kit-readme
media
napi
notification
performance
public_sys-resources
quick-start
reference
apis
arkui-js-lite
arkui-js
arkui-ts
figures
public_sys-resources
Readme-CN.md
ohos-arkui-advanced-counter.md
ohos-arkui-advanced-popup.md
ohos-arkui-advanced-segmentbutton.md
ohos-multimedia-avcastpicker.md
ts-animatorproperty.md
ts-appendix-enums.md
ts-basic-components-blank.md
ts-basic-components-button.md
ts-basic-components-calendarpicker.md
ts-basic-components-checkbox.md
ts-basic-components-checkboxgroup.md
ts-basic-components-component3d.md
ts-basic-components-datapanel.md
ts-basic-components-datepicker.md
ts-basic-components-divider.md
ts-basic-components-formcomponent.md
ts-basic-components-gauge.md
ts-basic-components-image.md
ts-basic-components-imageanimator.md
ts-basic-components-imagespan.md
ts-basic-components-loadingprogress.md
ts-basic-components-marquee.md
ts-basic-components-menu.md
ts-basic-components-menuitem.md
ts-basic-components-menuitemgroup.md
ts-basic-components-navdestination.md
ts-basic-components-navigation.md
ts-basic-components-navrouter.md
ts-basic-components-patternlock.md
ts-basic-components-plugincomponent.md
ts-basic-components-progress.md
ts-basic-components-qrcode.md
ts-basic-components-radio.md
ts-basic-components-rating.md
ts-basic-components-remotewindow.md
ts-basic-components-richeditor.md
ts-basic-components-richtext.md
ts-basic-components-scrollbar.md
ts-basic-components-search.md
ts-basic-components-select.md
ts-basic-components-slider.md
ts-basic-components-span.md
ts-basic-components-stepper.md
ts-basic-components-stepperitem.md
ts-basic-components-text.md
ts-basic-components-textarea.md
ts-basic-components-textclock.md
ts-basic-components-textinput.md
ts-basic-components-textpicker.md
ts-basic-components-texttimer.md
ts-basic-components-timepicker.md
ts-basic-components-toggle.md
ts-basic-components-web.md
ts-basic-components-xcomponent.md
ts-basic-gestures-longpressgesture.md
ts-basic-gestures-pangesture.md
ts-basic-gestures-pinchgesture.md
ts-basic-gestures-rotationgesture.md
ts-basic-gestures-swipegesture.md
ts-basic-gestures-tapgesture.md
ts-canvasrenderingcontext2d.md
ts-combined-gestures.md
ts-components-canvas-canvas.md
ts-components-canvas-canvasgradient.md
ts-components-canvas-canvaspattern.md
ts-components-canvas-imagebitmap.md
ts-components-canvas-imagedata.md
ts-components-canvas-matrix2d.md
ts-components-canvas-path2d.md
ts-components-offscreencanvas.md
ts-components-summary.md
ts-composite-components-chip.md
ts-composite-components-composelistitem.md
ts-composite-components-composetitlebar.md
ts-composite-components-dialog.md
ts-composite-components-editabletitlebar.md
ts-composite-components-filter.md
ts-composite-components-progressbutton.md
ts-composite-components-selectionmenu.md
ts-composite-components-selecttitlebar.md
ts-composite-components-splitlayout.md
ts-composite-components-subheader.md
ts-composite-components-swiperefresher.md
ts-composite-components-tabtitlebar.md
ts-composite-components-toolbar.md
ts-composite-components-treeview.md
ts-container-ability-component.md
ts-container-alphabet-indexer.md
ts-container-badge.md
ts-container-column.md
ts-container-columnsplit.md
ts-container-counter.md
ts-container-effectcomponent.md
ts-container-flex.md
ts-container-flowitem.md
ts-container-folderstack.md
ts-container-formlink.md
ts-container-grid.md
ts-container-gridcol.md
ts-container-gridcontainer.md
ts-container-griditem.md
ts-container-gridrow.md
ts-container-hyperlink.md
ts-container-list.md
ts-container-listitem.md
ts-container-listitemgroup.md
ts-container-navigator.md
ts-container-panel.md
ts-container-refresh.md
ts-container-relativecontainer.md
ts-container-row.md
ts-container-rowsplit.md
ts-container-scroll.md
ts-container-sidebarcontainer.md
ts-container-stack.md
ts-container-swiper.md
ts-container-tabcontent.md
ts-container-tabs.md
ts-container-ui-extension-component.md
ts-container-waterflow.md
ts-custom-component-api.md
ts-custom-component-lifecycle.md
ts-drawing-components-circle.md
ts-drawing-components-ellipse.md
ts-drawing-components-line.md
ts-drawing-components-path.md
ts-drawing-components-polygon.md
ts-drawing-components-polyline.md
ts-drawing-components-rect.md
ts-drawing-components-shape.md
ts-explicit-animatetoimmediately.md
ts-explicit-animation.md
ts-gesture-customize-judge.md
ts-gesture-settings.md
ts-keyframeAnimateTo.md
ts-media-components-video.md
ts-methods-action-sheet.md
ts-methods-alert-dialog-box.md
ts-methods-calendarpicker-dialog.md
ts-methods-custom-dialog-box.md
ts-methods-datepicker-dialog.md
ts-methods-menu.md
ts-methods-textpicker-dialog.md
ts-methods-timepicker-dialog.md
ts-motion-path-animation.md
ts-offscreencanvasrenderingcontext2d.md
ts-page-transition-animation.md
ts-particle-animation.md
ts-pixel-units.md
ts-security-components-locationbutton.md
ts-security-components-pastebutton.md
ts-security-components-savebutton.md
ts-securitycomponent-attributes.md
ts-state-management.md
ts-transition-animation-component.md
ts-transition-animation-geometrytransition.md
ts-transition-animation-shared-elements.md
ts-types.md
ts-universal-attributes-accessibility.md
ts-universal-attributes-attribute-modifier.md
ts-universal-attributes-background.md
ts-universal-attributes-border-image.md
ts-universal-attributes-border.md
ts-universal-attributes-click-effect.md
ts-universal-attributes-click.md
ts-universal-attributes-component-id.md
ts-universal-attributes-cursor.md
ts-universal-attributes-drag-drop.md
ts-universal-attributes-enable.md
ts-universal-attributes-expand-safe-area.md
ts-universal-attributes-flex-layout.md
ts-universal-attributes-focus.md
ts-universal-attributes-foreground-blur-style.md
ts-universal-attributes-foreground-color.md
ts-universal-attributes-gradient-color.md
ts-universal-attributes-grid.md
ts-universal-attributes-hit-test-behavior.md
ts-universal-attributes-hover-effect.md
ts-universal-attributes-image-effect.md
ts-universal-attributes-layout-constraints.md
ts-universal-attributes-location.md
ts-universal-attributes-menu.md
ts-universal-attributes-modal-transition.md
ts-universal-attributes-monopolize-events.md
ts-universal-attributes-obscured.md
ts-universal-attributes-on-child-touch-test.md
ts-universal-attributes-opacity.md
ts-universal-attributes-outline.md
ts-universal-attributes-overlay.md
ts-universal-attributes-polymorphic-style.md
ts-universal-attributes-popup.md
ts-universal-attributes-renderfit.md
ts-universal-attributes-restoreId.md
ts-universal-attributes-sharp-clipping.md
ts-universal-attributes-sheet-transition.md
ts-universal-attributes-size.md
ts-universal-attributes-text-style.md
ts-universal-attributes-touch-target.md
ts-universal-attributes-transformation.md
ts-universal-attributes-use-effect.md
ts-universal-attributes-visibility.md
ts-universal-attributes-z-order.md
ts-universal-component-area-change-event.md
ts-universal-component-visible-area-change-event.md
ts-universal-events-click.md
ts-universal-events-drag-drop.md
ts-universal-events-key.md
ts-universal-events-keyboardshortcut.md
ts-universal-events-show-hide.md
ts-universal-events-touch.md
ts-universal-focus-event.md
ts-universal-mouse-key.md
errorcodes
figures
js-service-widget-ui
native-apis
native-lib
Readme-CN.md
native-api-intro.md
syscap-list.md
syscap.md
security
task-management
telephony
tools
ui
web
webgl
windowmanager
Readme-CN.md
Samples.md
application-dev-guide-for-gitee.md
application-dev-guide.md
website.md
contribute
design
device-dev
figures
readme
release-notes
third-party-cases
third-party-components
Legal-Notices.md
OpenHarmony-Overview_zh.md
glossary.md
readme.md
website.md
.gitattributes
.gitignore
CODEOWNERS
DCO.txt
LICENSE
OAT.xml
README.md
README_zh.md
image.png
克隆/下载
ts-container-column.md 3.60 KB
一键复制 编辑 原始数据 按行查看 历史

Column

沿垂直方向布局的容器。

说明:

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

可以包含子组件。

接口

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

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

参数:

参数名 参数类型 必填 参数描述
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卡片中使用。

说明:

Column布局时若子组件不设置flexShrink则默认不会压缩子组件,即所有子组件主轴大小累加可超过容器主轴。

事件

支持通用事件

示例

// xxx.ets
@Entry
@Component
struct ColumnExample {
  build() {
    Column({ space: 5 }) {
      // 设置子元素垂直方向间距为5
      Text('space').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)').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)').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)').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)').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)').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

Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
其他
1
https://gitee.com/openharmony/docs.git
git@gitee.com:openharmony/docs.git
openharmony
docs
docs
OpenHarmony-4.1-Beta1

搜索帮助