![[The AI Show Episode 145]: OpenAI Releases o3 and o4-mini, AI Is Causing “Quiet Layoffs,” Executive Order on Youth AI Education & GPT-4o’s Controversial Update](https://www.marketingaiinstitute.com/hubfs/ep%20145%20cover.png)
![Ditching a Microsoft Job to Enter Startup Purgatory with Lonewolf Engineer Sam Crombie [Podcast #171]](https://cdn.hashnode.com/res/hashnode/image/upload/v1746753508177/0cd57f66-fdb0-4972-b285-1443a7db39fc.png?#)
.jpg?#)
_designer491_Alamy.jpg?width=1280&auto=webp&quality=80&disable=upscale#)
![Apple Releases watchOS 11.5 for Apple Watch [Download]](https://www.iclarified.com/images/news/97304/97304/97304-640.jpg)
![Apple Releases tvOS 18.5 for Apple TV [Download]](https://www.iclarified.com/images/news/97307/97307/97307-640.jpg)
鸿蒙跨平台开发教程之Uniapp布局基础
前两天的文章内容对uniapp开发鸿蒙应用做了一些详细的介绍，包括配置开发环境和项目结构目录解读，今天我们正式开始写代码。 入门新的开发语言往往从Hello World开始，Uniapp的初始化项目中已经写好了一个简单的demo，这里就不再赘述，我们直接从布局开始说起。 Uniapp的布局方式和鸿蒙原生语言ArkTs有所不同，但又颇为神似。 幽蓝君之前总结过，所有的布局方式无非只有三种，横向、竖向和层叠，其他所有的布局方式都由这三种衍生而来，Uniapp也不例外。 ArkTs中有Row()、Column()、Stack()、Flex()这几个基础的布局容器组件，更复杂一些的还有像List()、Grid()、Scroll()等等。 而在Uniapp中，基础的布局方式我们通常直接使用view容器来实现。比如我想要实现一个横向的布局，使用view容器，在view的样式中设置布局方式为row： 组件1 组件2 而到了纵向布局，只需要把布局方向设置column就行了： 组件1 组件2 接下来比较难的部分到了，对于层叠布局，ArkTs直接提供了Stack()容器，并且有对应的对齐方式可以直接设置，比较简单。但是uniapp并没有提供这种对齐方式，flex-direction中是不能直接设置层叠布局的。 我们可以使用postion属性来实现。postion的作用是设置定位方式，有static、relative、fixed、absolute集中方式，我们今天要说的是absolute。 absolute是一种绝对定位方式，是脱离了文档流、相对于父元素的绝对定位方式。 更详细一点解释就是不管它有多少同级别的组件，都不影响它以父元素左上角为原点的定位，同样的它也不影响别人，相当于悬浮在上层，使用偏移量来控制位置。比如下面这段代码： 组件1 组件2 组件3 组件4 所以如果需要层叠布局的两个容器都使用absolute定位，并且使用top、left、bottom、right来设置对齐方式，就实现了鸿蒙中的Stack()一样的功能： 组件1 组件2 这里可以使用z-index来设置谁在上一层，另外，绝对定位的父容器需要设置position: relative属性，否则子组件无法找到目标。 以上就是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开发鸿蒙的基础布局方式，感谢您的阅读。
