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,一经查实,立即删除!

相关文章

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

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

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

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

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

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

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;主导开发…

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

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

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…

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

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

三维猴打印PCB外壳预留板壳间距

3D文件下单那里有一个“3D模型设计规范”&#xff0c;里面详细讲了设计时要考虑打印的参数细节。如果有其他的设计规范不了解的也可以进去查看&#xff0c;里面写的很详细。 这里是打印PCB外壳预留板壳间距相关说明&#xff1a; 设计模型为装配体&#xff0c;请务必满足装配最…

什么是springmvc(介绍)

什么是springmvc 1. 什么是springmvc2.项目中加入springmvc支持2.1 导入依赖2.2 springMVC配置文件2.3 web.xml配置2.4 中文编码处理 3. 编写一个简单的controller4. 视图层配置4.1 视图解析器配置4.2 静态资源配置4.2 编写页面4.3 页面跳转方式 5. SpringMVC处理请求的流程6. …

纯血鸿蒙「扩圈」100天,酝酿已久的突围

坦白讲&#xff0c;去年参加华为开发者大会看到HarmonyOS NEXT&#xff08;仅运行鸿蒙原生应用&#xff0c;所以也称作「纯血鸿蒙」&#xff09;的时候&#xff0c;小雷也没料想到鸿蒙原生应用生态的发展速度会如此之快。 9月25日&#xff0c;华为正式对外宣布启动HarmonyOS NE…

【C语言】指针——从底层原理到应用

C语言指针-从底层原理到花式技巧&#xff0c;用图文和代码帮你讲解透彻 目录 一、前言二、变量与指针的本质 1. 内存地址2. 32位与64位系统3. 变量4. 指针变量5. 操作指针变量 5.1 指针变量自身的值5.2 获取指针变量所指向的数据5.3 以什么样的数据类型来使用/解释指针变量所指…

Python学习笔记-使用Anaconda+VSCode配置开发环境

文章目录 概述一、安装Anaconda1.1 下载软件1.2 安装anaconda1.3 配置环境 二、配置虚拟环境2.1 使用conda创建一个新的虚拟环境2.1.1 使用search指令查看支持的python的版本&#xff1a;2.1.2 使用create创建指定版本的虚拟环境&#xff1a;2.1.3 使用env list查看虚拟环境列表…

BigDecimal使用记录

在公司经费这块用到了BigDecimal类&#xff0c;特此整理记录一下。 一、BigDecimal简介&#xff1a; float和double类型的主要设计目标是为了科学计算和工程计算。他们执行二进制浮点运算&#xff0c;这是为了在广域数值范围上提供较为精确的快速近似计算而精心设计的。然而&a…

vulhub中的Apache HTTPD 多后缀解析漏洞详解

Apache HTTPD 多后缀解析漏洞 1.查看python版本 这里python版本很重要&#xff0c;因为版本过低可能会导致后面的结果运行不成功 这里我就遇到了因为版本过低而执行不了docker-compose up -d的情况 查看python版本 cd /usr/bin ls -al python* 当版本过低时安装高版本的 …