# 线性布局 (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://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-optimization-guidance)。 **图1** Column容器内子元素排列示意图 ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7f/v3/cYIBKP83QSKi-pWlt0GLjA/zh-cn_image_0000002809049397.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=16577483D6F9E09487D9A79D4425EA5B6416B98B4F7DBA5EC7FF12721F5022D0) **图2** Row容器内子元素排列示意图 ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/48/v3/zjPQwNsgSSitxzUrYZwngQ/zh-cn_image_0000002779849832.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=73C11CD7D8690DF58899FB5B4DAFCAF370790EF6040DE7754C84D3A9119B4153) ## 基本概念 * 布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。 * 布局子元素：布局容器内部的元素。 * 主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。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对象说明)属性设置排列方向上子元素的间距，使各子元素在排列方向上有等间距效果。 ### Column容器内排列方向上的间距 **图3** Column容器内排列方向的间距图 ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/6f/v3/uYQb1aspRByfNazs8FbQ0w/zh-cn_image_0000002779689862.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=BE6C77128FCABD4BD98FF4DE801A277F715AEFE11E84119E7312360B05A66111) ```TypeScript 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/8f/v3/6pwQZJlFTxuL7mp3D4KAzQ/zh-cn_image_0000002809009483.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=1C8E5B5462781EC6A4BFF72505B7CB179D0A230C6F3C1A39889D8AFFEDAAA324) ### Row容器内排列方向上的间距 **图4** Row容器内排列方向的间距图 ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/cd/v3/bTN9ia3KT5qEUOTcmlLTVQ/zh-cn_image_0000002809049399.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=57D40FC3338890C6CBB7514FEC1DB808CBEA768B324A74E26F3B73CCA4F78D19) ```TypeScript 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/6e/v3/Rcte0VlVT1uzj9ysxZxRrg/zh-cn_image_0000002779849834.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=7F8A5A4B002015C476096D449551AC40FAB1B60357C9534218747AF2B1DC8F16) ## 布局子元素在主轴上的排列方式 在布局容器内，可以通过[justifyContent](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column#justifycontent8)属性设置子元素在容器主轴上的排列方式。可以从主轴起始位置开始排布，也可以从主轴结束位置开始排布，或者均匀分割主轴的空间。 ### Column容器内子元素在垂直方向上的排列 **图5** Column容器内子元素在垂直方向上的排列图 ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/53/v3/zgl3oYJWQa6_W3Li6pPITw/zh-cn_image_0000002779689864.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=A6A8E52F67574F0CD4C6BBAA14A329933C1C851CECA4EFE98C24EC74C5E46519) * justifyContent(FlexAlign.Start，默认值)：元素在垂直方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。 ```TypeScript 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/f3/v3/OkDfBnpyRtShTvL0o0EDtw/zh-cn_image_0000002809009485.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=55DF4E4BC65224E897448466258340AB3A5DF9FBDAFF29311B3F34A61EFD6BFD) * justifyContent(FlexAlign.Center)：元素在垂直方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 ```TypeScript 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/84/v3/HMPBwqX4Qa6ul4zbkGkRrg/zh-cn_image_0000002809049401.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=02222599D5A80216C3D7006057B3EE28F602E9E1B6177B1281A3B2D94A312294) * justifyContent(FlexAlign.End)：元素在垂直方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。 ```TypeScript 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/1d/v3/bSc4CUuVSwio0ZKFVEecUA/zh-cn_image_0000002779849836.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=386C3D5822DA23A73AEC416E21C658CE5BA14E8C1ED7EFA33FA5314ECDE78F3A) * justifyContent(FlexAlign.SpaceBetween)：垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。 ```TypeScript 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/fe/v3/9A7pztr8RMOAH6FIyLJ5pQ/zh-cn_image_0000002779689866.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=158ADA4102B73687F1EBB6D1429CDECDC467770A8DCF3FD252B61859D6606BB6) * justifyContent(FlexAlign.SpaceAround)：垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 ```TypeScript 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/e3/v3/td7X8KaGQ1yV_-5drpjc_g/zh-cn_image_0000002809009487.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=C4BB3D4333DEA682B60A9F472E7507AF99A9C8D4176337F02FAC736365CB5C01) * justifyContent(FlexAlign.SpaceEvenly)：垂直方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 ```TypeScript 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/5c/v3/UDca4F-sR--1MXmNsr1WZA/zh-cn_image_0000002809049403.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=FCF74CD2E82C1FDFEA8BDC57267A8C6D22B7253747340460B23F763A8C0D57B5) ### Row容器内子元素在水平方向上的排列 **图6** Row容器内子元素在水平方向上的排列图 ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c9/v3/wij3vfe_RoyBwVAFOfhC9A/zh-cn_image_0000002779849838.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=0765B0A6D67DF3E7F55D10302310CA52A03F0F15924AA2201F1D067752E40E77) * justifyContent(FlexAlign.Start，默认值)：元素在水平方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。 ```TypeScript 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/8b/v3/tbErS45cSVWZb2v-Xp-zxg/zh-cn_image_0000002779689868.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=7A4B8F901593FBFB518B335EF780B449A4BAA91BD82BBD9EDD563E97FE57E253) * justifyContent(FlexAlign.Center)：元素在水平方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 ```TypeScript 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/2e/v3/HuS2IPM0QtGZjt0I-edr8Q/zh-cn_image_0000002809009489.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=592B6CF86910B51D67FC5F0A6910953EA451AA2F61034481CBABDEF67C67269F) * justifyContent(FlexAlign.End)：元素在水平方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。 ```TypeScript 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/81/v3/1E_FeZX0S0O_z_O_glTHsQ/zh-cn_image_0000002809049405.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=DF7DC9A2BFF13837808ACC96A96A0BF2AFCCEFD1BEF59260AAB0389F6B8746A5) * justifyContent(FlexAlign.SpaceBetween)：水平方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。 ```TypeScript 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/59/v3/pRyrKEqzRgSQUlssL-FmHQ/zh-cn_image_0000002779849840.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=1BBD0837777A90CDBF528A9C7046BA5C6E33FE6352C6F7787791A9B9C64BB248) * justifyContent(FlexAlign.SpaceAround)：水平方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 ```TypeScript 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/52/v3/91n3EoUpSg2vOOi9NFIZBA/zh-cn_image_0000002779689870.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=D25D3D5393E35715564C4C4AF3732A187D6B7B3F6F0CFCB0825331D0FE652EEE) * justifyContent(FlexAlign.SpaceEvenly)：水平方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 ```TypeScript 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/3a/v3/11eQq42uSWK7QuhEyYJe5Q/zh-cn_image_0000002809009491.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=49B69E61ABEFFA0884991D910545609A088366E61B93E4493287C39EBFBB6F9E) ## 布局子元素在交叉轴上的对齐方式 在布局容器内，可以通过[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属性。 ### Column容器内子元素在水平方向上的排列 **图7** Column容器内子元素在水平方向上的排列图 ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7d/v3/GYXKTec0QvOfkT5YE-s4_g/zh-cn_image_0000002809049407.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=9C1A88A3F8FDF7559D356EA504474914D191FE4C8E289C016EEDC8F9068A25E1) * HorizontalAlign.Start：子元素在水平方向左对齐。 ```TypeScript 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/d0/v3/1r1nA37MQDahvfqcHDIXDg/zh-cn_image_0000002779849842.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=6D8F942D6CC548FBD7BF9D6500AA115F6D8172D6CE105E1AA2D001FBA5A026BA) * HorizontalAlign.Center（默认值）：子元素在水平方向居中对齐。 ```TypeScript 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/10/v3/77qYqeljSz6tj7SoJsUcFw/zh-cn_image_0000002779689872.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=395270EAAB0DFE99EF2A21DC6576B9DBA0CF5D060DEF3366D2233872537916A0) * HorizontalAlign.End：子元素在水平方向右对齐。 ```TypeScript 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/89/v3/VDwYiWJxScS3fLC79_SdKg/zh-cn_image_0000002809009493.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=E07B83A9AA2CFB82FDF4589DE31DD1268554102789D4E96D300FBD355C1209E8) ### Row容器内子元素在垂直方向上的排列 **图8** Row容器内子元素在垂直方向上的排列图 ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/60/v3/CeoobfjZSiytIdwiOUcusg/zh-cn_image_0000002809049409.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=662D81DF06A8392A9FA9FB4BD21C2D8B393772F434B0CC2B9A77948C1FABD6D6) * VerticalAlign.Top：子元素在垂直方向顶部对齐。 ```TypeScript 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/96/v3/vUGP1Ie9QnCeBWt-c2z5fQ/zh-cn_image_0000002779849844.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=DB03208489E1A4378C454F54F06ACECF5B40B9FC9E20957119CB4304C86F48BE) * VerticalAlign.Center（默认值）：子元素在垂直方向居中对齐。 ```TypeScript 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/5/v3/Xl7wjs2LRKqXOfe2IaGwEg/zh-cn_image_0000002779689874.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=25C594A70FF40478CC22788D337736A595E0221D25A77CFD1745EB0A57DC115A) * VerticalAlign.Bottom：子元素在垂直方向底部对齐。 ```TypeScript 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/a7/v3/VexyBzUxQgqsShEnVrKHtA/zh-cn_image_0000002809009495.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=D19AF55D007EF2F3D5E1E17226CC91967FB5EE6B5A092417DEEA55C36623A196) ## 自适应拉伸 在线性布局下，常用空白填充组件[Blank](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-blank)，在容器主轴方向自动填充空白空间，达到自适应拉伸效果。Row和Column作为容器，只需要添加宽高为百分比，当屏幕宽高发生变化时，会产生自适应效果。 ```TypeScript @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/a6/v3/TBF3eW_cTsWKrjURk6F4Sg/zh-cn_image_0000002809049411.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=B30223FEB959A104821572A85B2C0C49319D803C65552EBBB3F9DD111CF0EAB8) **图10** 横屏（自适应屏幕宽边） ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/dc/v3/2S5G6LGDSOesXdNwP_4UjQ/zh-cn_image_0000002779849846.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=E92961D02E835C24354B05C73E1660DB8A3EFC96C10B186587B10FD82A2FD031) ## 自适应缩放 自适应缩放是指子元素随容器尺寸的变化而按照预设的比例自动调整尺寸，适应各种不同大小的设备。在线性布局中，可以使用以下两种方法实现自适应缩放。 * 父容器尺寸确定时，使用[layoutWeight](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-size#layoutweight)属性设置子元素和兄弟元素在主轴上的权重，忽略元素本身尺寸设置，使它们在任意尺寸的设备下自适应占满剩余空间。 ```TypeScript @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/c6/v3/VDHLF4F6TJiSH_h6taXiTg/zh-cn_image_0000002779689876.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=20D1CDC5B330DD8AF5295051F1C8D808C10B772781C2FD3B1818A67BA89E1B1D) **图12** 竖屏 ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/99/v3/G3vl1111TM6iFAUbkhA8BQ/zh-cn_image_0000002809009497.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=253A67784E3CF1F5D723B1AA67F7648C4AF5A9C423F73B349C7C5D37C98B8B75) * 父容器尺寸确定时，使用百分比设置子元素和兄弟元素的宽度，使它们在任意尺寸的设备下保持固定的自适应占比。 ```TypeScript @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/dd/v3/ueK_Y1oPRqqd5P8e4jYJhg/zh-cn_image_0000002809049413.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=BFF1DB3C68D741C2301139EDF20361C138CC30DC79F5E1656B6E3C7C9037C42F) **图14** 竖屏 ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/bc/v3/KEW8MO6PR6uU_sd_W7Lclg/zh-cn_image_0000002779849848.png?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=A5373F8CE0943A61121968A81E1FD04EF0B9D6CBA0BAFE45FFD41B24246566DB) ## 自适应延伸 自适应延伸是指在不同尺寸设备下，当页面的内容超出屏幕大小而无法完全显示时，可以通过滚动条进行拖动展示。对于线性布局，这种方法适用于容器中内容无法一屏展示的场景。通常有以下两种实现方式。 * [在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组件： ```TypeScript @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/b3/v3/FIKRuNpCSTikgW9TyxCXvQ/zh-cn_image_0000002779689878.gif?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=703CBE04E7C465AF224E93178CC7E35ADF3EF65E7AB044DEA711C90B29AA5116) 水平方向布局中使用Scroll组件： ```TypeScript @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/6c/v3/iJbT4N9mREylCXGgymHxKw/zh-cn_image_0000002809009499.gif?HW-CC-KV=V1&HW-CC-Date=20261102T125436Z&HW-CC-Expire=31536000000&HW-CC-Sign=1937C6EC9DBC8E2ED61E9265A635A6F88A9C3684F731DF847E8AEB772A2114B8)