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

前两天的文章内容对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开发鸿蒙的基础布局方式,感谢您的阅读。

#鸿蒙三方框架##Uniapp##购物#

相关推荐
幽蓝计划6 小时前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
华为·harmonyos
万少12 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划13 小时前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
HMS Core15 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos
生如夏花℡15 小时前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
伍哥的传说15 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
遇到困难睡大觉哈哈1 天前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos
幽蓝计划1 天前
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
开发语言·harmonyos
伍哥的传说1 天前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
Georgewu1 天前
【HarmonyOS】应用开发拖拽功能详解
harmonyos