19.HarmonyOS App(JAVA)依赖布局DependentLayout使用方法

news2025/2/22 6:45:42

layout/ability_main.xml

显示位置不对:检查布局文件ohos:lef_of = "id:tuzi",比如显示在兔子的左侧,这里就会显示不对。

需要id前没有$符号。改为: ohos:lef_of = "$id:tuzi"

<?xml version="1.0" encoding="utf-8"?>
<!--鸿蒙系统app依赖布局 图像控件,添加图片-->
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent">

    <Image
        ohos:id="$+id:tuzi"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:image_src="$media:tuzi"
        ohos:margin="10vp"
        ohos:center_in_parent="true"

     />
 <Image
     ohos:height="match_content"
     ohos:width="match_content"
     ohos:image_src="$media:huanxiong"
     ohos:left_of="$id:tuzi"
     ohos:center_in_parent="true"

     />
 <Image
     ohos:id="$+id:panda"
     ohos:height="match_content"
     ohos:width="match_content"
     ohos:image_src="$media:panda"
     ohos:above="$id:tuzi"
     ohos:center_in_parent="true"



     />
 <Image
     ohos:id="$+id:dog"
     ohos:height="match_content"
     ohos:width="match_content"
     ohos:image_src="$media:dog"
     ohos:right_of="$id:tuzi"
     ohos:center_in_parent="true"


     />
 <Image
     ohos:id="$+id:bird"
     ohos:height="match_content"
     ohos:width="match_content"
     ohos:image_src="$media:bird"
     ohos:below="$id:tuzi"
     ohos:center_in_parent="true"


     />


</DependentLayout>

DependentLayout的自有XML属性见下表:

表1 DependentLayout的自有XML属性

属性名称

中文描述

取值

取值说明

使用案例

alignment

对齐方式

left

表示左对齐。

可以设置取值项如表中所列,也可以使用“|”进行多项组合。

ohos:alignment="top|left"

ohos:alignment="left"

top

表示顶部对齐。

right

表示右对齐。

bottom

表示底部对齐。

horizontal_center

表示水平居中对齐。

vertical_center

表示垂直居中对齐。

center

表示居中对齐。

DependentLayout所包含组件可支持的XML属性见下表:

表2 DependentLayout所包含组件可支持的XML属性表

属性名称

中文描述

取值

取值说明

使用案例

left_of

将右边缘与另一个子组件的左边缘对齐

引用

仅可引用DependentLayout中包含的其他组件的id。

说明

  • left_of与start_of、end_of属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,left_of会与start_of属性冲突;在“水平布局方向为从右到左”时,left_of会与end_of属性冲突。
  • 同时配置时,start_of、end_of优先级高于left_of属性。

ohos:left_of="$id:component_id"

right_of

将左边缘与另一个子组件的右边缘对齐

引用

仅可引用DependentLayout中包含的其他组件的id。

说明

  • right_of与start_of、end_of属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,right_of会与end_of属性冲突;在“水平布局方向为从右到左”时,right_of会与start_of属性冲突。
  • 同时配置时,start_of、end_of优先级高于right_of属性。

ohos:right_of="$id:component_id"

start_of

将结束边与另一个子组件的起始边对齐

引用

仅可引用DependentLayout中包含的其他组件的id。

说明

  • start_of与left_of、right_of属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,start_of会与left_of属性冲突;在“水平布局方向为从右到左”时,start_of会与right_of属性冲突。
  • 同时配置时,start_of优先级高于left_of、right_of属性。

ohos:start_of="$id:component_id"

end_of

将起始边与另一个子组件的结束边对齐

引用

仅可引用DependentLayout中包含的其他组件的id。

说明

  • end_of与left_of、right_of属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,end_of会与right_of属性冲突;在“水平布局方向为从右到左”时,end_of会与left_of属性冲突。
  • 同时配置时,end_of优先级高于left_of、right_of属性。

ohos:end_of="$id:component_id"

above

将下边缘与另一个子组件的上边缘对齐

引用

仅可引用DependentLayout中包含的其他组件的id

ohos:above="$id:component_id"

below

将上边缘与另一个子组件的下边缘对齐

引用

仅可引用DependentLayout中包含的其他组件的id

ohos:below="$id:component_id"

align_baseline

将子组件的基线与另一个子组件的基线对齐

引用

仅可引用DependentLayout中包含的其他组件的id

ohos:align_baseline="$id:component_id"

align_left

将左边缘与另一个子组件的左边缘对齐

引用

仅可引用DependentLayout中包含的其他组件的id。

说明

  • align_left与align_start、align_end属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_left会与align_start属性冲突;在“水平布局方向为从右到左”时,align_left会与align_end属性冲突。
  • 同时配置时,align_start、align_end优先级高于align_left属性。

ohos:align_left="$id:component_id"

align_top

将上边缘与另一个子组件的上边缘对齐

引用

仅可引用DependentLayout中包含的其他组件的id

ohos:align_top="$id:component_id"

align_right

将右边缘与另一个子组件的右边缘对齐

引用

仅可引用DependentLayout中包含的其他组件的id。

说明

  • align_right与align_start、align_end属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_right会与align_end属性冲突;在“水平布局方向为从右到左”时,align_right会与align_start属性冲突。
  • 同时配置时,align_start、align_end优先级高于align_right属性。

ohos:align_right="$id:component_id"

align_bottom

将底边与另一个子组件的底边对齐

引用

仅可引用DependentLayout中包含的其他组件的id

ohos:align_bottom="$id:component_id"

align_start

将起始边与另一个子组件的起始边对齐

引用

仅可引用DependentLayout中包含的其他组件的id。

说明

  • align_start与align_left、align_right属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_start会与align_left属性冲突;在“水平布局方向为从右到左”时,align_start会与align_right属性冲突。
  • 同时配置时,align_start优先级高于align_left、align_right属性。

ohos:align_start="$id:component_id"

align_end

将结束边与另一个子组件的结束边对齐

引用

仅可引用DependentLayout中包含的其他组件的id。

说明

  • align_end与align_left、align_right属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_end会与align_right属性冲突;在“水平布局方向为从右到左”时,align_end会与align_left属性冲突。
  • 同时配置时,align_end优先级高于align_left、align_right属性。

ohos:align_end="$id:component_id"

align_parent_left

将左边缘与父组件的左边缘对齐

boolean类型

可以直接设置true/false,也可以引用boolean资源。

说明

  • align_parent_left与align_parent_start、align_parent_end属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_parent_left会与align_parent_start属性冲突;在“水平布局方向为从右到左”时,align_parent_left会与align_parent_end属性冲突。
  • 同时配置时,align_parent_start、align_parent_end优先级高于align_parent_left属性。

ohos:align_parent_left="true"

ohos:align_parent_left="$boolean:true"

align_parent_top

将上边缘与父组件的上边缘对齐

boolean类型

可以直接设置true/false,也可以引用boolean资源。

ohos:align_parent_top="true"

ohos:align_parent_top="$boolean:true"

align_parent_right

将右边缘与父组件的右边缘对齐

boolean类型

可以直接设置true/false,也可以引用boolean资源。

说明

  • align_parent_right与align_parent_start、align_parent_end属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_parent_right会与align_parent_end属性冲突;在“水平布局方向为从右到左”时,align_parent_right会与align_parent_start属性冲突。
  • 同时配置时,align_parent_start、align_parent_end优先级高于align_parent_right属性。

ohos:align_parent_right="true"

ohos:align_parent_right="$boolean:true"

align_parent_bottom

将底边与父组件的底边对齐

boolean类型

可以直接设置true/false,也可以引用boolean资源。

ohos:align_parent_bottom="true"

ohos:align_parent_bottom="$boolean:true"

align_parent_start

将起始边与父组件的起始边对齐

boolean类型

可以直接设置true/false,也可以引用boolean资源。

说明

  • align_parent_start与align_parent_left、align_parent_right属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_parent_start会与align_parent_left属性冲突;在“水平布局方向为从右到左”时,align_parent_start会与align_parent_right属性冲突。
  • 同时配置时,align_parent_start优先级高于align_parent_left、align_parent_right属性。

ohos:align_parent_start="true"

ohos:align_parent_start="$boolean:true"

align_parent_end

将结束边与父组件的结束边对齐

boolean类型

可以直接设置true/false,也可以引用boolean资源。

说明

  • align_parent_end与align_parent_left、align_parent_right属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_parent_end会与align_parent_right属性冲突;在“水平布局方向为从右到左”时,align_parent_end会与align_parent_left属性冲突。
  • 同时配置时,align_parent_end优先级高于align_parent_left、align_parent_right属性。

ohos:align_parent_end="true"

ohos:align_parent_end="$boolean:true"

center_in_parent

将子组件保持在父组件的中心

boolean类型

可以直接设置true/false,也可以引用boolean资源。

ohos:center_in_parent="true"

ohos:center_in_parent="$boolean:true"

horizontal_center

将子组件保持在父组件水平方向的中心

boolean类型

可以直接设置true/false,也可以引用boolean资源。

ohos:horizontal_center="true"

ohos:horizontal_center="$boolean:true"

vertical_center

将子组件保持在父组件垂直方向的中心

boolean类型

可以直接设置true/false,也可以引用boolean资源。

ohos:vertical_center="true"

ohos:vertical_center="$boolean:true"

排列方式

DependentLayout的排列方式是相对于其他同级组件或者父组件的位置进行布局。

相对于同级组件的对齐

  • 根据位置对齐

    left_of、right_of、start_of、end_of、above和below均相对于同级组件的不同位置进行对齐。例如left_of对齐方式,即将右边缘与同级组件的左边缘对齐,对齐后位于同级组件的左侧。其他几种对齐方式遵循的逻辑与此相同,需要注意的是start_of和end_of会跟随当前布局起始方向变化。

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

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

相关文章

方法引用练习:

技巧&#xff1a; 1.现在有没有一个方法符合我当前的需求 2.如果有这样的方法&#xff0c;这个方法是否满足引用的规则 练习一&#xff1a; 思路&#xff1a;//集合中的数据还是String类型&#xff0c;要放入Student类型数组中还需要先转型成Student类型 public class MyTest…

每日一题Leetcode 1686石子游戏Ⅵ

1686. 石子游戏 VI 题目描述&#xff1a; Alice 和 Bob 轮流玩一个游戏&#xff0c;Alice 先手。 一堆石子里总共有 n 个石子&#xff0c;轮到某个玩家时&#xff0c;他可以 移出 一个石子并得到这个石子的价值。Alice 和 Bob 对石子价值有 不一样的的评判标准 。双方都知道…

linux安装二进制openjdk1.8版本【配置永久加载环境变量】

二进制jdk下载地址&#xff1a;https://www.openlogic.com/openjdk-downloads 选择64位 jdk的 java8下载,然后解压 $ cd /home/ec2-user/config/ $ tar xf openlogic-openjdk-8u382-b05-linux-x64.tar.gz $ mv openlogic-openjdk-8u382-b05-linux-x64 openjdk-8编辑环境变…

机器学习 | 如何利用集成学习提高机器学习的性能?

目录 初识集成学习 Bagging与随机森林 Otto Group Product(实操) Boosting集成原理 初识集成学习 集成学习&#xff08;Ensemble Learning&#xff09;是一种通过组合多个基本模型来提高预测准确性和泛化能力的机器学习方法。它通过将多个模型的预测结果进行整合或投票来做…

vue3-逻辑复用

什么是组合式函数 _无状态逻辑的函数_&#xff1a;它在接收一些输入后立刻返回所期望的输出。 比如 时间格式化的函数。 有状态逻辑的函数: 有状态逻辑负责管理会随时间而变化的状态。 比如 跟踪当前鼠标在页面中的位置。 在 Vue 应用的概念中&#xff0c;“组合式函数”(…

智能汽车竞赛摄像头处理(3)——动态阈值二值化(大津法)

前言 &#xff08;1&#xff09;在上一节中&#xff0c;我们学习了对图像的固定二值化处理&#xff0c;可以将原始图像处理成二值化的黑白图像&#xff0c;这里面的本质就是将原来的二维数组进行了处理&#xff0c;处理后的二维数组里的元素都是0和255两个值。 &#xff08;2…

LeetCode 热题 100 | 链表(中上)

目录 1 141. 环形链表 1.1 哈希表 1.2 快慢指针 2 142. 环形链表 II 2.1 哈希表 2.2 快慢指针 3 21. 合并两个有序链表 4 2. 两数相加 菜鸟做题第三周&#xff0c;语言是 C 1 141. 环形链表 1.1 哈希表 解题思路&#xff1a;遍历链表&#xff0c;在哈希表中…

ROS方向第二次汇报(5)

文章目录 1.本方向内学习内容&#xff1a;1.1.自定义msg&#xff1a;1.1.1.定义msg文件&#xff1a;1.1.2.编辑配置文件&#xff1a; 1.2.自定义srv&#xff1a;1.2.1.定义srv文件&#xff1a;1.2.2.编辑配置文件&#xff1a; 1.3.服务通信案例实现&#xff1a;1.3.1.服务端实现…

HTML+CSS:导航栏组件

效果演示 实现了一个导航栏的动画效果&#xff0c;当用户点击导航栏中的某个选项时&#xff0c;对应的选项卡会向左平移&#xff0c;同时一个小圆圈会出现在选项卡的中心&#xff0c;表示当前选项卡的位置。这个效果可以让用户更加清晰地了解当前页面的位置和内容。 Code <…

正点原子--STM32定时器学习笔记(2)

书接上文&#xff0c;本篇是对基本定时器实验部分进行的总结~ 实验目标&#xff1a;通过TIM6基本定时器定时500ms&#xff0c;让LED0每隔500ms闪烁。 解决思路&#xff1a;使用定时器6&#xff0c;实现500ms产生一次定时器更新中断&#xff0c;在中断里执行“翻转LED0”。 定时…

【leetcode题解C++】98.验证二叉搜索树 and 701.二叉搜索树中的插入操作

98. 验证二叉搜索树 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。节点的右子树只包含 大于 当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。 示例…

kubernetes基本概念和操作

基本概念和操作 1.Namespace1.1概述1.2应用示例 2.Pod2.1概述2.2语法及应用示例 3.Label3.1概述3.2语法及应用示例 4.Deployment4.1概述4.2语法及应用示例 5.Service5.1概述5.2语法及应用示例5.2.1创建集群内部可访问的Service5.2.2创建集群外部可访问的Service5.2.3删除服务5.…

Zoho Mail企业邮箱商业扩展系列第1部分:入门指南与基础设置

今天让我们来认识一下王雪琳&#xff0c;她是一位独立经营的营销咨询机构的个体企业家。在开始自己的事业之前&#xff0c;她进行了广泛的市场调研&#xff0c;明确了自己的业务定位&#xff0c;并全力以赴地投入到了自己的企业中。 一、创业背景 王雪琳的营销业务主要集中在…

日志报错 git -c dif.mnemonicprefix=false -c core.guotepath=false 解决方法

前言: 在进行下面操作前,必须确保,你是否安装了Git。 查看Git 在命令行窗口中输入`git --version`: 如果这个命令成功显示了Git的版本信息,这表明Git已经被安装。 1. 使用Sourcetree SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端…

Kubernetes operator(五)api 和 apimachinery 篇

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 Kubernetes operator学习 系列第五篇&#xff0c;主要对 k8s.io/api 和 k8s.io/apimachinery 两个项目 进行学习基于 kubernetes v1.24.0 代码分析Kubernetes operator学习系列 快捷链接 Kubernetes operator&a…

数字巨轮航行大数据海洋:数据可视化引领时代潮流

在大数据时代的潮流中&#xff0c;数据可视化如同一艘畅行无阻的科技巨轮&#xff0c;引领我们穿越数字浩瀚的大海&#xff0c;使我们在信息的航程中游刃有余。下面我就从可视化从业者的角度&#xff0c;来简单说说数据可视化是如何帮助我们在大数据时代畅行无阻的。 数据可视化…

【Servlet】——Servlet API 详解

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【Servlet】 本专栏旨在分享学习Servlet的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 一、HttpServlet二、Htt…

【unity小技巧】unity3d环境带雾的昼夜系统变化

最终效果 文章目录 最终效果眩光素材眩光配置全局灯光配置天空盒配置天空盒资产配置天空盒&#xff0c;开启雾 代码控制天空盒 环境 雾 灯光昼夜交替变化参考完结 眩光素材 链接&#xff1a;https://pan.baidu.com/s/1qlFSJSju6ZjwCylwkh14eA?pwdveww 提取码&#xff1a;veww…

Oracle和Mysql数据库

数据库 Oracle 体系结构与基本概念体系结构基本概念表空间(users)和数据文件段、区、块Oracle数据库的基本元素 Oracle数据库启动和关闭Oracle数据库启动Oracle数据库关闭 Sqlplussqlplus 登录数据库管理系统使用sqlplus登录Oracle数据库远程登录解锁用户修改用户密码查看当前语…

Android学习之路(29) Gradle初探

前言: 大家回想一下自己第一次接触Gradle是什么时候&#xff1f; 相信大家也都是和我一样&#xff0c;在我们打开第一个AS项目的时候&#xff0c; 发现有很多带gradle字样的文件&#xff1a;setting.gradle, build.gradle,gradle.warpper,以及在gradle文件中各种配置&#xff…