当前位置：首页 > news >正文

鸿蒙跨平台开发教程之Uniapp布局基础

news 来源：原创 2025/5/13 16:46:02

前两天的文章内容对uniapp开发鸿蒙应用做了一些详细的介绍，包括配置开发环境和项目结构目录解读，今天我们正式开始写代码。

入门新的开发语言往往从Hello World开始，Uniapp的初始化项目中已经写好了一个简单的demo，这里就不再赘述，我们直接从布局开始说起。

Uniapp的布局方式和鸿蒙原生语言ArkTs有所不同，但又颇为神似。

幽蓝君之前总结过，所有的布局方式无非只有三种，横向、竖向和层叠，其他所有的布局方式都由这三种衍生而来，Uniapp也不例外。

ArkTs中有Row()、Column()、Stack()、Flex()这几个基础的布局容器组件，更复杂一些的还有像List()、Grid()、Scroll()等等。

而在Uniapp中，基础的布局方式我们通常直接使用view容器来实现。比如我想要实现一个横向的布局，使用view容器，在view的样式中设置布局方式为row：

<view style="display: flex;flex-direction: row;" ><view style="width: 100px;height: 100px;background-color: aqua;">组件1</view><view style="width: 100px;height: 100px;background-color:bisque;">组件2</view>
</view>

而到了纵向布局，只需要把布局方向设置column就行了：

<view style="display: flex;flex-direction: column;" ><view style="width: 100px;height: 100px;background-color: aqua;">组件1</view><view style="width: 100px;height: 100px;background-color:bisque;">组件2</view>
</view>

接下来比较难的部分到了，对于层叠布局，ArkTs直接提供了Stack()容器，并且有对应的对齐方式可以直接设置，比较简单。但是uniapp并没有提供这种对齐方式，flex-direction中是不能直接设置层叠布局的。

我们可以使用postion属性来实现。postion的作用是设置定位方式，有static、relative、fixed、absolute集中方式，我们今天要说的是absolute。

absolute是一种绝对定位方式，是脱离了文档流、相对于父元素的绝对定位方式。

更详细一点解释就是不管它有多少同级别的组件，都不影响它以父元素左上角为原点的定位，同样的它也不影响别人，相当于悬浮在上层，使用偏移量来控制位置。比如下面这段代码：

<view  style="display: flex;flex-direction: column;position: relative;" >
<view style="width: 50px;height: 50px;background-color:bisque;">组件1</view>
<view style="width: 50px;height: 50px;background-color:blue;">组件2</view>
<view style="width: 50px;height: 50px;background-color:brown;">组件3</view>
<view style="width: 100px;height: 100px;background-color: aqua;position: absolute;opacity: 0.5;align-items: center;">组件4</view>
</view>

所以如果需要层叠布局的两个容器都使用absolute定位，并且使用top、left、bottom、right来设置对齐方式，就实现了鸿蒙中的Stack()一样的功能：

<view class="content" style="display: flex;flex-direction: column;position: relative;" >
<view style="width: 100px;height: 100px;background-color: aqua;position: absolute;top: 0;">组件1</view>
<view style="width: 50px;height: 50px;background-color:bisque;position: absolute;z-index: 10;top: 0;">组件2</view>
</view>