ArkUI基础的布局

31 阅读4分钟

Harmony OS  NEXT    API12

一. ArkUI布局

1.1线性布局

Column布局 (主轴方向纵向)

Row布局(主轴方向横向)

1.2层叠布局

stack()

1.3弹性布局

Flex()

1.4相对布局

RelativeContainer()

1.5栅格布局

GridRow, GridCol

1.6网格

Grid()

1.7选项卡

Tabs()

 

二. 对应布局的使用

1.Column

image.png 通过该图片我们可以知道Column布局容器的基本特征, 从上往下开始布局,因为我们没有设置任何的属性,所以他从左向右显示内容

2.Row

image.png

通过该图片我们可以知道Row布局容器的基本特征, 从左往右开始布局,因为我们没有设置任何的属性,所以他不会显示容器外的内容

3.层叠布局

image.png

从图片中我们可以看的出来有重影的样子,为什么会这样呢?因为层叠布局如果内部没有任何的其他布局它的一个元素是不占有实际空间的就好比如下的画图,所以才会出现上面图片的重影效果。

image.png 假如我们结合我们上面的线性布局呢? 又呈现什么效果呢?

image.png 没错几乎和我们只用线性布局的效果如出一辙,那层叠在哪里呢?

仔细看我们的UI分析图发现,他把Column叠了起来,假如我们在写一个布局呢?

image.png 没错他把我们下面写的那个布局堆叠到了先写的布局哪里也就是说,如果我们没有写任何和属性和参数那么stack就会一直堆叠上去

4.Flex() 弹性布局

image.png 我们观察可以看的出来他貌似“自动”的帮我们分配好了空间,如果这一行无法显示更多的内容他会根据内容的大小帮我们把布局分配好, 好! 假如我们在这的基础上再添加多一点元素内容会发生什么?

image.png

没错它依旧是帮我们把内容“强行”的塞下了,只不过看上去有点奇怪,毕竟我们没有设置任何属性方法

5.栅格布局GridRow/GridCol

这个栅格布局他和我们下面要讲的网格布局有些类似但区别还是有的,假如我们直接像上面一样演示会发现有个问题,它会报一个错误

image.png

这个容器仅支持一个子组件, 这个子组件可以是我们上面讲过的布局方式吗?

image.png

这么尝试发现确实可以包含我们上面讲过的布局容器,那么呈现的效果是什么样子的呢?

image.png

嗯?这就有疑问了,这不就是在Column上面套了一个东西吗?和Column布局不是完全一样吗?

别着急,假如我们没有设置任何它的属性和方法那确实和普通的布局没啥区别。但是这个容器就是很刁钻我们之后再进行讲解

6.网格布局Grid

大家看到Grid是不是又回想起上面讲到的GridCol的容器呢?我确实会将他们放在一类中,因为如果要在实际上手,用的时候会发现,它们都是呈现的格子形状例如,如下效果

image.png

但是它们的“脾气”都是一样的,都不愿意“一个屋子里住多个人”它们都是仅仅支持一个子组件,但是这个Grid不同它的子组件不能是Column等,他只能是GridItem所以我们要使用的话也只能配合它,但是假如我们直接干的话又发现,没想到GridItem也仅支持一个子组件,它的“脾气”和他“老爸”几乎一样,假如我们按照“规定”再给他套一套会呈现什么效果呢?

image.png

没错,在没有任何外界干扰的情况下它还是“没啥效果”, 如果想要呈现出效果还是要设置一些内容。

 

好!本次的基本介绍到此结束,期待下一次的配合“外界”呈现的布局

谢谢各位的观看,有错误不足的地方, 本人乐于接受各位的意见