首先要明确，有两种布局方式

线性布局：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布局作业的更多相关文章

  1. Xml解析作业与Xml建模andXml建模作业

    作业:config.xml解析 1.获取所有action中的type的值 public static void main(String[] args) throws Exception { Input ...

  2. XML初学笔记

    一.基本概要: XML,全称是eXtensible Markup Language,可扩展的标记语言,是Web服务的基础之一,使用XML,用户可以定义自己需要的标记.而用户创建的标记可以使用文档类型定 ...

  3. xml初学简单介绍

    什么是XML? 1.全称Extensible Markup Language,可扩展标记语言,W3C组织公布. 2.XML用来保存有一定结构关系的数据. 3.标签的嵌套,实质是一串字符串. 4.跨平台 ...

  4. XML 参考：XML基础 XML 简介

    XML 参考:XML基础 -- XML简介和用途 转:http://www.cnblogs.com/Dlonghow/archive/2009/01/22/1379799.html XML 参考:XM ...

  5. hadoop三个配置文件的参数含义说明core-site.xml,hdfs-site.xml,mapred-site.xml

    配置hadoop,主要是配置core-site.xml,hdfs-site.xml,mapred-site.xml三个配置文件,默认下来,这些配置文件都是空的,所以很难知道这些配置文件有哪些配置可以生 ...

  6. js解析xml,获取XMl标签属性值

    <script type="text/javascript"> var xml="<?xml version=\"1.0\" enc ...

  7. XML Helper XML操作类

    写的一个XML操作类,包括读取/插入/修改/删除. using System;using System.Data;using System.Configuration;using System.Web ...

  8. Linq to XML 读取XML 备忘笔记

    本文转载:http://www.cnblogs.com/infozero/archive/2010/07/13/1776383.html Linq to XML 读取XML 备忘笔记 最近一个项目中有 ...

  9. Struts2中有关struts-default.xml,struts.xml,struts.properties文件详解

    1) struts-default.xml 这个文件是struts2框架默认加载的配置文件.它定义struts2一些核心的bean和拦截器. <?xml version="1.0&qu ...

  10. XML.ObjTree -- XML source code from/to JavaScript object like E4X

    转载于:http://www.kawa.net/works/js/xml/objtree-try-e.html // ========================================= ...

随机推荐

  1. C#生成新浪微博短网址 示例源码

    using System; using System.Collections.Generic; using System.Linq; using System.Text;     using DotN ...

  2. FZU ICPC 2020 寒假训练 3

    P1308 统计单词数 题目描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数.现在,请你编程实现这一功能,具体要求是:给定一 ...

  3. vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目（下）

    其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(下) 上篇 我们已经成功引入 element-ui.axios.mock.iconfont.nprogress,本篇继续 ...

  4. Spark 安装部署与快速上手

    Spark 介绍 核心概念 Spark 是 UC Berkeley AMP lab 开发的一个集群计算的框架,类似于 Hadoop,但有很多的区别. 最大的优化是让计算任务的中间结果可以存储在内存中, ...

  5. [bzoj1305]跳舞

    考虑如果没有k个人,那么就是裸的二分答案+最大流对于这k个人,再在原来的每一个点裂点,中间的流量为k,然后裂出来的点向所有不能匹配的点连边,再二分答案+最大流即可 1 #include<bits ...

  6. [luogu5616]恶魔之树

    记录$lcm$的质因子状态(包括大于$\sqrt 300$的质因子),设$f[s]$表示质因子状态为$s$的$lcm$之和,转移枚举当前的数$k$,转移到$lcm(s,k)$即可,时间复杂度为$o(n ...

  7. class动态样式绑定

    字符串,数组,对象

  8. namp相关命令大全

    常用功能: -探测主机存活- 扫描端口- 探测主机操作系统信息- 检测漏洞 nmap 常用的几个参数 nmap -v ip 显示详细的扫描过程 nmap -p  ip  扫描指定端口 nmap -A ...

  9. Codeforces 986C - AND Graph（dfs）

    Codeforces 题面传送门 & 洛谷题面传送门 考虑 DFS 一遍遍历每个连通块. 当我们遍历到一个点 \(x\) 时,我们就建立一个虚点 \((2^n-1-x)'\) 表示我们要访问 ...

  10. Linux生信服务器磁盘如何挂载使用？

    用过很多服务器,但一直没自己挂载过磁盘,因为待挂载的磁盘上都有数据,生怕一不小心把别人的弄坏了. 今天恰好有几块新的磁盘,供我尝试下. 首先查看下磁盘: $ df -h 文件系统 容量 已用 可用 已 ...