线性布局 (Row/Column)
=================

#### 概述

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)和[Column](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column)构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Row容器内子元素按照水平方向排列，Column容器内子元素按照垂直方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2a/v3/abd1gmSRTfyWckLg9FqD-Q/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=C620C76CA09933FD43AAC5801AFE5B36796674FEC4169E72436707DE12AB5AA2)

在复杂界面中使用多组件嵌套时，若布局组件的嵌套层数过深或嵌套的组件数量过多，将会产生额外开销。建议通过移除冗余节点、利用布局边界减少布局计算、合理采用渲染控制语法及布局组件方法来优化性能。最佳实践请参考[布局优化指导](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-improve-layout-performance)。

**图1** Column容器内子元素排列示意图

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d1/v3/212_-3uAQUi8UYC9GfnOag/zh-cn_image_0000002634008258.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=6975FC9D405E4EE79C7DF5A28C5A5A4A8AC8047508291EE39067B22525DFA14C)

**图2** Row容器内子元素排列示意图

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5f/v3/3FvAIGlGRauM0NsCBhSgHA/zh-cn_image_0000002664207405.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=DCE74F3327616E152365854FB8422F1ACE31FEEF61911561A2D31789D26611B4)

#### 基本概念

*   布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。
    
*   布局子元素：布局容器内部的元素。
    
*   主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向（图示可参考弹性布局[基本概念](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-flex-layout#基本概念)中的主轴）。
    
*   交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向（图示可参考弹性布局[基本概念](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-flex-layout#基本概念)中的交叉轴）。
    
*   间距：布局子元素的间距。
    

#### 布局子元素在排列方向上的间距

在布局容器内，可以通过[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)组件的[space](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row#rowoptions18对象说明)属性或[Column](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column)组件的[space](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column#columnoptions18对象说明)属性设置排列方向上子元素的间距，使各子元素在排列方向上有等间距效果。

#### \[h2\]Column容器内排列方向上的间距

**图3** Column容器内排列方向的间距图

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/04/v3/Xz1RdXDeRNS5B-vYnV1PxQ/zh-cn_image_0000002664327465.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=715AB0863A5B62AEF69E2AB5334413D27EB71EDAC63E4BC60D0AA3B6EF6D606C)

Column({ space: 20 }) {
  Text('space: 20').fontSize(15).fontColor(Color.Gray).width('90%')
  Row().width('90%').height(50).backgroundColor(0xF5DEB3)
  Row().width('90%').height(50).backgroundColor(0xD2B48C)
  Row().width('90%').height(50).backgroundColor(0xF5DEB3)
}.width('100%')

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/30/v3/btSd5YqPQAqxt0diH6HxMA/zh-cn_image_0000002633848356.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=023EA43671E99B325083866DE3169A8A68599F8AE6C6C521E073FDD626A1EA80)

#### \[h2\]Row容器内排列方向上的间距

**图4** Row容器内排列方向的间距图

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/49/v3/6NTygELeSfOl72jsviPILA/zh-cn_image_0000002634008260.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=693EE2896C0F18316375967E66B758FDF21CEC0029B9EAE51E87E19F2ACAD7BF)

Row({ space: 35 }) {
  Text('space: 35').fontSize(15).fontColor(Color.Gray)
  Row().width('10%').height(150).backgroundColor(0xF5DEB3)
  Row().width('10%').height(150).backgroundColor(0xD2B48C)
  Row().width('10%').height(150).backgroundColor(0xF5DEB3)
}.width('90%')

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e4/v3/GQTYyV4JSVGc76HsGaJnvQ/zh-cn_image_0000002664207407.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=FF00FC98143561EC74BCA77FF5A44A40E4058ADD22BD5A74F041EBF5BFB1D3A6)

#### 布局子元素在主轴上的排列方式

在布局容器内，可以通过[justifyContent](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column#justifycontent8)属性设置子元素在容器主轴上的排列方式。可以从主轴起始位置开始排布，也可以从主轴结束位置开始排布，或者均匀分割主轴的空间。

#### \[h2\]Column容器内子元素在垂直方向上的排列

**图5** Column容器内子元素在垂直方向上的排列图

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7f/v3/dOMAFtjGQ0KssiM6uEKWDw/zh-cn_image_0000002664327467.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=C9ED4201D345ADFCFC2B1A473A0B889C4BE295AF840F880FF53CB9C65E984F21)

*   justifyContent(FlexAlign.Start，默认值)：元素在垂直方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
    
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Start)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/33/v3/iovYKoowS0Gz09YSagMEZg/zh-cn_image_0000002633848358.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=1B777ECCC3A4D175597806C0E3F8B0911EE5242BEAEF463A7E3845C53FC5770E)
    
*   justifyContent(FlexAlign.Center)：元素在垂直方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
    
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Center)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/52/v3/NC1K1D0ZTT2rsbK-uTy_qA/zh-cn_image_0000002634008262.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=A2B759C75E8C8B5D925DD44A685D660701C8BD9674A98161007120BC6C1A7A7E)
    
*   justifyContent(FlexAlign.End)：元素在垂直方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
    
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.End)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/89/v3/zXGgolbuTv-Gv3PV6OMx9Q/zh-cn_image_0000002664207409.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=CA2F0519CDCA7F0B0DF56F5D1830BB086E4897B6115457F7CB8494F8464D71DF)
    
*   justifyContent(FlexAlign.SpaceBetween)：垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
    
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceBetween)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/df/v3/Xvdex2dLQke0zF9XJCaN_g/zh-cn_image_0000002664327469.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=383821637FAC97F21AC60B8416493BD18F629E4B1C3FBA8F73301D65436BF08E)
    
*   justifyContent(FlexAlign.SpaceAround)：垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
    
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceAround)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/cf/v3/_W48q1UeRUWwygRPAVYwVw/zh-cn_image_0000002633848360.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=B2032A1B30D6144F8262E078AD762428348093E2606698FBFA8B4EDEE99B17D6)
    
*   justifyContent(FlexAlign.SpaceEvenly)：垂直方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
    
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceEvenly)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/95/v3/j2i8Ulv6RgWjDn6dUKhlJw/zh-cn_image_0000002634008264.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=32DDE089706F5063AA699AE3C2D25EDEC148EE10EA812CCF7B54399A5DAEA299)
    

#### \[h2\]Row容器内子元素在水平方向上的排列

**图6** Row容器内子元素在水平方向上的排列图

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e2/v3/bmxaJRZMTp-opY9nv9dX1Q/zh-cn_image_0000002664207411.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=0E8967020431DCB36D9A2E42CA91DBFC063329193A57784D7BC0DFE03CF4EE22)

*   justifyContent(FlexAlign.Start，默认值)：元素在水平方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
    
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Start)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/94/v3/3xO0Qzb2QGah3fXL1bkVrg/zh-cn_image_0000002664327471.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=187F85F6598975166949BC81C02231BADA23D5D818CD20942EB83CD6E0226AA5)
    
*   justifyContent(FlexAlign.Center)：元素在水平方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
    
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.Center)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2b/v3/pOxC26mZSsKJT-aH67nJ3g/zh-cn_image_0000002633848362.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=F8D171F83017511BF94E99943F3EC0CC349309DB9B9345230BEEE9ADCBC5469C)
    
*   justifyContent(FlexAlign.End)：元素在水平方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
    
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.End)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/94/v3/P-9WC0JDQjiOz-1Txe3igA/zh-cn_image_0000002634008266.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=6EF8576BB383155508BF0B638EF2D2FC1FED903E96804BD5ED59192180EB5EFE)
    
*   justifyContent(FlexAlign.SpaceBetween)：水平方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
    
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceBetween)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9b/v3/bnJPl8MKToOLvo4NgjOlSg/zh-cn_image_0000002664207413.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=75A1228721BA95573E91660A1C16DEC32C8829A5AE35FEB3CE37DCCFD2B9E85A)
    
*   justifyContent(FlexAlign.SpaceAround)：水平方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
    
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceAround)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/82/v3/g5GXoobFS7OwDj67_9LknA/zh-cn_image_0000002664327473.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=2610322E7F18EBA3C718A8F0BF39AF738E359BB42CD89DB3E31F17B1625FB682)
    
*   justifyContent(FlexAlign.SpaceEvenly)：水平方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
    
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceEvenly)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f/v3/w4b565c4RTC5Ujn5Qkw8-Q/zh-cn_image_0000002633848364.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=2CAFD41547912F9809A0ED09D567B73E3D3B7964246EB4C7479E27346BA6A21B)
    

#### 布局子元素在交叉轴上的对齐方式

在布局容器内，可以通过[alignItems](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column#alignitems)属性设置子元素在交叉轴（排列方向的垂直方向）上的对齐方式，且在各类尺寸屏幕中表现一致。其中，交叉轴为垂直方向时，取值为[VerticalAlign](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-appendix-enums#verticalalign)类型，水平方向取值为[HorizontalAlign](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-appendix-enums#horizontalalign)类型。

[alignSelf](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-flex-layout#alignself)属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性，如果设置了alignSelf属性，则在单个子元素上会覆盖alignItems属性。

#### \[h2\]Column容器内子元素在水平方向上的排列

**图7** Column容器内子元素在水平方向上的排列图

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/08/v3/RcJus5FhRfCkHMmjqm4zow/zh-cn_image_0000002634008268.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=6D5DB04284DAE258BA52A0213CB779175E081CBF133BA45961EA74F7721D22BC)

*   HorizontalAlign.Start：子元素在水平方向左对齐。
    
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').alignItems(HorizontalAlign.Start).backgroundColor('rgb(242,242,242)')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e7/v3/gpBG9WEXTJmqp_fm9HhQgg/zh-cn_image_0000002664207415.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=F20EF4B98C83096887FBC4A986444E336AABFFB8796CAD458E5D191CABC8FEFA)
    
*   HorizontalAlign.Center（默认值）：子元素在水平方向居中对齐。
    
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').alignItems(HorizontalAlign.Center).backgroundColor('rgb(242,242,242)')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/6a/v3/24ALYV6DTJiN4wRZf3k4qg/zh-cn_image_0000002664327475.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=0F6C3F1D346D0EC1B8694786827347E0324E7EFB6ED701E0B5603B703EFF3DA8)
    
*   HorizontalAlign.End：子元素在水平方向右对齐。
    
    Column({}) {
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('80%').height(50).backgroundColor(0xF5DEB3)
    }.width('100%').alignItems(HorizontalAlign.End).backgroundColor('rgb(242,242,242)')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2a/v3/dUe48xC0RxOuCGXyPIDYYw/zh-cn_image_0000002633848366.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=92797895C08F2F58A4106B75F34FFFAA1442A7ACF26FA02589DD8B8EB84D8B71)
    

#### \[h2\]Row容器内子元素在垂直方向上的排列

**图8** Row容器内子元素在垂直方向上的排列图

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/88/v3/NS3uJYfuS-qGtwWEVSz19g/zh-cn_image_0000002634008270.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=329278803DB9AA82B685D154D9799735565F926ACB80005A3379999D6BCE5058)

*   VerticalAlign.Top：子元素在垂直方向顶部对齐。
    
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).alignItems(VerticalAlign.Top).backgroundColor('rgb(242,242,242)')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1f/v3/_1uaRmHRQkGovvUd8JhsYg/zh-cn_image_0000002664207417.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=CB4CF342B1B98EA9F474700D267E44E2B575C06FC7EB90D69BF57C8429E8C0F4)
    
*   VerticalAlign.Center（默认值）：子元素在垂直方向居中对齐。
    
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).alignItems(VerticalAlign.Center).backgroundColor('rgb(242,242,242)')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c0/v3/UtAyqLEdQNK09ob-zw-RwA/zh-cn_image_0000002664327477.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=11C01D70D6429C9AB480F3C23B85449FA36613E00C00ADA941754681381D8BCB)
    
*   VerticalAlign.Bottom：子元素在垂直方向底部对齐。
    
    Row({}) {
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xD2B48C)
    
      Column() {
      }.width('20%').height(30).backgroundColor(0xF5DEB3)
    }.width('100%').height(200).alignItems(VerticalAlign.Bottom).backgroundColor('rgb(242,242,242)')
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e/v3/9COjBxSdQXuP6rf3h58XGQ/zh-cn_image_0000002633848368.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=B049425BC40B1B86E013C6FBB244B308DBED2C056773315C12DD5128C9F515E9)
    

#### 自适应拉伸

在线性布局下，常用空白填充组件[Blank](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-blank)，在容器主轴方向自动填充空白空间，达到自适应拉伸效果。Row和Column作为容器，只需要添加宽高为百分比，当屏幕宽高发生变化时，会产生自适应效果。

@Entry
@Component
struct BlankExample {
  build() {
    Column() {
      Row() {
        Text('Bluetooth').fontSize(18)
        Blank()
        Toggle({ type: ToggleType.Switch, isOn: true })
      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }).width('100%')
    }.backgroundColor(0xEFEFEF).padding(20).width('100%')
  }
}

**图9** 竖屏（自适应屏幕窄边）

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d3/v3/asSWuSdyQh-5nYOa-aqsOg/zh-cn_image_0000002634008272.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=20F479FD288D76BC57FDA84E788BE1F4DABCF297C511D2B739C794344960AF3F)

**图10** 横屏（自适应屏幕宽边）

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/be/v3/053FDBuMTAOXdKooD4sydA/zh-cn_image_0000002664207419.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=57CF12CA1C2061E231D2D95F0B74F9F6D37A0C326756520606836C2DAEBFEBA3)

#### 自适应缩放

自适应缩放是指子元素随容器尺寸的变化而按照预设的比例自动调整尺寸，适应各种不同大小的设备。在线性布局中，可以使用以下两种方法实现自适应缩放。

*   父容器尺寸确定时，使用[layoutWeight](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-size#layoutweight)属性设置子元素和兄弟元素在主轴上的权重，忽略元素本身尺寸设置，使它们在任意尺寸的设备下自适应占满剩余空间。
    
    @Entry
    @Component
    struct LayoutWeightExample {
      build() {
        Column() {
          Text('1:2:3').width('100%')
          Row() {
            Column() {
              Text('layoutWeight(1)')
                .textAlign(TextAlign.Center)
            }.layoutWeight(1).backgroundColor(0xF5DEB3).height('100%')
    
            Column() {
              Text('layoutWeight(2)')
                .textAlign(TextAlign.Center)
            }.layoutWeight(2).backgroundColor(0xD2B48C).height('100%')
    
            Column() {
              Text('layoutWeight(3)')
                .textAlign(TextAlign.Center)
            }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')
    
          }.backgroundColor(0xffd306).height('30%')
    
          Text('2:5:3').width('100%')
          Row() {
            Column() {
              Text('layoutWeight(2)')
                .textAlign(TextAlign.Center)
            }.layoutWeight(2).backgroundColor(0xF5DEB3).height('100%')
    
            Column() {
              Text('layoutWeight(5)')
                .textAlign(TextAlign.Center)
            }.layoutWeight(5).backgroundColor(0xD2B48C).height('100%')
    
            Column() {
              Text('layoutWeight(3)')
                .textAlign(TextAlign.Center)
            }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')
          }.backgroundColor(0xffd306).height('30%')
        }
      }
    }
    
    **图11** 横屏
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/40/v3/SUUx0KEPTqWudQNRS6t2YA/zh-cn_image_0000002664327479.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=A315A2DD10C779997197ACAD52443BD2F53C4F1D6EC820DF5017DC992B50AB2E)
    
    **图12** 竖屏
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/8d/v3/KI480FnZTByN1NV3LHYPNg/zh-cn_image_0000002633848370.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=C0DE7DE1EB3647B0DA14BFFA0DE64D45EC9E4F9832D973217C1DF460CEA845B4)
    
*   父容器尺寸确定时，使用百分比设置子元素和兄弟元素的宽度，使他们在任意尺寸的设备下保持固定的自适应占比。
    
    @Entry
    @Component
    struct WidthExample {
      build() {
        Column() {
          Row() {
            Column() {
              Text('left width 20%')
                .textAlign(TextAlign.Center)
            }.width('20%').backgroundColor(0xF5DEB3).height('100%')
    
            Column() {
              Text('center width 50%')
                .textAlign(TextAlign.Center)
            }.width('50%').backgroundColor(0xD2B48C).height('100%')
    
            Column() {
              Text('right width 30%')
                .textAlign(TextAlign.Center)
            }.width('30%').backgroundColor(0xF5DEB3).height('100%')
          }.backgroundColor(0xffd306).height('30%')
        }
      }
    }
    
    **图13** 横屏
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b8/v3/FeOT6q-FSQumVMZSID5ebQ/zh-cn_image_0000002634008274.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=FD51A7CC51BA5469F1C2B967EBD240BDE62C3A06D2D9BBA18AFFF33D1589CCF0)
    
    **图14** 竖屏
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2f/v3/AVJHy8hRQNWDmbG9JtMSOA/zh-cn_image_0000002664207421.png?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=FC1360C9EC247DDF05098EC9EFCB202E2AAAF77EEF3765A9946EBB4A60D5C63F)
    

#### 自适应延伸

自适应延伸是指在不同尺寸设备下，当页面的内容超出屏幕大小而无法完全显示时，可以通过滚动条进行拖动展示。对于线性布局，这种方法适用于容器中内容无法一屏展示的场景。通常有以下两种实现方式。

*   [在List中添加滚动条](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-create-list#添加滚动条)：当List子项过多一屏放不下时，可以将每一项子元素放置在不同的组件中，通过滚动条进行拖动展示。可以通过[scrollBar](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scroll#scrollbar)属性设置滚动条的常驻状态，[edgeEffect](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scroll#edgeeffect)属性设置拖动到内容最末端的回弹效果。
    
*   使用[Scroll](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scroll)组件：在线性布局中，开发者可以进行垂直方向或者水平方向的布局。当一屏无法完全显示时，可以在Column或Row组件的外层包裹一个可滚动的容器组件Scroll来实现可滑动的线性布局。
    
    垂直方向布局中使用Scroll组件：
    
    @Entry
    @Component
    struct ScrollVerticalExample {
      scroller: Scroller = new Scroller();
      private arr: number\[\] = \[0, 1, 2, 3, 4, 5, 6, 7, 8, 9\];
    
      build() {
        Scroll(this.scroller) {
          Column() {
            ForEach(this.arr, (item?:number|undefined) => {
              if(item != undefined){
                Text(item.toString())
                  .width('90%')
                  .height(150)
                  .backgroundColor(0xFFFFFF)
                  .borderRadius(15)
                  .fontSize(16)
                  .textAlign(TextAlign.Center)
                  .margin({ top: 10 })
              }
            }, (item:number) => item.toString())
          }.width('100%')
        }
        .backgroundColor(0xDCDCDC)
        .scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向
        .scrollBar(BarState.On) // 滚动条常驻显示
        .scrollBarColor(Color.Gray) // 滚动条颜色
        .scrollBarWidth(10) // 滚动条宽度
        .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/fd/v3/grwQyf-6SlyqvMuA7SWR0g/zh-cn_image_0000002664327481.gif?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=3357710A9DC24423D7A89AB3593C634DEE175AA78F0D9EFBD8F64521CA7DDA1D)
    
    水平方向布局中使用Scroll组件：
    
    @Entry
    @Component
    struct ScrollHorizontalExample {
      scroller: Scroller = new Scroller();
      private arr: number\[\] = \[0, 1, 2, 3, 4, 5, 6, 7, 8, 9\];
    
      build() {
        Scroll(this.scroller) {
          Row() {
            ForEach(this.arr, (item?:number|undefined) => {
              if(item != undefined){
                Text(item.toString())
                  .height('90%')
                  .width(150)
                  .backgroundColor(0xFFFFFF)
                  .borderRadius(15)
                  .fontSize(16)
                  .textAlign(TextAlign.Center)
                  .margin({ left: 10 })
              }
            })
          }.height('100%')
        }
        .backgroundColor(0xDCDCDC)
        .scrollable(ScrollDirection.Horizontal) // 滚动方向为水平方向
        .scrollBar(BarState.On) // 滚动条常驻显示
        .scrollBarColor(Color.Gray) // 滚动条颜色
        .scrollBarWidth(10) // 滚动条宽度
        .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f4/v3/je1AVDaCT4ehc7qFZ0_ojQ/zh-cn_image_0000002633848372.gif?HW-CC-KV=V1&HW-CC-Date=20260709T132257Z&HW-CC-Expire=86400&HW-CC-Sign=3CBD79D3AFA5E300A7D8E889CAE9E9D5435B20FC52C067EA844CDC49F17C448F)