【学习笔记】鸿蒙UI开发-布局（ArkTs）

开源项目

GitHub：LearnHos

码云：LearnHos

---

布局

一次开发 多端部署

多端开发能力

多端UI适配

布局

自适应布局

拉伸能力

定义

当父容器的尺寸发生变化时，增加或减少的空间全部分配给父容器内的指定子组件

场景1：自动填充

实现：容器组件-Row + 基础组件Blank

场景2：按指定的比例拉伸或收缩

• 拉伸

  当父容器在主轴方向上的尺寸大于所有子组件的尺寸之和时

  实现：组件通用属性-Flex布局-FlexGrow

• 收缩

  当父容器在主轴方向上的尺寸小于所有子组件的尺寸之和时

  实现：组件通用属性-Flex布局-FlexShrink

代码示例

GitHub：自适应布局-拉伸能力

码云：自适应布局-拉伸能力

均分能力

定义

当父容器的尺寸发生变化时，增加或减少的空间全部均匀分配给父容器内的空白区域

场景

内容数量固定、均分显示。

实现方案1：容器组件-Flex + 参数justifyContent

实现方案2：容器组件-Row + 属性justifyContent

实现方案3：容器组件-Row + 基础组件Blank

代码示例

GitHub：自适应布局-均分能力

码云：自适应布局-均分能力

占比能力

TODO

缩放能力

TODO

延伸能力

TODO

隐藏能力

TODO

折行能力

TODO

响应式布局

断点

TODO

媒体查询

TODO

栅格布局

TODO

---

【资料】ArkTs语言

组件

组件通用信息

通用事件

TODO

通用属性

Flex布局

官方API文档：Flex布局

注意

• 仅当父组件是 Flex、Column、Row 时生效。

Flex布局-FlexGrow

定义

设置父容器的剩余空间分配给此属性所在组件的比例。默认值为0。

使用

案例：自适应布局-拉伸能力

Flex布局-FlexShrink

定义

设置父容器压缩尺寸分配给此属性所在组件的比例。

父容器为Row、Column时，默认值：0

父容器为flex时，默认值：1

使用

案例：自适应布局-拉伸能力

手势处理

TODO

基础组件

Blank

官方API文档：Blank

定义

空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。

使用

Blank()
//设置填充颜色
Blank().color(Color.Yellow)
Blank().color('#FFF24D')
Blank().backgroundColor(Color.Yellow)
Blank().backgroundColor('#FFF24D')
//设置最小宽度为160
Blank('160').color(Color.Yellow)

案例：自适应布局-拉伸能力

注意

• 仅当父组件为 容器组件-Row / Column 时生效。

• Blank的父组件如果不设置宽度，那么Blank会失效，可以通过设置Blank的最小宽度来填充固定宽度。

容器组件

Column

官方API文档：Column

定义

沿垂直方向布局的容器。可以包含子组件。

使用

//参数
/*
纵向布局元素垂直方向间距。
默认值：0，单位vp
*/
Column({space:10}){
}

//属性
/*
设置子组件在水平方向上的对齐格式。
默认值：HorizontalAlign.Center
*/
Column(){
}
.width('100%')
.height(30)
.alignItems(HorizontalAlign.Center)

/*
设置子组件在垂直方向上的对齐格式。
默认值：FlexAlign.Start
*/
Column(){
}
.width('100%')
.height(30)
.justifyContent(FlexAlign.Start)

Row

官方API文档：Row

定义

沿水平方向布局容器。可以包含子组件。

使用

//参数
/*
横向布局元素间距。
默认值：0，单位vp
*/
Row({space:10}){
}

//属性
/*
设置子组件在垂直方向上的对齐格式，
默认值：VerticalAlign.Center
*/
Row(){
}
.width('100%')
.alignItems(VerticalAlign.Center)

/*
设置子组件在水平方向上的对齐格式，
默认值：FlexAlign.Start
*/
Row(){
}
.width('100%')
.justifyContent(FlexAlign.Start)

案例：自适应布局-均分能力

Flex

官方API文档：Flex

定义

以弹性方式布局子组件的容器组件。可以包含子组件。

使用

//参数
/*
子组件在Flex容器上排列的方向，即主轴的方向。
*/
Flex({direction:FlexDirection.Row}){
}

/*
Flex容器是单行/列还是多行/列排列。
*/
Flex({wrap:FlexWrap.NoWrap}){
}

/*
子组件在Flex容器主轴上的对齐格式。
*/
Flex({justifyContent:FlexAlign.Start}){
}

/*
子组件在Flex容器交叉轴上的对齐格式。
*/
Flex({alignItems:ItemAlign.Start}){
}

/*
交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。
*/
Flex({alignContent:FlexAlign.Start}){
}

案例：自适应布局-均分能力

媒体组件

TODO

绘制组件

TODO

画布组件

TODO

---

其它

【学习笔记】鸿蒙应用开发路线概览
【学习笔记】鸿蒙应用开发工具 HUAWEI DevEco Studio

---

持续更新中~