鸿蒙ArkUI开发:常用布局【相对布局】

相对布局(RelativeContainer)

  1. 相对布局可以让子元素指定兄弟元素或父容器作为锚点,基于锚点做位置布局
  2. 必须为RelativeContainer及其子元素设置ID,用于指定锚点信息。未设置ID的子元素不会显示
  3. RelativeContainer ID为“__container__”,其余子元素的ID通过id属性设置。
  4. 子元素通过 alignRules 指定相对布局规则
  5. 开发前请熟悉鸿蒙开发指导文档:gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

锚点的对齐位置示意图

image.png

一个示例

typescript
复制代码
@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')  //设置锚点为row1Row() {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')  //设置锚点为row2Row().width(100).height(100).backgroundColor('#FFCC00').alignRules({top: { anchor: 'row2', align: VerticalAlign.Top }}).id('row3')  //设置锚点为row3Row().width(100).height(100).backgroundColor('#FF9966').alignRules({top: { anchor: 'row2', align: VerticalAlign.Top },left: { anchor: 'row2', align: HorizontalAlign.End },}).id('row4')  //设置锚点为row4Row().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 })}
}
 

搜狗高速浏览器截图20240326151450.png

image.png

鸿蒙语言有TS、ArkTS等语法,那么除了这些基础知识之外,其核心技术点有那些呢?下面就用一张整理出的鸿蒙学习路线图表示:

从上面的OpenHarmony技术梳理来看,鸿蒙的学习内容也是很多的。现在全网的鸿蒙学习文档也是非常的少,下面推荐一些:完整内容可在头像页保存,或这qr23.cn/AKFP8k甲助力

内容包含:《鸿蒙NEXT星河版开发学习文档》

  • ArkTS
  • 声明式ArkUI
  • 多媒体
  • 通信问题
  • 系统移植
  • 系统裁剪
  • FW层的原理
  • 各种开发调试工具
  • 智能设备开发
  • 分布式开发等等。

这些就是对往后开发者的分享,希望大家多多点赞关注喔!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/327477.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot3项目练习详细步骤(第三部分:文章管理模块)

目录 发布文章 接口文档 业务实现 自定义参数校验 项目参数要求 实现思路 实现步骤 文章列表(条件分页) 接口文档 业务实现 mapper映射 更新文章 接口文档 业务实现 获取文章详情 接口文档 业务实现 删除文章 接口文档 业务实现 文章管理业务表结构…

Java面试八股之什么是Java反射

什么是Java反射 基本概念 反射是Java语言的一个重要特性,它允许我们在运行时分析类、接口、字段、方法等组件的信息,并能够动态地操作这些组件,包括创建对象、调用方法、访问和修改字段值等。简单来说,反射提供了在程序运行时对…

嵌入式Linux:编译和使用Protobuf库

目录 1、开发环境和工具 2、安装和编译Protobuf、Protobuf-C库 3、编写和编译proto文件 4、修改makefile文件 5、测试示例 6、参考资料 Protobuf(Protocol Buffers)是由 Google 开发的一种轻量级、高效的结构化数据序列化方式,用于在不同应用…

Qt5 互动地图,实现无人机地面站效果

一、概述 本文主要通过Qt5opmapcontrol实现一个简单的无人机地面站效果。opmapcontrol是一个比较古老的QT开源地面站库,可选择谷歌地图,必应地图, 雅虎地图,GIS等。可直接使用源码,也可以编译生成库进行调用。实现效果…

.NET周刊【5月第2期 2024-05-12】

国内文章 C#在工业数字孪生中的开发路线实践 https://mp.weixin.qq.com/s/b_Pjt2oii0Xa_sZp_9wYWg 这篇文章探讨了C#在工业数字孪生技术中的应用,介绍了三种基于C#的数字孪生系统实现方案: WPF Unity:结合WPF技术和Unity引擎&#xff0c…

umi项目配置之项目构建时配置umirc.ts

对于 umi 中能使用的自定义配置,你可以使用项目根目录的 .umirc.ts 文件或者 config/config.ts,值得注意的是这两个文件功能一致,仅仅是存在目录不同,2 选 1 ,.umirc.ts 文件优先级较高 umi 的配置文件是一个正常的 n…

大数据可视化实验(五):Tableau数据可视化

目录 一、实验目的... 1 二、实验环境... 1 三、实验内容... 1 1)打开数据源... 1 2)进入工作簿... 2 3)字段设置... 2 4)数据筛选... 3 5)绘制条形图... 3 四、思考问题... 4 五、总结与心得体会... 4 一、…

系统图表:洞察数据的价值与魅力

在数字化、信息化迅猛发展的今天,数据已经成为企业决策、科学研究、社会管理等领域的核心资源。而如何高效、准确地理解和利用这些数据,成为摆在我们面前的重要课题。系统图表作为数据可视化的重要呈现工具,不仅能帮助我们洞察数据的内在规律…

ssti学习(1)

一、成因: 渲染模板时,没有严格控制对用户的输入。(使用了危险的模板,导致用户可以和flask程序进行交互) flask是一种基于web开发的web服务器,如果用户可以和flask交互,则可以执行eval、syste…

MFC重要的初始化函数InitInstance

MFC应用程序最早处理的类的初始化函数通常是CWinApp类的构造函数。CWinApp类是MFC应用程序的主类,负责整个应用程序的初始化和管理。 在MFC应用程序中,通常会创建一个派生自CWinApp类的应用程序类,例如CMyApp。在应用程序启动时,…

3ds Max与Maya不同之处?两者哪个更适合云渲染?

3ds Max 和 Maya 都是知名的3D软件,各有其特色。3ds Max 以直观的建模和丰富的插件生态闻名;Maya 则在动画和角色创作方面更为出色。两者都支持云渲染技术,能帮助用户在云端高效完成项目。 一、3ds Max和Maya之间的主要区别: 3ds…

keepalived双机热备超详细入门介绍

keepalived 一、keepalived入门介绍 1.keepalived简介 2.keepalived服务的三个重要功能 2.1.管理LVS负载均衡软件 2.2.实现对LVS集群节点健康检查功能 2.3.作为系统网络服务的高可用功能 3.keepalived高可用故障切换转移原理 4.keepalived安装及主配置文件介绍 …

Hadoop 3.4.0+HBase2.5.8+ZooKeeper3.8.4+Hive+Sqoop 分布式高可用集群部署安装 大数据系列二

创建服务器,参考 虚拟机创建服务器 节点名字节点IP系统版本master11192.168.50.11centos 8.5slave12192.168.50.12centos 8.5slave13192.168.50.13centos 8.5 1 下载组件 Hadoop:官网地址 Hbase:官网地址 ZooKeeper:官网下载 Hive:官网下载 Sqoop:官网下载 为方便同学…

基于IDEA快速创建一个SpringMVC项目并且配置Tomcat

1,打开IDEA,新建Maven项目【使用web模板创建】 使用社区版的同学创建普通的maven项目,并配置项目的webapp,详情可参考 快速创建一个SpringMVC项目(IDEA) 2,在main目录下创建Java和resource目录…

如何向Linux内核提交开源补丁?

2021年,我曾经在openEuler社区上看到一项改进Linux内核工具的需求,因此参与过Linux内核社区的开源贡献。开源贡献者参与Linux内核贡献的基本方式是提交补丁(patch),流程都可以在内核社区文档中找到,但是&am…

网络安全快速入门(九)MySQL进阶操作

上一章我们了解了对表及库的基本增删查改操作,本章我们针对增删查改内容进行与一些拓展, 9.1字段修饰及数据类型 我们之前在创建表时用到的格式为: create table 表名 ( 字段名1 字段数据类型(数据类型长度), 字段名2 …

83.网络游戏逆向分析与漏洞攻防-移动系统分析-游戏瞬移漏洞的测试与分析

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 如果看不懂、不知道现在做的什么,那就跟着做完看效果,代码看不懂是正常的,只要会抄就行,抄着抄着就能懂了 内容…

基于Vue3+ElementPlus项目,复制文字到剪贴板功能实践指南,揭秘使用js-tool-big-box工具库的核心优势

在前端开发项目中,很多时候有那么一个场景,就是要求将一段文案复制下来,这段文案可能是一串很长的id,可能是一条命令语句,可能是一小段文案,复制到剪贴板上。这样有利于用户复制到其他地方去,使…

mybatisPlus一个事务中切换数据源概述

概述 在多数据源的配置下,业务中经常遇到在一个被本地事务包裹的save/edi方法中需要查询另一个数据源的数据; 直接查询会提示table不存在,这是因为一个事务和一个mysql连接是绑定的,mysql的连接背后包含了数据库信息,…

GPT搜索鸽了!改升级GPT-4

最近OpenAI太反常,消息一会一变,直让人摸不着头脑。 奥特曼最新宣布:5月13日开发布会,不是GPT-5,也不是盛传的GPT搜索引擎,改成对ChatGP和GPT-4的升级~ 消息一出,大伙儿都蒙了。 之…