Harmony OS 开发入门 第四章

本章我们来讲述ArlUI 中的线性布局

目录

线性布局

排布主方向上的对齐方式(主轴)

交叉轴对齐方式

自适应伸缩

---

线性布局

线性布局(LinearLayout)通过线性容器Column和Row创建

Column 容器：子元素 垂直排列

Row 容器：子元素 水平排列

排布主方向上的对齐方式(主轴)

.justifyContent(枚举FlexAlign)

FlexAlign 可选值：

    1.Start

        子组件从主轴起点开始排列（默认值）。

        若主轴方向为 row，则从左到右；若为 column，则从上到下。

    2.Center

        子组件在主轴上居中对齐。

    3.End

        子组件向主轴终点对齐。

        若主轴为 row，则从右到左；若为 column，则从下到上。

    4.SpaceBetween

        子组件均匀分布，首个组件在起点，末尾组件在终点，中间组件间距相等。

    5.SpaceAround

        子组件均匀分布，每个组件两侧的间距相等（视觉效果为左右间距是中间间距的一半）。

    6.SpaceEvenly

        子组件完全均匀分布，包括两端与容器之间的间距也等于组件间间距。

练习

代码如下:

@Entry
@Component
struct Index {build() {Column(){Row(){Image($r("app.media.ic_arrow_left")).width(21)Text('个人中心')Image($r("app.media.ic_gallery_photoedit_more")).width(24)}.justifyContent(FlexAlign.SpaceBetween).width('100%').height(40).backgroundColor(Color.White).padding({left:10,right:10})}.width('100%').height('100%').backgroundColor('#ccc')}
}

交叉轴对齐方式

属性：alignItems()

参数：枚举类型

交叉轴在水平方向：HorizontalAlign

交叉轴在垂直方向：VerticalAlign

自适应伸缩

设置 layoutWeight 属性的 子元素 与 兄弟元素，会 按照权重 进行分配 主轴 空间(剩余空间)

.layoutWeight(数字)

@Entry
@Component
struct Index {build() {Column(){Row(){Text().layoutWeight(1).height('100%').backgroundColor(Color.Red)Text().layoutWeight(1).height('100%').backgroundColor(Color.Yellow)Text().layoutWeight(1).height('100%').backgroundColor(Color.Green)}.width('100%').layoutWeight(3)Column(){Text().layoutWeight(1).width('100%').backgroundColor(Color.Brown)Text().layoutWeight(1).width('100%').backgroundColor(Color.Gray)Text().layoutWeight(1).width('100%').backgroundColor(Color.Orange)}.width('100%').layoutWeight(1)}.width('100%').height('100%')}
}