大家好，欢迎来到IT知识分享网。
目录
- 导读
- 定向布局 DirectionLayout
- 依赖布局 DependentLayout
- 位置布局 PositionLayout
- 表格布局 TableLayout
- 自适应布局 AdaptiveBoxLayout
- 堆叠布局 StackLayout
- HarmonyOS相关阅读
导读
大家好，本系列文章小懒给大家介绍HarmonyOS的页面布局，0基础也可以学会，创作不易，希望大家持续关注评论转发。
页面布局，顾名思义就是APP界面每个组件的布局。
HarmonyOS页面布局可以用JavaScript来布局，可以用java代码来布局，也可以用xml来布局。
什么是xml?
xml一般指可扩展标记语言。可扩展标记语言，标准通用标记语言的子集，简称xml。是一种用于标记电子文件使其具有结构性的标记语言。
我这边推荐使用xml来布局，安装Node.js可以调用Previewer预览器。
- 安装Node.js，步骤如下：
- 请根据下载和安装Node.js指导，安装Node.js软件。
- 在DevEco Studio中关闭当前打开的工程，然后重启DevEco Studio。
- 重启DevEco Studio后，重新打开工程，然后点击Previewer使用预览器。
本系列文章分为3次详细讲解Java UI的6种布局。
定向布局 DirectionLayout
DirectionLayout是java UI中的常用布局。
排列方向（orientation）分为水平（horizontal）或者垂直（vertical）方向。
可以与其他布局组合成为更加复杂的组合布局。
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout //定向布局
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent" //表示组件大小将扩展为父组件允许的最大值，它将占据父组件方向上的剩余大小
ohos:height="match_content" //表示组件大小与它的内容占据的大小范围相适应
ohos:orientation="vertical"> //布局方向：垂直
……//组件代码写这边
</DirectionalLayout>
例子
下面实战演练下，譬如图片的布局应该如何写呢？
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout //定向布局
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent" //表示组件大小将扩展为父组件允许的最大值，它将占据父组件方向上的剩余大小
ohos:height="match_content" //表示组件大小与它的内容占据的大小范围相适应
ohos:orientation="vertical"> //布局方向：垂直
<Button //按钮
ohos:width="33vp" //组件宽度
ohos:height="20vp" //组件高度
ohos:bottom_margin="3vp" //组件上边距
ohos:left_margin="13vp" //组件左边距
ohos:background_element="#00FFFD" //背景（定义背景颜色以及形状等等）
ohos:text="Button 1"/> //组件文本
<Button //按钮
ohos:width="33vp" //组件宽度
ohos:height="20vp" //组件高度
ohos:bottom_margin="3vp" //组件上边距
ohos:left_margin="13vp" //组件左边距
ohos:background_element="#00FFFD" //背景（定义背景颜色以及形状等等）
ohos:text="Button 2"/> //组件文本
<Button //按钮
ohos:width="33vp" //组件宽度
ohos:height="20vp" //组件高度
ohos:bottom_margin="3vp" //组件上边距
ohos:left_margin="13vp" //组件左边距
ohos:background_element="#00FFFD" //背景（定义背景颜色以及形状等等）
ohos:text="Button 3"/> //组件文本
</DirectionalLayout>对齐方式
DirectionalLayout中的组件使用layout_alignment控制自身在布局中的对齐方式
layout_alignment参数
|
参数 |
作用 |
可搭配排列方式 |
|
left |
左对齐 |
垂直排列 |
|
top |
顶部对齐 |
水平排列 |
|
right |
右对齐 |
垂直排列 |
|
bottom |
底部对齐 |
水平排列 |
|
horizontal_center |
水平方向居中 |
垂直排列 |
|
vertical_center |
垂直方向居中 |
水平排列 |
|
center |
垂直与水平方向都居中 |
水平/垂直排列 |
例子
下面实战演练下，譬如图片的布局应该如何写呢？
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout //定向布局
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent" //表示组件大小将扩展为父组件允许的最大值，它将占据父组件方向上的剩余大小
ohos:height="60vp"> //布局高度
<Button
ohos:width="50vp" //组件宽度
ohos:height="20vp" //组件高度
ohos:background_element="#00FFFD" //背景（定义背景颜色以及形状等等）
ohos:layout_alignment="left" //组件左对齐
ohos:text="Button 1"/> //组件文本
<Button
ohos:width="50vp" //组件宽度
ohos:height="20vp" //组件高度
ohos:background_element="#00FFFD" //背景（定义背景颜色以及形状等等）
ohos:layout_alignment="horizontal_center" //组件水平方向居中
ohos:text="Button 2"/> //组件文本
<Button
ohos:width="50vp" //组件宽度
ohos:height="20vp" //组件高度
ohos:background_element="#00FFFD" //背景（定义背景颜色以及形状等等）
ohos:layout_alignment="right" //组件右对其
ohos:text="Button 3"/> //组件文本
</DirectionalLayout>权重
在实际开发中，很多时候需要组件按照比例来分配占用父组件的大小，这时候需要用到权重。
水平布局下计算公式：
父布局可分配宽度=父布局宽度-所有子组件width之和；
组件宽度=组件weight/所有组件weight之和*父布局可分配宽度；
实际使用过程中，建议使用width=0来按比例分配父布局的宽度。
例子
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout //定向布局
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent" //表示组件大小将扩展为父组件允许的最大值，它将占据父组件方向上的剩余大小
ohos:height="match_content" //表示组件大小与它的内容占据的大小范围相适应
ohos:orientation="horizontal"> //布局方向水平
<Button //按钮
ohos:width="0vp" //组件宽度
ohos:height="20vp" //组件高度
ohos:weight="1" //权重
ohos:background_element="#00FFFD" //背景（定义背景颜色以及形状等等）
ohos:text="Button 1"/> //组件文本
<Button
ohos:width="0vp" //组件宽度
ohos:height="20vp" //组件高度
ohos:weight="1" //权重
ohos:background_element="#878787" //背景（定义背景颜色以及形状等等）
ohos:text="Button 2"/> //组件文本
<Button
ohos:width="0vp" //组件宽度
ohos:height="20vp" //组件高度
ohos:weight="1" //权重
ohos:background_element="#00FFFD" //背景（定义背景颜色以及形状等等）
ohos:text="Button 3"/> //组件文本
</DirectionalLayout>依赖布局 DependentLayout
DependentLayout是Java UI系统里的一种常用布局。
简单的来说就是一个组件相对于父组件或者同级组件他的相对位置。
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout //依赖布局
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_content" //表示组件大小与它的内容占据的大小范围相适应
ohos:height="match_content" > //表示组件大小与它的内容占据的大小范围相适应
……//组件写这边
</DependentLayout>
例子
下面实战演练下，譬如图片的布局应该如何写呢？
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout //依赖布局
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_content" //表示组件大小与它的内容占据的大小范围相适应
ohos:height="match_content" //表示组件大小与它的内容占据的大小范围相适应
ohos:background_element="#EDEDED"> //背景（定义背景颜色以及形状等等）
<Text
ohos:id="$+id:text1" //自己设置的每个组件的独立ID
ohos:width="match_content" //表示组件大小与它的内容占据的大小范围相适应
ohos:height="match_content" //表示组件大小与它的内容占据的大小范围相适应
ohos:left_margin="15vp" //组件左边距
ohos:top_margin="15vp" //组件上边距
ohos:right_margin="40vp" //组件右边距
ohos:text="text1" //组件文本
ohos:text_size="20fp" //组件文本字体大小
ohos:background_element="#00FFFD"/> //背景（定义背景颜色以及形状等等）
<Text
ohos:id="$+id:text2"
ohos:width="match_content" //表示组件大小与它的内容占据的大小范围相适应
ohos:height="match_content" //表示组件大小与它的内容占据的大小范围相适应
ohos:left_margin="15vp" //组件左边距
ohos:top_margin="15vp" //组件上边距
ohos:right_margin="40vp" //组件右边距
ohos:bottom_margin="15vp" //组件下边距
ohos:text="below text1" //组件文本
ohos:text_size="20fp" //组件字体大小
ohos:background_element="#00FFFD" //背景（定义背景颜色以及形状等等）
ohos:below="$id:text1"/> //在id:text1的下面
</DependentLayout>|
位置布局 |
描述 |
|
above |
处于同级组件的上侧。 |
|
below |
处于同级组件的下侧。 |
|
start_of |
处于同级组件的起始侧。 |
|
end_of |
处于同级组件的结束侧。 |
|
left_of |
处于同级组件的左侧。 |
|
right_of |
处于同级组件的右侧。 |
HarmonyOS相关阅读
- HarmonyOS如何真机调试
- Harmony OS创新能力：虚拟超级终端
- Harmony OS 2.0 核心能力：分布式软总线
- 三种更新HarmonyOS的方法
- #数码新科技#
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/46356.html
