【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 // ========================================= ...

随机推荐

Linux系统僵尸进程详解
大安好,我是良许. 本文我们将来讨论一下什么是僵尸进程,僵尸进程是怎么产生的,如何杀死一个僵尸进程. Linux中的进程是什么? 讲到进程,我们要先了解一下另一个概念:程序. 程序说白了就是躺在电脑硬 ...
Java学习（九）
今天先学习了内联框架的知识,使用iframe的标签,还有超链接的知识. 做了个小实践 <!DOCTYPE html> <head> <meta charset=" ...
环境（8）Linux用户组权限
一:Linux时间日期-时间同步策略 1.日期与时间 ①时间命令 data:查看当前系统时间 cal :查看日历 cal 2020 修改时间: date -s 11:11:11 ...
5、使用ZSetOperations（有序）操作redis（Zset有序集合）
文章来源:https://www.cnblogs.com/shiguotao-com/p/10564454.html 方法 c参数 s说明 void set(K key, V value); ke ...
【HTML】WebStorage
WebStorage 2019-11-13 10:46:18 by冲冲 1. 概况早期浏览器的本地存储使用cookie,当前推荐使用Web Storage. Web Storage的数据以&qu ...
新玩法-使用AllArgsConstructor+filal代替autowired
和下面的代码一样: Springboot官方建议使用final来修饰成员变量,然后通过构造方法来进行注入原因:final修饰的成员变量是不能够被修改的,反射那就没办法了还有一种写法: @Requir ...
BehaviorTree.CPP行为树BT的队列节点（三）
Sequences(队列) 只要序列的所有子代返回SUCCESS,它便会对其进行Tick. 如果有任何子级返回FAILURE,则序列中止. 当前,该框架提供三种节点: Sequence Sequenc ...
WC2021 云划水记
Day -38 - 2459208(2020.12.24) CCF 发公告了,线上举办 hopping. 刚看到还纠结了一会儿,但想想还是报了.虽说是去摸鱼,打打暴力分就走人.但毕竟有牌和没牌也是不一 ...
CF1290E Cartesian Tree
考虑笛卡尔树的意义: 一个点在笛卡尔树中的子树,代表以他为最小/最大值的区间. 所以一个点的子树大小,一定是类似到达序列边界或者被一个比他更大的数隔离. 考虑记录 \(l_i,r_i\) 为第 \(i ...
Codeforces 576D - Flights for Regular Customers（bitset 优化广义矩阵乘法）
题面传送门题意: 有一张 \(n\) 个点 \(m\) 条边的有向图,你初始在 \(1\) 号点,边上有边权 \(c_i\) 表示只有当你经过至少 \(c_i\) 条边的时候你才能经过第 \(i\) ...

【HarmonyOS】【xml】初学XML布局作业

页面案例1

页面案例2

页面案例3

【HarmonyOS】【xml】初学XML布局作业的更多相关文章

随机推荐

热门专题