前兩天的文章內容對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>

這里可以使用z-index來設置誰在上一層，另外，絕對定位的父容器需要設置position: relative屬性，否則子組件無法找到目標。

以上就是Uniapp開發鴻蒙的基礎布局方式，感謝您的閱讀。