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

举报
yd_271872561 发表于 2025/06/25 14:40:14 2025/06/25
【摘要】 前两天的文章内容对uniapp开发鸿蒙应用做了一些详细的介绍，包括配置开发环境和项目结构目录解读，今天我们正式开始写代码。入门新的开发语言往往从Hello World开始，Uniapp的初始化项目中已经写好了一个简单的demo，这里就不再赘述，我们直接从布局开始说起。Uniapp的布局方式和鸿蒙原生语言ArkTs有所不同，但又颇为神似。幽蓝君之前总结过，所有的布局方式无非只有三种，横向、竖向...
前两天的文章内容对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>

2512477006.png


而到了纵向布局，只需要把布局方向设置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>

2773836574.png


接下来比较难的部分到了，对于层叠布局，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>

3471412310.png


所以如果需要层叠布局的两个容器都使用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>

3587884021.png


这里可以使用z-index来设置谁在上一层，另外，绝对定位的父容器需要设置position: relative属性，否则子组件无法找到目标。
以上就是Uniapp开发鸿蒙的基础布局方式，感谢您的阅读。#鸿蒙三方框架##Uniapp##购物#
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
HarmonyOS
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入