ArcTs布局入门01——线性布局(Row/Column)-优快云博客

如果你对鸿蒙开发感兴趣，加入“Harmony自习室”吧~👇🏻👇🏻👇🏻👇🏻

扫描下面的二维码关注公众号。

1、概述

布局指用特定的组件或者属性来管理用户页面所放置UI组件的大小和位置。组件按照布局的要求依次排列，构成应用的页面。

在声明式UI中，所有的页面都是由自定义组件构成，开发者可以根据自己的需求，选择合适的布局进行页面开发。

一个页面开发中，最优先的就是确定UI的布局结构，布局的结构通常是分层级的，代表了用户界面中的整体架构。一个常见的页面结构如下所示：

为实现上述效果，开发者需要在页面中声明对应的元素。其中，Page表示页面的根节点，Column/Row等元素为系统组件（线性布局组件）。

针对不同的页面结构，ArkUI提供了不同的布局组件来帮助开发者实现对应布局的效果，例如Row用于实现线性布局。

ArcTs提供了9中常见的布局，开发者可根据实际应用场景选择合适的布局进行页面开发：

线性布局(Row / Column)
弹性布局(Flex)
层叠布局(Stack)
相对布局(RelativeContainer)
栅格布局(GridRow、GridCol)
媒体查询(@ohos.mediaquery)
列表(List)
网格(Grid)
轮播(Swipper)

接下来，我们先来接触一下最常用的两个布局：线性布局 & 弹性布局。

本文较长，有大量Demo演示。

2、线性布局

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。

线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。Column和Row排列示意图如下：

2.1、基本概念

布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。
布局子元素：布局容器内部的元素。
主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向。
交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向。
间距：布局子元素的间距。

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

在布局容器内，可以通过space属性设置排列方向上子元素的间距，使各子元素在排列方向上有等间距效果。

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

代码示例：

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%')

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

代码示例：

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%')

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

在布局容器内，可以通过alignItems属性设置子元素在交叉轴（排列方向的垂直方向）上的对齐方式。其中，交叉轴为垂直方向时，取值为VerticalAlign类型，水平方向取值为HorizontalAlign。

alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性，如果设置了alignSelf属性，则在单个子元素上会覆盖alignItems属性。

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

代码示例：

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)')

- HorizontalAlign.Center：子元素在水平方向居中对齐。

Column({}) {
  
    Column() {
  
    }.width('80%').heig