【HarmonyOS】【xml】初学XML布局作业
首先要明确，有两种布局方式
线性布局：
DirectionalLayout
依赖布局：
DependentLayout
好，接下来看一看下面的例子
页面案例1
代码如下：
<?xml version="1.0" encoding="utf-8"?>
<!--依赖布局-->
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#CCCCCC"
>
<!--添加ListContainer标识多行数据 -->
<ListContainer
ohos:id="$+id:list_container"
ohos:height="match_content"
ohos:width="match_parent"
ohos:above="$id:layout_bottom"
>
</ListContainer>
<!--按钮子布局-->
<DirectionalLayout
ohos:id="$+id:layout_bottom"
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:align_parent_bottom="true"
>
<!-- 编辑城市按钮-->
<Button
ohos:id="$+id:button_edit"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="编辑城市"
ohos:background_element="#1F69FF"
ohos:text_color="#FFFFFF"
ohos:text_size="24vp"
ohos:weight="1"
ohos:layout_alignment="bottom"
/>
<!-- 添加城市按钮-->
<Button
ohos:id="$+id:button_add"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="添加城市"
ohos:background_element="#FFFFFF"
ohos:text_color="#1F69FF"
ohos:text_size="24vp"
ohos:weight="1"
ohos:layout_alignment="bottom"
/>
</DirectionalLayout>
</DependentLayout>
<?xml version="1.0" encoding="utf-8"?>
<!--依赖布局-->
<DependentLayout //依赖布局
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#CCCCCC"
>
<!--添加ListContainer标识多行数据 -->
<ListContainer
ohos:id="$+id:list_container"
ohos:height="match_content"
ohos:width="match_parent"
ohos:above="$id:layout_bottom" //让此组件下边缘与另一个组件的上边缘对齐
>
</ListContainer>
<!--按钮子布局-->
<DirectionalLayout
ohos:id="$+id:layout_bottom"
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:align_parent_bottom="true" //将底边与父组件对齐
>
<!-- 编辑城市按钮-->
<Button
ohos:id="$+id:button_edit"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="编辑城市"
ohos:background_element="#1F69FF"
ohos:text_color="#FFFFFF"
ohos:text_size="24vp"
ohos:weight="1" //权重：1
ohos:layout_alignment="bottom" //对齐方式：底部对齐
/>
<!-- 添加城市按钮-->
<Button
ohos:id="$+id:button_add"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="添加城市"
ohos:background_element="#FFFFFF"
ohos:text_color="#1F69FF"
ohos:text_size="24vp"
ohos:weight="1" //权重：1
ohos:layout_alignment="bottom" //对齐方式：底部对齐
/>
</DirectionalLayout>
</DependentLayout>
页面案例2
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#F5FFC3"
ohos:orientation="vertical"
>
<!-- 线性布局 Picker-->
<DirectionalLayout
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:background_element="#FFAFF8CE"
ohos:above="$id:layout_bottom"
>
<Picker
ohos:id="$+id:picker_province"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:weight="1"
ohos:normal_text_size="28vp"
ohos:selected_text_size="48vp"
ohos:normal_text_color="#FF6D6D6D"
ohos:selected_text_color="#FF000000"
ohos:top_line_element="#000000"
ohos:bottom_line_element="#000000"
ohos:layout_alignment="horizontal_center"
/>
<Picker
ohos:id="$+id:picker_city"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:weight="1"
ohos:normal_text_size="28vp"
ohos:selected_text_size="48vp"
ohos:normal_text_color="#FF6D6D6D"
ohos:selected_text_color="#FF000000"
ohos:top_line_element="#000000"
ohos:bottom_line_element="#000000"
ohos:layout_alignment="horizontal_center"
/>
<Picker
ohos:id="$+id:picker_county"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:weight="1"
ohos:normal_text_size="28vp"
ohos:selected_text_size="48vp"
ohos:normal_text_color="#FF6D6D6D"
ohos:selected_text_color="#FF000000"
ohos:top_line_element="#000000"
ohos:bottom_line_element="#000000"
ohos:layout_alignment="horizontal_center"
/>
</DirectionalLayout>
<!-- 线性布局 按钮-->
<DirectionalLayout
ohos:id="$+id:layout_bottom"
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:align_parent_bottom="true"
>
<!-- 取消按钮-->
<Button
ohos:id="$+id:button_cancel"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="取消"
ohos:background_element="#FFFFFF"
ohos:text_color="#1F69FF"
ohos:text_size="18vp"
ohos:weight="1"
ohos:layout_alignment="bottom"
ohos:padding="5vp"
/>
<!-- 确定按钮-->
<Button
ohos:id="$+id:button_enter"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="确定"
ohos:background_element="#1F69FF"
ohos:text_color="#FFFFFF"
ohos:text_size="18vp"
ohos:weight="1"
ohos:layout_alignment="bottom"
ohos:padding="5vp"
/>
</DirectionalLayout>
</DependentLayout>
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout //依赖布局
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#F5FFC3"
ohos:orientation="vertical" //子布局上下排列
>
<!-- 线性布局 Picker-->
<DirectionalLayout
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="horizontal" //子布局左右排列
ohos:background_element="#FFAFF8CE"
ohos:above="$id:layout_bottom"
>
<Picker
ohos:id="$+id:picker_province"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:weight="1"
ohos:normal_text_size="28vp"
ohos:selected_text_size="48vp"
ohos:normal_text_color="#FF6D6D6D"
ohos:selected_text_color="#FF000000"
ohos:top_line_element="#000000" //顶部框线：颜色值
ohos:bottom_line_element="#000000" //底部框线：颜色值
ohos:layout_alignment="horizontal_center" //对齐方式：居中对齐
/>
<Picker
ohos:id="$+id:picker_city"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:weight="1"
ohos:normal_text_size="28vp"
ohos:selected_text_size="48vp"
ohos:normal_text_color="#FF6D6D6D"
ohos:selected_text_color="#FF000000"
ohos:top_line_element="#000000"
ohos:bottom_line_element="#000000"
ohos:layout_alignment="horizontal_center"
/>
<Picker
ohos:id="$+id:picker_county"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:weight="1"
ohos:normal_text_size="28vp"
ohos:selected_text_size="48vp"
ohos:normal_text_color="#FF6D6D6D"
ohos:selected_text_color="#FF000000"
ohos:top_line_element="#000000"
ohos:bottom_line_element="#000000"
ohos:layout_alignment="horizontal_center"
/>
</DirectionalLayout>
<!-- 线性布局 按钮-->
<DirectionalLayout
ohos:id="$+id:layout_bottom"
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:align_parent_bottom="true" //此组件底线与父组件底线对齐
>
<!-- 取消按钮-->
<Button
ohos:id="$+id:button_cancel"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="取消"
ohos:background_element="#FFFFFF"
ohos:text_color="#1F69FF"
ohos:text_size="18vp"
ohos:weight="1"
ohos:layout_alignment="bottom"
ohos:padding="5vp"
/>
<!-- 确定按钮-->
<Button
ohos:id="$+id:button_enter"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="确定"
ohos:background_element="#1F69FF"
ohos:text_color="#FFFFFF"
ohos:text_size="18vp"
ohos:weight="1"
ohos:layout_alignment="bottom"
ohos:padding="5vp"
/>
</DirectionalLayout>
</DependentLayout>
页面案例3
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="vertical">
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text_size="18vp"
ohos:top_margin="20vp"
ohos:text="地区"
/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text_size="18vp"
ohos:top_margin="20vp"
ohos:text="温度"
/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text_size="18vp"
ohos:top_margin="20vp"
ohos:text="天气"
/>
</DirectionalLayout>
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout //线性布局
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="vertical"> //上下布局
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text_size="18vp"
ohos:top_margin="20vp" //顶部边距
ohos:text="地区"
/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text_size="18vp"
ohos:top_margin="20vp"
ohos:text="温度"
/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text_size="18vp"
ohos:top_margin="20vp"
ohos:text="天气"
/>
</DirectionalLayout>
【HarmonyOS】【xml】初学XML布局作业的更多相关文章
- Xml解析作业与Xml建模andXml建模作业
作业:config.xml解析 1.获取所有action中的type的值 public static void main(String[] args) throws Exception { Input ...
- XML初学笔记
一.基本概要: XML,全称是eXtensible Markup Language,可扩展的标记语言,是Web服务的基础之一,使用XML,用户可以定义自己需要的标记.而用户创建的标记可以使用文档类型定 ...
- xml初学简单介绍
什么是XML? 1.全称Extensible Markup Language,可扩展标记语言,W3C组织公布. 2.XML用来保存有一定结构关系的数据. 3.标签的嵌套,实质是一串字符串. 4.跨平台 ...
- XML 参考：XML基础 XML 简介
XML 参考:XML基础 -- XML简介和用途 转:http://www.cnblogs.com/Dlonghow/archive/2009/01/22/1379799.html XML 参考:XM ...
- hadoop三个配置文件的参数含义说明core-site.xml,hdfs-site.xml,mapred-site.xml
配置hadoop,主要是配置core-site.xml,hdfs-site.xml,mapred-site.xml三个配置文件,默认下来,这些配置文件都是空的,所以很难知道这些配置文件有哪些配置可以生 ...
- js解析xml,获取XMl标签属性值
<script type="text/javascript"> var xml="<?xml version=\"1.0\" enc ...
- XML Helper XML操作类
写的一个XML操作类,包括读取/插入/修改/删除. using System;using System.Data;using System.Configuration;using System.Web ...
- Linq to XML 读取XML 备忘笔记
本文转载:http://www.cnblogs.com/infozero/archive/2010/07/13/1776383.html Linq to XML 读取XML 备忘笔记 最近一个项目中有 ...
- Struts2中有关struts-default.xml,struts.xml,struts.properties文件详解
1) struts-default.xml 这个文件是struts2框架默认加载的配置文件.它定义struts2一些核心的bean和拦截器. <?xml version="1.0&qu ...
- XML.ObjTree -- XML source code from/to JavaScript object like E4X
转载于:http://www.kawa.net/works/js/xml/objtree-try-e.html // ========================================= ...
随机推荐
- Python进阶（装饰器）
from datetime import datetime def log(func):#func表示装饰器作用于的函数 def wrapper(*args,**kw):#wrapper返回装饰器作用 ...
- 大爽Python入门教程 0-1 安装python
大爽Python入门公开课教案 点击查看教程总目录 一 如何找到下载地址并下载 下面展示找到下载地址的方法步骤 嫌步骤太慢可直接跳到第4步, 查看详细下载地址 使用搜索引擎搜索python 打开搜索结 ...
- Hadoop HA集群 与 开发环境部署
每一次 Hadoop 生态的更新都是如此令人激动 像是 hadoop3x 精简了内核,spark3 在调用 R 语言的 UDF 方面,速度提升了 40 倍 所以该文章肯定得配备上最新的生态 hadoo ...
- 题解 P6345 [CCO 2017]接雨滴
解题思路 NOIP在即,感觉即将退役,或许是最后一篇题解了... 求水的体积不是特别好求,我们考虑求出 水+柱子 的体积最后再减去柱子的体积. 发现对于最高的柱子在中间的情况其实可以把最高柱子一侧的柱 ...
- 消息抽象层设计和实现-OSS.DataFlow
前面已经介绍了消息生产消费中间类库(OSS.DataFlow)的简单使用,这篇主要介绍内部的设计实现.主要内容包含: 1. 消息生产消费的抽象设计. 2. 具体使用示例 一. 消息生产消费的抽象设计. ...
- 【JavaSE】finally块不被执行的情况总结
finally块不被执行的情况总结 2019-08-03 22:23:02 by冲冲 finally块的作用 通常用于处理善后工作.当try块里出现异常时,会立即跳出try块,到catch块匹配对 ...
- docker详细
镜像(image) 容器(container) 启动,删除,停止 仓库(repository) docker images
- 查询多个count展示结果
<select id="getCountByDISC" resultType="com.rm.algo.entity.AlgoResult"> SE ...
- 32、最长有效括号 | 算法（leetode，附思维导图 + 全部解法）300题
零 标题:算法(leetode,附思维导图 + 全部解法)300题之(32)最长有效括号 一 题目描述 二 解法总览(思维导图) 三 全部解法 1 方案1 1)代码: // 方案1 "滑动窗 ...
- Ubuntu怎么修改DNS
有时候会出现配置好网络之后,可以ping通网关却ping不通www.baidu.com orangepi@orangepi3:~$ ping 192.168.1.1 PING 192.168.1.1 ...