The content of the article two days ago provided a detailed introduction to developing HarmonyOS applications with UniApp, including the configuration of the development environment and the interpretation of the project structure directory. Today, we officially start writing code.
When learning a new programming language, it often starts with "Hello World". In the initialization project of Uniapp, a simple demo has already been written, so we won't go into detail about that here. Let's directly start with the layout.
The layout method of Uniapp is different from that of ArkTs, the native language of HarmonyOS, but they bear a striking resemblance.
Youlan Jun previously summarized that all layout methods can be boiled down to only three types: horizontal, vertical, and stacked. All other layout methods are derived from these three, and Uniapp is no exception.
In ArkTs, there are several basic layout container components such as Row(), Column(), Stack(), and Flex(). More complex ones include List(), Grid(), Scroll(), and so on.
In Uniapp, for basic layout methods, we usually directly use the view container to achieve them. For example, if I want to implement a horizontal layout, I use the view container and set the layout method to row in the view's style.
<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>
For a vertical layout, simply set the layout direction to 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>
The more challenging part is coming up next. For the stacked layout, ArkTs directly provides the Stack() container and corresponding alignment methods that can be set directly, which is quite simple. However, uniapp does not offer such alignment methods, and the stacked layout cannot be directly set in the flex-direction.
We can achieve this by using the position property. The position property is used to set the positioning method, with four main options: static, relative, fixed, and absolute. Today, we will focus on absolute.
"Absolute" is an absolute positioning method, which is an absolute positioning relative to the parent element and is detached from the document flow.
To explain it in more detail, no matter how many components of the same level it has, it does not affect its positioning with the top-left corner of the parent element as the origin. Similarly, it does not affect others either, and is equivalent to floating on the upper layer, using offsets to control the position. For example, in the following code:
<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>
So, if two containers that require a stacked layout both use absolute positioning and set the alignment method with top, left, bottom, and right, the same function as Stack() in HarmonyOS is achieved:
<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>
Here, you can use the z-index to set which layer is on top. Additionally, the parent container with absolute positioning needs to have the position: relative attribute set; otherwise, the child component cannot find the target.
The above is the basic layout method for developing HarmonyOS with Uniapp. Thank you for your reading.
Top comments (0)