线性布局 (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/10/v3/PPGMqwEdQ8Ke6Uualg_xlQ/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=A6DECCA6B83F84BACE9817B20CBA62B35A5829009F7E97D05E8571B626799BA0)

在复杂界面中使用多组件嵌套时，若布局组件的嵌套层数过深或嵌套的组件数量过多，将会产生额外开销。建议通过移除冗余节点、利用布局边界减少布局计算、合理采用渲染控制语法及布局组件方法来优化性能。最佳实践请参考[布局优化指导](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/b3/v3/v_9_0Yn3TFervWqniPdizg/zh-cn_image_0000002625107351.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=09EF0F36E4468471A7F3485DBDA88B7390CE042A51C9008D0E715AEAC59AD423)

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/cf/v3/bIahTcSSS8eGcrj-zJG_pA/zh-cn_image_0000002594667834.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=E24BCF5CBC0692C173E85F225DA7180A0B424F572676BE20C57E67FEC9121E14)

#### 基本概念

*   布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。
    
*   布局子元素：布局容器内部的元素。
    
*   主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。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/88/v3/k7f8v-phS_mUva-mR0DjIA/zh-cn_image_0000002594827762.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=67DA2DEE147C2F1F05E1D2581215B3F9F68DF53526CD075176D9C07FABE56462)

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/f8/v3/Nae1VS2SS9aL5swDBAHRQg/zh-cn_image_0000002625187209.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=7FDA98E1D7F7CB465AAFE85FFD370A3208F85E8957DF993BF0EBE9D55A658ED0)

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

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a3/v3/Gjhq346zTJ-DXJf9E83bCA/zh-cn_image_0000002625107353.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=C6AD50361EF0817842063BFBA81B277A4740E74243932CCE1450540D573AA076)

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/ed/v3/Z-Qj1y3YTRyMjJ1E743YWA/zh-cn_image_0000002594667836.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=5D06736EBC90E4BA3D58927B987AC70D77C3F95FD939C6FA261FF0747A9CAFAE)

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

在布局容器内，可以通过[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/f6/v3/vsWYFd_EQDiRC_zFYRhKnA/zh-cn_image_0000002594827764.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=A1DA377A1FAEB5FB1C5BB7F51632AD7576BFA1368852B7883843B8B3DA3E6B36)

*   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/1f/v3/p5EK4EkdRo2ozryxmfaY9A/zh-cn_image_0000002625187211.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=CC0BC85687A29EC26B11ED48BD0E4E100C36FB39044EA9A31824EC422F416ABA)
    
*   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/26/v3/b2UnZTl_QpGhSuZj-_qmgw/zh-cn_image_0000002625107355.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=092E4BC167225D839AB3BC1D92DC335FC2660C8E21DD69E368C1104DE5934EC7)
    
*   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/c4/v3/4F-jugydTqyPO1tVAs0eXQ/zh-cn_image_0000002594667838.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=CE32C06421D36C6B30B3902CB0824AE9EEFDA355EE22708353097DC4443080A8)
    
*   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/69/v3/_3y8d8EUTua1h9_IfUIqxg/zh-cn_image_0000002594827766.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=A946111DE2A122F7ABCC60AB504364B7B74773B28FE17AA4D469E3FB9583760F)
    
*   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/05/v3/AlbvLiRxRZ2-qfI6XFLN9g/zh-cn_image_0000002625187213.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=DC86595C337695E6C11C7A4C5F64E1FC6810960EB3A0D3C8B6BCBBB869FEC45C)
    
*   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/71/v3/XjGdwcvlS5K44KgwFNDIvw/zh-cn_image_0000002625107357.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=3DC17AFB652E7CA25A56A5AE6F66A3015E57E3346676D8886B2DD71DBB3ED93F)
    

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

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/15/v3/VHKt4cJSTTKhy6H6CpNA-g/zh-cn_image_0000002594667840.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=BC009DBD054C93BAA96D2669678BE0134565230EBF704E58D53A9DD615D93A65)

*   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/8d/v3/fEOpPHZXRLCkD6SWb-KCeA/zh-cn_image_0000002594827768.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=BCF999098A201C8924B4710C92EE89B292A798EEFBE483F3C1B6B82F1A83DBEA)
    
*   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/e7/v3/y7lIn_hAT1SRTKVACIxoZA/zh-cn_image_0000002625187215.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=0F83CA5C66CC9BFAC89E6A323BB52A966DEBC730BAB00193D77F4B8E14ABE17B)
    
*   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/8e/v3/kN7Xz5cNQkm65ieVHZbZUg/zh-cn_image_0000002625107359.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=600E1DF8CBC7ED988BFA0C0DD5E80879120960DCA718507E49B964D3C0DAD723)
    
*   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/e8/v3/tDMhDj4xTrGjW9JtZTjupQ/zh-cn_image_0000002594667842.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=44493E39AAFC72B46FF0B429B063017359EC1EC0D5B12F00858691D1C0D2B305)
    
*   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/b1/v3/08BrQS1yRy6HFcCbrPtsTQ/zh-cn_image_0000002594827770.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=5D33989089056FDB5F5C9EA58C0CC7DB00D985A2B5C0C10B0E8865022DD3FED5)
    
*   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/24/v3/9AV02w1vQXGZSmBodLH__w/zh-cn_image_0000002625187217.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=470E62485591ADC65C4519D87053F34DCD3C128FE22AC74B8BE177D24A8929F0)
    

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

在布局容器内，可以通过[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/52/v3/lIwqSl9HTCGhdbQ00sSBcw/zh-cn_image_0000002625107361.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=374C219559B447743DD66B5F04AD40F2F066673DA75B893D5DFA2A3FFBF3705F)

*   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/6a/v3/6oZSpK37T02_zorZyz4VGw/zh-cn_image_0000002594667844.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=87494225B0948361BFD8421C55093563FCC3F9183DF09B95BC04F5A5FE022F93)
    
*   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/d3/v3/LnidTi_pQVWJoVzNvM089w/zh-cn_image_0000002594827772.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=EDE7703A05639C2E4DD7FB653A3710D9423CBB166E5D8DCC4916D4FDAF5D5C85)
    
*   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/90/v3/ehG8Xr5LS12ALgFOappmCQ/zh-cn_image_0000002625187219.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=F46DAC535B1F9B62EDC89F3494D70AF42CE10F8763B0E9F20F4A04E5D1F24F7C)
    

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

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f5/v3/F5OStJiVSuWRXxdIl-ew7A/zh-cn_image_0000002625107363.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=5E7C642AC11CCE642449541AA3B85B2A7054BF5E75CE88E89ABFA31F100968ED)

*   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/48/v3/-TLNJR4hSGKU-MdGm78W8Q/zh-cn_image_0000002594667846.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=B77EC0221BBD5FF6DAD69A3670CCEC94A6FF7FC87DF96C86525CA021BEA83048)
    
*   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/f5/v3/Zsixn4ZORGqVYuAyKhievA/zh-cn_image_0000002594827774.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=4E9490842558785213CDF76615B59AE3F0904F37D135124DF4D24597FBC69020)
    
*   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/8b/v3/Ziom1CLvSWy6Lex_svS22Q/zh-cn_image_0000002625187221.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=9DC47A7232FB6CB1B7CDE634A9A1C5FBA5DFE5020B8180928C338E6D920F6D42)
    

#### 自适应拉伸

在线性布局下，常用空白填充组件[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/4e/v3/BofSoum9Rsuahw-tqt3Ckw/zh-cn_image_0000002625107365.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=2B98250F36E09DCFD5B26F9A0D73CE80F15F0B0F18D6DA1AEA6789FAFE5B1DBD)

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9d/v3/ZLq-tDUrTA2YWQYFLKEGKQ/zh-cn_image_0000002594667848.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=C6A7DCA172157E8F51753CECE001969D7A49CBEB728FEF6C92CE1A6EF6C82083)

#### 自适应缩放

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

*   父容器尺寸确定时，使用[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/28/v3/BTgwvHQLTXCn-u0SVxIjeA/zh-cn_image_0000002594827776.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=86357713BA63A4805E7E8902C2E335E87E0128C7817E1F32D11063E3F20A5C2A)
    
    **图12** 竖屏
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d5/v3/MY8lR6J3S8OVsxy2t4KBZA/zh-cn_image_0000002625187223.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=1F97952132F9109B0E4DCD3E9134A88611930371849661003C08C13B91F29CC1)
    
*   父容器尺寸确定时，使用百分比设置子元素和兄弟元素的宽度，使他们在任意尺寸的设备下保持固定的自适应占比。
    
    @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/a9/v3/7ouyA5l5TSK3icRbT9Lk6Q/zh-cn_image_0000002625107367.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=50AECA772087EF9F9B94D7BE31DE0761DD7FB16F9AA803D1EE0F8F2F7042E492)
    
    **图14** 竖屏
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7b/v3/OKV1THTzRumeEiY3LqACmw/zh-cn_image_0000002594667850.png?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=1177013348782D8F139EBB3618A4504A000093593E217BFD07D1B196901182AB)
    

#### 自适应延伸

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

*   [在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/f6/v3/SbEz9cNJTbumOv9P1OaXDw/zh-cn_image_0000002594827778.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=0683BA621E1939525527EE89CF3DE2B62FED284CD1068639FB7221323474B52E)
    
    水平方向布局中使用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/8/v3/1JK4ZtYYTNq1AR_GdKhYpQ/zh-cn_image_0000002625187225.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073302Z&HW-CC-Expire=86400&HW-CC-Sign=46E956152CDAF5B34664B3459465DA38A9D2B823DDFAF6AFD674B75884475710)