HarmonyOS应用开发学习笔记 UI布局学习 相对布局 (RelativeContainer)

UI布局学习 之 相对布局 (RelativeContainer)

官方文档

一、关键字 RelativeContainer, alignRules(适配规则)

			Text('Text02').alignRules({left: { anchor: 'text01', align: HorizontalAlign.Start },top: { anchor: 'text01', align: VerticalAlign.Bottom },bottom: { anchor: 'text01', align: VerticalAlign.Bottom },right: { anchor: 'text01', align: HorizontalAlign.End }})
  • 其实很好理解 :alignRules{}里面表示:
  • 元素四个方向(left,top,bottom,right),
  • 相对于谁(anchor:‘id’)
  • 的什么位置(HorizontalAlign.Start ,VerticalAlign.Bottom ,VerticalAlign.Bottom, HorizontalAlign.End )

RelativeContainer为采用相对布局的容器,支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点,也支持指定父容器作为锚点,基于锚点做相对位置布局。下图是一个RelativeContainer的概念图,图中的虚线表示位置的依赖关系。

在这里插入图片描述
子元素并不完全是上图中的依赖关系。比如,Item4可以以Item2为依赖锚点,也可以以RelativeContainer父容器为依赖锚点。

二、关键:锚点(相对于谁)、对齐方式

项目描述
锚点相对于谁,通过锚点设置当前元素基于哪个元素确定位置。
对齐方式通过对齐方式,设置当前元素是基于锚点的上中下对齐,还是基于锚点的左中右对齐。
RelativeContainer IDRelativeContainer父组件为锚点,__container__代表父容器的id
.alignRules设置对齐方式的关键方法(left、middle、right,top、center、bottom)

为了明确定义锚点,必须为RelativeContainer及其子元素设置ID

  • 在水平方向上,可以设置left、middle、right的锚点。
  • 竖直方向上,可以设置top、center、bottom的锚点。

RelativeContainer父组件为锚点,__container__代表父容器的id

关键点:

  • 1、弄清楚相对于谁,(id是关键)
  • 2、对齐方式的设置(eft、middle、right,top、center、bottom)

1、元素相对于父组件 示例:

在这里插入图片描述

RelativeContainer() {Text('Text01').alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },left: { anchor: '__container__', align: HorizontalAlign.Start }}).width(100).height(100).backgroundColor(Color.Red).id('text01')Text('Text02').textAlign(TextAlign.Center).alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },right: { anchor: '__container__', align: HorizontalAlign.End }}).width(100).height(100).backgroundColor(Color.Green).id('text02')}.backgroundColor(Color.Yellow).width('100%').height(500)

2、子元素之间相对布局 以子元素为参照物

  • text02相对于text01
    在这里插入图片描述
    RelativeContainer() {Text('Text01').alignRules({//相对于父容器,顶部(top)和左边(start)位置top: { anchor: '__container__', align: VerticalAlign.Top },left: { anchor: '__container__', align: HorizontalAlign.Start }}).width(100).height(100).backgroundColor(Color.Red).id('text01')Text('Text02').textAlign(TextAlign.Center).alignRules({//相对于text01(id为('text01')的元素),顶部(top)和id('text01')的底部(Bottom)对齐top: { anchor: 'text01', align: VerticalAlign.Bottom },left: { anchor: 'text01', align: HorizontalAlign.Start } //顶部(top)和id('text01')的底部(Bottom)对齐}).margin({ top: 20 }).width(100).height(100).backgroundColor(Color.Green).id('text02')}.backgroundColor(Color.Yellow).width('100%').height(500)

三、设置相对于锚点的对齐位置

项目描述
水平方向可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。
竖直方向可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。

在这里插入图片描述

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

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

相关文章

[足式机器人]Part3 机构运动学与动力学分析与建模 Ch00-2(3) 质量刚体的在坐标系下运动

本文仅供学习使用,总结很多本现有讲述运动学或动力学书籍后的总结,从矢量的角度进行分析,方法比较传统,但更易理解,并且现有的看似抽象方法,两者本质上并无不同。 2024年底本人学位论文发表后方可摘抄 若有…

WAF(Web应用防火墙)全面解析

Web应用防火墙(WAF)是确保网络安全的重要工具,尤其在保护Web应用免受各种网络攻击方面发挥着至关重要的作用。以下是关于WAF的各方面详细介绍: 定义和目的 WAF是一种特殊类型的防火墙,专门设计用于监视、过滤和阻挡进…

增广路算法 DFS求解 最大网络流问题

最大网络流问题 最大网络流问题是这样的,有一个有向图,假定有一个源点,有一个汇点,源点有流量出来,汇点有流量进入,有向图上的边的权重为该条边可通过的最大流量(方向为边的方向),问从源点到汇…

的修平台——院校智能报修的强大助手,轻松解决报修难题!

在当今信息化时代,智能化的后勤管理成为了提升院校服务水平的关键。其中,报修流程的智能化改革更是重中之重。面对传统报修方式存在的种种问题,如报修流程冗长、信息沟通不畅、进度难以跟踪等,的修平台应运而生,为院校…

自动化测试框架pytest系列之基础概念介绍(一)

如果你要打算学习自动化测试 ,无论是web自动化、app自动化还是接口自动化 ,在学习的道路上,你几乎会遇到pytest这个测试框架,因为自动化编写没有测试框架,根本玩不了 。 如果你已经是一位自动化测试人员 ,…

HarmonyOS鸿蒙应用开发——原生与H5通信框架DSBrigde-HarmonyOS

文章目录 介绍安装使用原生JavaScript进度回调 参考 介绍 HarmonyOS版的DSBridge,通过本库可以在鸿蒙原生与JavaScript完成交互,相互调用彼此的功能。 目前兼容Android、iOS第三方DSBridge库的核心功能,基本保持原来的使用方式,…

c++|关键字extern

一个C语言项目往往由多个文件组合而成。而对于多个文件来说,它们可能会共用到一些相同的变量。而有些情况下,这些相同的变量并没有出现在本文件内,有可能在其他文件内。而一个文件可能只会搜寻该文件内部是否有该变量。 所以,需要…

c++的构造函数

目录 构造函数 1.构造函数: 2.构造函数的特点: 默认构造函数 -- 没有参数的构造函数 1. 合成(自动)的默认构造函数(一般不常用) 1) 介绍,以及为什么不使用 2)可以使用合成默认构造函数的情况 2. 自定义的默认…

xss-labs(6-9)

level6:欢迎来到level6 老规矩还是先看看输入框的闭合情况 尝试事件函数绕过 test" onclick="alert(欢迎来钓鱼) 既然事件函数被转义了,那就使用我们第二关用过的绕过方法插入标签看看 test"><script>alert(欢迎来钓鱼)</script>// <

新书速览|循序渐进Vue.js 3.x前端开发实战

Vue.js初学者和前端开发人员使用&#xff0c;网课、培训机构与大中专院校的教学用书 作者简介 张益珲 美国亚利桑那州立大学计算机工程技术硕士&#xff0c;架构师&#xff0c;从业近10年&#xff0c;多年大前端开发经验&#xff0c;曾就职于知名上市公司&#xff0c;主导开发…

go 语言常见问题(2)

11. recover的执行时机 无&#xff0c;recover 必须在 defer 函数中运行。recover 捕获的是祖父级调用时的异常&#xff0c;直接调用时无效。 func main() {recover()panic(1) }直接 defer 调用也是无效。 func main() {defer recover()panic(1) }defer 调用时多层嵌套依然无…

算法训练营Day42(背包问题)

基础 非竞赛只需要搞懂0-1背包和完全背包 0-1背包基础 0-1背包是完全背包和多重背包的基础 n个物品&#xff0c;每个物品一个&#xff0c;每个物品有自己的重量和价值&#xff0c;&#xff0c;一个背包能装m物品&#xff0c;问最多装多少物品。 暴力解法&#xff0c;n个物品…

Acwing845 八数码

在2019年y神认为是困难题&#xff0c;2023年便是中等题了。。。嗯。。。 题目 在一个 33的网格中&#xff0c;1∼8 这 8个数字和一个 x 恰好不重不漏地分布在这 33 的网格中。 例如&#xff1a; 1 2 3 x 4 6 7 5 8在游戏过程中&#xff0c;可以把 x 与其上、下、左、右四个…

SpringMVC 的入门

SpringMVC 的入门 1环境搭建 1.1.创建工程 1.2.添加web支持 右键项目选择Add framework support... 2.添加web支持 ​ 3.效果 注意&#xff1a; 不要先添加打包方式将web目录要拖拽到main目录下&#xff0c;并改名为webapp 1.3.pom.xml <?xml version"1.0&q…

鱼哥赠书活动第⑥期:《内网渗透实战攻略》看完这本书教你玩转内网渗透测试成为实战高手!!!!

鱼哥赠书活动第⑥期&#xff1a;《内网渗透实战攻略》 如何阅读本书&#xff1a;本书章节介绍&#xff1a;本书大致目录&#xff1a;适合阅读对象&#xff1a;赠书抽奖规则:往期赠书福利&#xff1a; 当今&#xff0c;网络系统面临着越来越严峻的安全挑战。在众多的安全挑战中&…

7双指针问题-接雨水2

给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表…

控制注塑机PQ比例阀放大器

控制不带电反馈的单或双比例电磁铁的博世力士乐&#xff08;Bosch Rexroth&#xff09;、伊顿威格士&#xff08;EATON Vickers&#xff09;、油研&#xff08;YUKEN&#xff09;、贺德克&#xff08;HYDAC&#xff09;、大金&#xff08;DAIKIN&#xff09;、不二越&#xff0…

ubuntu系统笔记导览

本笔记主要是为了方便查找和回顾学习&#xff0c;如果后续该系列更新时会同步更新在此导览中。 ubuntu系统中Error&#xff1a;No space left on device&#xff0c;解决办法&#xff1a;挂载大容量sda分区_unbuntu编译报错设备上没空间-CSDN博客 ubuntu系统&#xff08;2&am…

网安入门13-文件上传(htaccess,其他绕过)

空格绕过&#xff0c;点号绕过 Pass-07 直接上传肯定是失败的 把文件名1.php改成1.php.或1.php_(下划线为空格)&#xff0c;这种命名方式在windows系统里是不被允许的&#xff0c;所以需要在burp之类里进行修改&#xff0c;然后绕过验证后&#xff0c;会被windows系统自动去掉…

数据库-列的类型-浮点数,定点数-数据类型

类型占用空间负数取值范围正数取值范围FLOAT4 字节-3.4 x 10^383.4 x 10^38DOUBLE8 字节-1.8 x 10^3081.8 x 10^308DECIMAL(M,d)M2-1.8 x 10^3081.8 x 10^308 M表示数字的总位数&#xff0c;而d表示小数点后的位数 d不能大于m&#xff1b; 创建表 不指定精度 # 创建表 crea…