鸿蒙跨平台开发教程之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##购物#

相关推荐
zhanshuo7 小时前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo7 小时前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos
codefish79812 小时前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos
yrjw18 小时前
一款基于react-native harmonyOS 封装的【文档】文件预览查看开源库(基于Harmony 原生文件预览服务进行封装)
harmonyos
搜狐技术产品小编20232 天前
搜狐新闻直播间适配HarmonyOs实现点赞动画
华为·harmonyos
zhanshuo2 天前
ArkUI 玩转水平滑动视图:超全实战教程与项目应用解析
harmonyos·arkui
zhanshuo2 天前
ArkUI Canvas 实战:快速绘制柱状图图表组件
harmonyos·arkui
zhanshuo2 天前
手把手教你用 ArkUI 写出高性能分页列表:List + onScroll 实战解析
harmonyos
zhanshuo2 天前
深入解析 ArkUI 触摸事件机制:从点击到滑动的开发全流程
harmonyos
i仙银2 天前
鸿蒙沙箱浏览器 - SandboxFinder
app·harmonyos