鸿蒙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.mzph.cn/diannao/12268.shtml

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

相关文章

增程SUV价格即将崩盘?买车一定要再等等!

文 | AUTO芯球 作者 | 雷歌​ 真是“离谱”啊,车圈真是逗比欢乐多, 我这两天看一个博主连续40多小时开车直播,充电口、油箱盖全部封死,全程视频直播没断过, 就为了测试这两天刚上市的星际元ET续航有多远。 另一个…

NSSCTF Web方向的例题和相关知识点(二)

[SWPUCTF 2021 新生赛]Do_you_know_http 解题: 点击打开环境,是 提示说请使用wLLm浏览器访问 我们可以更改浏览器信息,在burp重放器中发包后发现是302重定向,但是提示说success成功,说明 我们修改是成功的&#xff…

HTML特殊字符

特殊字符 有特殊含义的字符成为字符实体 对于有特殊含义的字符,需要通过转移字符来表示 <span> <br><a href"http://www.atguigu.com">我 爱 前端</a> <br>&amp;amp; 效果

Element-UI 快速入门指南

文章目录 一、安装 Element-UI1.1 使用 npm 安装1.2 使用 yarn 安装 二、引入 Element-UI三、使用 Element-UI 组件3.1 按钮组件3.2 输入框组件3.3 表单组件3.4 表格组件3.5 弹框组件 四、自定义主题4.1 安装主题工具4.2 初始化变量文件4.3 编译主题 五、总结 &#x1f389;欢迎…

刷题之最长连续序列

哈希表 class Solution { public:int longestConsecutive(vector<int>& nums) {//set记录并且去重nums中的数unordered_set<int>set;for(int i0;i<nums.size();i){set.insert(nums[i]);}int result0;//遍历所有数for(auto iset.begin();i!set.end();i){//如…

服务的war包已经丢在tomcat中但是还是没法访问,如何排查?

问题出现的现象是我已经将 XWiki 的 WAR 包放置在 Tomcat 的 webapps目录下但仍然无法访问&#xff0c;反思之后可以从下面以下几个方面来诊断和解决问题&#xff1a; 1. 确认 Tomcat 正在运行 首先&#xff0c;确保 Tomcat 服务正在正常运行。可以使用以下命令检查 Tomcat 的…

鉴源论坛·观通丨轨交软件测试技术详述

作者 | 刘艳青 上海控安安全测评部测试经理 版块 | 鉴源论坛 观通 社群 | 添加微信号“TICPShanghai”加入“上海控安51fusa安全社区” 01 集成测试技术要求 1.1 总体要求 对软件集成测试进行静态测试应先于动态测试&#xff1b; 集成过程是动态进行的&#xff0c;在测…

CVHub | CVPR 2024 | 英伟达发布新一代视觉基础模型: AM-RADIO = CLIP + DINOv2 + SAM

本文来源公众号“CVHub”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;CVPR 2024 | 英伟达发布新一代视觉基础模型: AM-RADIO CLIP DINOv2 SAM 标题&#xff1a;《AM-RADIO: Agglomerative Vision Foundation Model Reduce Al…

vscode 之 output 输出中文乱码,终端输出中文正常

# 1. 背景 因为没钱买正版的软件&#xff0c;所以转战 vscode 编译器。 在编译 python 文件时&#xff0c;发现直接右键 runner code&#xff0c;输出中文乱码。 但是在 teiminal 终端 执行py test.py 时&#xff0c;输出正常&#xff0c;中文正常。 output 输出中文样式(中文…

Go微服务: Prometheus性能监控与Grafana平台的搭建

Prometheus 概述 promethues 是一套开源的监控&报警&时间序列数据库的组合基本原理是通过http协议周期性抓取被监控组件的状态适合Docker、Kubernetes环境的监控系统 Promethues 整体架构 一、抓取数据的两种方式 1 &#xff09;Short-lived jobs 短暂的任务 不会提…

RedisTemplate操作Redis详解之连接Redis及自定义序列化

连接到Redis 使用Redis和Spring时的首要任务之一是通过IoC容器连接到Redis。为此&#xff0c;需要java连接器&#xff08;或绑定&#xff09;。无论选择哪种库&#xff0c;你都只需要使用一组Spring Data Redis API&#xff08;在所有连接器中行为一致&#xff09;&#xff1a;…

面对.halo勒索病毒,如何有效防范与应对?

导言&#xff1a; 随着网络技术的不断发展&#xff0c;网络安全问题也日益凸显。其中&#xff0c;勒索病毒作为一种极具破坏性的网络攻击手段&#xff0c;近年来在全球范围内频发。其中&#xff0c;.halo勒索病毒作为勒索病毒家族中的一员&#xff0c;其危害性和传播性不容忽视…

StNet: Local and Global Spatial-Temporal Modeling for Action Recognition 论文阅读

StNet: Local and Global Spatial-Temporal Modeling for Action Recognition 论文阅读 Abstract1 Introduction2 Related Work3 Proposed Approach4 Experiments5 Conclusion 文章信息&#xff1a; 原文链接&#xff1a;https://ojs.aaai.org/index.php/AAAI/article/view/4…

二叉树专题(有关二叉树的相关学习)

二叉树 1.数概念及结构 1.1树的结构 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因 为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 有一个特殊的结…

ollama离线部署llama3(window系统)

首先介绍下ollama是什么&#xff1f;Ollama是一个开源的大型语言模型服务工具&#xff0c;旨在为用户提供本地化的运行环境&#xff0c;满足个性化的需求。具体来说&#xff0c;Ollama是一个功能强大的开源框架&#xff0c;可以简化在Docker容器中部署和管理大型语言模型&a…

【C++】内联函数、auto、范围for

文章目录 1.内联函数2.auto关键字2.1auto简介2.2auto的注意事项2.3auto不能推导的场景 3.基于范围的for循环(C11)4.指针空值nullptr(C11) 1.内联函数 概念&#xff1a; 以inline修饰的函数叫做内联函数&#xff0c;编译时C编译器会在调用内联函数的地方展开&#xff0c;没有函…

商场综合体能源监管平台,实现能源高效管理

商场作为大型综合体建筑&#xff0c;其能源消耗一直是备受关注的问题。为了有效管理商场能耗&#xff0c;提高商场能源效率&#xff0c;商场综合体能源监管平台应运而生。 商场综合体能源监管平台可通过软硬件一起进行节能监管&#xff0c;硬件设备包括各种传感器、监测仪表和…

Matter 1.3版标准新出炉,支持更多智能家居/家电/能源等设备

5月8日&#xff0c;CSA连接标准联盟正式发布了Matter 1.3标准&#xff0c;过去CSA一直保持约每六个月一次的标准更新节奏。 图源CSA连接标准联盟官方 获得一系列改进的Matter 1.3标准&#xff0c;将提升设备的互操作性&#xff0c;扩展支持的设备类别&#xff0c;并增强整个智…

Android 几种系统升级方式详解

目录 ◆ 概述 ● 几种启动模式 ● MISC分区 ● CACHE分区 ● 几种系统升级方式 ◆ Recovery升级 ● 升级包构成&#xff0c;签名&#xff0c;制作 ● 升级脚本 ● 升级过程 ◆ OTA升级 ● 升级包构成&#xff0c;制作 ● 升级脚本 ● 升级过程 ◆ fastboot升级 ◆ ADB升级 几…

【研发日记】Matlab/Simulink技能解锁(七)——两种复数移相算法

复数移相&#xff0c;也称为复数相位旋转&#xff0c;就是在原有复数的基础上&#xff0c;不改变模数&#xff0c;只把相位角做一定的偏移。 文章目录 前言 三角函数移相 复数乘法移相 分析和应用 总结 前言 见《【研发日记】Matlab/Simulink技能解锁(二)——在Function编…