鸿蒙HarmonyOS实战-ArkUI组件(RelativeContainer)
一、RelativeContainer
1.概述
ArkUI组件中的RelativeContainer是一个相对定位的容器,可以用来将子组件按照相对位置布局。
在RelativeContainer中,每个子组件都可以设置相对于父容器或其他组件的位置和大小。可以通过设置相对位置、偏移量、宽度和高度来实现布局。相对位置可以设置为左侧、上方、右侧和下方。偏移量可以设置为相对位置的偏移值,例如向右偏移10像素或向下偏移5像素。宽度和高度可以设置为相对值或绝对值。
使用RelativeContainer时,要注意避免组件重叠或越出容器边界的情况。可以使用zIndex属性来设置组件的堆叠顺序,避免遮盖问题。同时,也可以使用padding属性来设置内边距,避免组件紧贴容器边缘。
更多鸿蒙最新技术知识点,请关注作者博客:https://t.doruo.cn/14DjR1rEY
RelativeContainer是一个非常灵活的容器组件,可以实现各种复杂的布局效果。
2.设置依赖关系
2.1 锚点设置
在网页中,锚点是指可以跳转到页面中特定位置的链接。设置锚点需要以下步骤:
在 HTML 页面中找到要设置锚点的位置。
在该位置的标签中添加一个 ID 属性,并为其赋一个唯一的值。例如:
Section 1
。
在引用该锚点的链接中,将链接目标指向该 ID。例如:Go to Section 1。
当用户点击链接时,页面会自动滚动到设定的锚点位置。
更多鸿蒙最新技术知识点,请关注作者博客:https://t.doruo.cn/14DjR1rEY
但在RelativeContainer中锚点其实是对于的参照物,具体用法介绍如下:
- 在水平方向上,可以设置left、middle、right的锚点。
- 在竖直方向上,可以设置top、center、bottom的锚点。
- 必须为RelativeContainer及其子元素设置ID,用于指定锚点信息。RelativeContainer的ID默认为__container__
1、RelativeContainer父组件为锚点,__container__代表父容器的id
RelativeContainer() {
Row(){
Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
}
// 添加其他属性
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
.id("row1")
Row(){
Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
}
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
right: { anchor: '__container__', align: HorizontalAlign.End }
})
.id("row2")
}
.width(300).height(300)
.margin({ left: 20 })
.border({ width: 2, color: '#6699FF' })
2、以子元素为锚点
RelativeContainer() {
Row(){
Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
}
// 添加其他属性
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
.id("row1")
Row(){
Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
}
.alignRules({
top: { anchor: 'row1', align: VerticalAlign.Bottom },
right: { anchor: 'row1', align: HorizontalAlign.End }
})
.id("row2")
}
.width(300).height(300)
.margin({ left: 20 })
.border({ width: 2, color: '#6699FF' })
2.2 设置相对于锚点的对齐位置
1、在水平方向上,对齐位置可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End
2、在竖直方向上,对齐位置可以设置为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom
3.案例
@Entry
@Component
struct Index {
build() {
Row() {
RelativeContainer() {
Row()
.width(100)
.height(100)
.backgroundColor('#FF3333')
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top }, //以父容器为锚点,竖直方向顶头对齐
middle: { anchor: '__container__', align: HorizontalAlign.Center } //以父容器为锚点,水平方向居中对齐
})
.id('row1') //设置锚点为row1
Row() {
Image($r('app.media.icon'))
}
.height(100).width(100)
.alignRules({
top: { anchor: 'row1', align: VerticalAlign.Bottom }, //以row1组件为锚点,竖直方向低端对齐
left: { anchor: 'row1', align: HorizontalAlign.Start } //以row1组件为锚点,水平方向开头对齐
})
.id('row2') //设置锚点为row2
Row()
.width(100)
.height(100)
.backgroundColor('#FFCC00')
.alignRules({
top: { anchor: 'row2', align: VerticalAlign.Top }
})
.id('row3') //设置锚点为row3
Row()
.width(100)
.height(100)
.backgroundColor('#FF9966')
.alignRules({
top: { anchor: 'row2', align: VerticalAlign.Top },
left: { anchor: 'row2', align: HorizontalAlign.End },
})
.id('row4') //设置锚点为row4
Row()
.width(100)
.height(100)
.backgroundColor('#FF66FF')
.alignRules({
top: { anchor: 'row2', align: VerticalAlign.Bottom },
middle: { anchor: 'row2', align: HorizontalAlign.Center }
})
.id('row5') //设置锚点为row5
}
.width(300).height(300)
.border({ width: 2, color: '#6699FF' })
}
.height('100%').margin({ left: 30 })
}
}
写在最后
- 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 关注小编,同时可以期待后续文章ing,不定期分享原创知识。
- 更多鸿蒙最新技术知识点,请关注作者博客:https://t.doruo.cn/14DjR1rEY
鸿蒙HarmonyOS实战-ArkUI组件(RelativeContainer)的更多相关文章
- 鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用
注:鸿蒙的远程交互组件应用相对复杂 ,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件 过程:1.导入鸿蒙的网络请求模块fetch 2.发起对服务器的请求(在这过程 ...
- 微信小程序入门与实战 常用组件API开发技巧项目实战*全
第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...
- 手把手带你体验鸿蒙 harmonyOS
wNlRGd.png 前言 本文已经收录到我的 Github 个人博客,欢迎大佬们光临寒舍: 我的 GIthub 博客 学习导图 image.png 一.为什么要尝鲜 harmonyos? wNlfx ...
- 最全华为鸿蒙 HarmonyOS 开发资料汇总
开发 本示例基于 OpenHarmony 下的 JavaScript UI 框架,进行项目目录解读,JS FA.常用和自定义组件.用户交互.JS 动画的实现,通过本示例可以基本了解和学习到 JavaS ...
- 鸿蒙HarmonyOS应用开发落地实践,Harmony Go 技术沙龙落地北京
12月26日,华为消费者BG软件部开源中心与51CTO Harmony OS技术社区携手,共同主办了主题为"Harmony OS 应用开发落地实践"的 Harmony Go 技术沙 ...
- 鸿蒙开源第三方件组件——轮播组件Banner
目录: 1.功能展示 2.Sample解析 3.Library解析 4.<鸿蒙开源第三方组件>系列文章合集 前言 基于安卓平台的轮播组件Banner(https://github.com/ ...
- 14-Flutter移动电商实战-ADBanner组件的编写
拨打电话的功能在app里也很常见,比如一般的外卖app都会有这个才做.其实Flutter本身是没给我们提供拨打电话的能力的,那我们如何来拨打电话那? 1.编写店长电话模块 这个小伙伴们一定轻车熟路了, ...
- 13-Flutter移动电商实战-ADBanner组件的编写
1.AdBanner组件的编写 我们还是把这部分单独出来,需要说明的是,这个Class你也是可以完全独立成一个dart文件的.代码如下: 广告图片class AdBanner extends Stat ...
- iview实战 : 树形组件自定义
Tree树形组件是 iview 中相对复杂的一个组件. 自定义节点内容 使用强大的 Render 函数可以自定义节点显示内容和交互,比如添加图标,按钮等. ——官方文档 但官方的 example 只有 ...
- ArkUI 组件 Props
在上一篇博客文章中简单地提到了 Props . 在使用 Props 时需要注意到一个点,子组件从寄主页面传递过来的值是单向的,也就是子组件不能直接修改传递下来的值,即单向性. 以上篇文章定义的头像组件 ...
随机推荐
- JS Leetcode 208. 实现 Trie (前缀树) 题解分析,第一次了解前缀树(字典树)
壹 ❀ 引 本题来自LeetCode 208. 实现 Trie (前缀树),难度中等,题目描述如下: Trie(发音类似 "try")或者说 前缀树 是一种树形数据结构,用于高效地 ...
- NC14704 美味菜肴
题目链接 题目 题目描述 小明是个大厨,早上起来他开始一天的工作.他所在的餐厅每天早上都会买好 \(n\) 件食材(每种食材的数量可以视为无限),小明从到达餐厅开始就连续工作 \(T\) 时间.每道菜 ...
- letcode-Z字抖动
题目 将一个给定字符串 s 根据给定的行数 numRows ,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "PAYPALISHIRING" 行数为 3 时,排列如下 ...
- centos7 安装vmware tool 遇到遇到 kernel-headers 问题修复
安装 vmware tool 步骤 1. cp VMwareTools-10.3.25-20206839.tar.gz 到 用户目录下 2. tar zxf VMwareTools-10.3.25-2 ...
- 记一个 Duplicate class kotlin-stblib vs kotlin-stdlib-jdk7/8 编译问题引发的案例
某天将项目 kotlin 版本升级到了 1.8.0 ,然后编译报错了, Duplicate class kotlin-stblib vs kotlin-stdlib-jdk7/8 然后开始寻求解决方案 ...
- 4-request对象
前端提交数据 必备知识点 前端form表单中action属性,不写默认是当前路由地址 前端form表单中的method属性,不写默认是GET请求 前端页面 templates\register.htm ...
- CoaXPress 协议的CRC及其具体实现
CoaXPress CRC 在CXP协议中,CRC用在stream packet和control packet中,用于指示数据是否错误,如果是control packet, device发现CRC错误 ...
- 【Azure 应用服务】在创建Web App Service的时候,选Linux系统后无法使用Mysql in App
问题描述 如图上,是App Services在Windows环境中,系统自带了MySQL In App功能.而在,Linux环境中,没有发现Mysql in App功能,是不是无法在Linux中使用呢 ...
- node.js在win7下安装,并测试是否安装成功
1.node.js去官网下载,下载完,像平时安装软件一样 2.把下面的测试文件,放到安装目录下,本文是放到:D:\Program Files\nodejs下 var http = require(&q ...
- foundation部分学习记录(更正更新中……)
foundation部分学习记录(更新中--) 从FDB的角度看,它对上层只提供有序+事务+KV存储的抽象. 设计原则 模块化分割,尽量细分且模块之间相互解耦 例如事务系统内,其提交(write pa ...