IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 系统运维 -> harmonyOS之相对布局(DependentLayout)学习笔记(其一) -> 正文阅读

[系统运维]harmonyOS之相对布局(DependentLayout)学习笔记(其一)

DependentLayout文档:https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-layout-dependentlayout-0000001050729536

其中

属性名称:alignment

中文描述对齐方式

	
取值:left

	
取值说明:表示左对齐。
	
取值:top

取值说明:表示顶部对齐。

取值:right

取值说明:表示右对齐。

取值:bottom

取值说明:表示底部对齐。

取值:horizontal_center

取值说明:表示水平居中对齐。

取值:vertical_center

取值说明:表示垂直居中对齐。

取值:center

取值说明:表示居中对齐。

使用案例:可以设置取值项如表中所列,也可以使用“|”进行多项组合。
ohos:alignment="top|left"

ohos:alignment="left"

在教程中是

align_parent_left="$+id/name"
align_parent_left
将左边缘与父组件的左边缘对齐

是harmonyOS IDE应用开发以前的版本,现在技术文档也不是这么写的

中文描述:可以直接设置true/false,也可以引用boolean资源。
使用案例:ohos:align_parent_left="true"

一脸懵逼


用到了below

属性名称:below

中文描述:将上边缘与另一个子组件的下边缘对齐

取值:引用

取值说明:仅可引用DependentLayout中包含的其他组件的id

使用案例:ohos:below="$id:component_id"

还是靠不齐


直到above的出现

属性名称:above

中文描述:将下边缘与另一个子组件的上边缘对齐

取值:引用

取值说明:仅可引用DependentLayout中包含的其他组件的id

使用案例:ohos:above="$id:component_id"

成功与屏幕左对齐成功贴贴


代码如下:
按钮1左上对齐

<Button
        ohos:id="$+id:button1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:above="$+id:dependentLayout"
        ohos:text="按钮1"
        ohos:background_element="#00FFFF"
        ohos:text_alignment="center"
        ohos:text_size="100"
        />

按钮2右上对齐

<Button
        ohos:id="$+id:button2"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:align_parent_right="true"
        ohos:text="按钮2"
        ohos:background_element="#00FFFF"
        ohos:text_size="100"
        />

按钮3左下对齐

<Button
        ohos:id="$+id:button3"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text_alignment="center"
        ohos:text="按钮3"
        ohos:background_element="#00FFFF"
        ohos:text_size="100"
        ohos:align_parent_bottom="true"
        />

完整xml

<?xml version="1.0" encoding="utf-8"?>
<!--
    align_parent_bottom:对齐,专用于相对布局
    没有parent是相对于其他组件,有parent是相对于父组件的位置
-->
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:id="$+id:dependentLayout">

    <Button
        ohos:id="$+id:button1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:above="$+id:dependentLayout"
        ohos:text="按钮1"
        ohos:background_element="#00FFFF"
        ohos:text_alignment="center"
        ohos:text_size="100"
        />
    <Button
        ohos:id="$+id:button2"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:align_parent_right="true"
        ohos:text="按钮2"
        ohos:background_element="#00FFFF"
        ohos:text_size="100"
        />

    <Button
        ohos:id="$+id:button3"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text_alignment="center"
        ohos:text="按钮3"
        ohos:background_element="#00FFFF"
        ohos:text_size="100"
        ohos:align_parent_bottom="true"
        />
</DependentLayout>

效果为:
在这里插入图片描述

  系统运维 最新文章
配置小型公司网络WLAN基本业务(AC通过三层
如何在交付运维过程中建立风险底线意识,提
快速传输大文件,怎么通过网络传大文件给对
从游戏服务端角度分析移动同步(状态同步)
MySQL使用MyCat实现分库分表
如何用DWDM射频光纤技术实现200公里外的站点
国内顺畅下载k8s.gcr.io的镜像
自动化测试appium
ctfshow ssrf
Linux操作系统学习之实用指令(Centos7/8均
上一篇文章      下一篇文章      查看所有文章
加:2021-07-17 12:19:55  更:2021-07-17 12:22:23 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/25 16:27:47-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码