鸿蒙跨平台开发教程之 Uniapp 布局基础
前两天的文章内容对 uniapp 开发鸿蒙应用做了一些详细的介绍，包括配置开发环境和项目结构目录解读，今天我们正式开始写代码。
入门新的开发语言往往从 Hello World 开始，Uniapp 的初始化项目中已经写好了一个简单的 demo，这里就不再赘述，我们直接从布局开始说起。
Uniapp 的布局方式和鸿蒙原生语言 ArkTs 有所不同，但又颇为神似。
幽蓝君之前总结过，所有的布局方式无非只有三种，横向、竖向和层叠，其他所有的布局方式都由这三种衍生而来，Uniapp 也不例外。
ArkTs 中有 Row()、Column()、Stack()、Flex()这几个基础的布局容器组件，更复杂一些的还有像 List()、Grid()、Scroll()等等。
而在 Uniapp 中，基础的布局方式我们通常直接使用 view 容器来实现。比如我想要实现一个横向的布局，使用 view 容器，在 view 的样式中设置布局方式为 row：
而到了纵向布局，只需要把布局方向设置 column 就行了：
接下来比较难的部分到了，对于层叠布局，ArkTs 直接提供了 Stack()容器，并且有对应的对齐方式可以直接设置，比较简单。但是 uniapp 并没有提供这种对齐方式，flex-direction 中是不能直接设置层叠布局的。
我们可以使用 postion 属性来实现。postion 的作用是设置定位方式，有 static、relative、fixed、absolute 集中方式，我们今天要说的是 absolute。
absolute 是一种绝对定位方式，是脱离了文档流、相对于父元素的绝对定位方式。
更详细一点解释就是不管它有多少同级别的组件，都不影响它以父元素左上角为原点的定位，同样的它也不影响别人，相当于悬浮在上层，使用偏移量来控制位置。比如下面这段代码：
所以如果需要层叠布局的两个容器都使用 absolute 定位，并且使用 top、left、bottom、right 来设置对齐方式，就实现了鸿蒙中的 Stack()一样的功能：
这里可以使用 z-index 来设置谁在上一层，另外，绝对定位的父容器需要设置 position: relative 属性，否则子组件无法找到目标。
以上就是 Uniapp 开发鸿蒙的基础布局方式，感谢您的阅读。
版权声明: 本文为 InfoQ 作者【幽蓝计划】的原创文章。
原文链接:【http://xie.infoq.cn/article/019fecff28e435e56ea72edf5】。未经作者许可，禁止转载。
还未添加个人签名 2025-05-09 加入
还未添加个人简介
评论