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

随机推荐

IDEA 设置Java项目使用的JDK版本最全篇
1. File -> Project Setting -> Project : 2. File ->Project Setting -> Modules 3. File -&g ...
Python知识整理（二）
6.高级特性--简化代码量 1.切片 L[0:3]表示,从索引0开始取,直到索引3为止,但不包括索引3.即索引0,1,2,正好是3个元素. 如果第一个索引是0,还可以省略:L[:3] Python支持 ...
SpringCloud升级之路2020.0.x版-34.验证重试配置正确性(3)
本系列代码地址:https://github.com/JoJoTec/spring-cloud-parent 我们继续上一节针对我们的重试进行测试验证针对可重试的方法响应超时异常重试正确我们可以通 ...
CSS学习笔记：flex布局
目录一.Flex布局简介 1. Flex布局的主要作用 2. Flex布局应用场景二.Flex布局的使用 1. Flex布局的两种相关元素 2. 父项属性 2.1 flex- direction ...
K8S使用NodePort类型Service
1.使用nodetype类型 1.1.第一种类型创建:直接在yaml中标记是nodePort apiVersion: v1 kind: Service metadata: name: nginx-se ...
Linux(kali)基础设置
本笔记的友情链接常用目录介绍 boot 存放启动文件 dev 存放设备文件 etc 存放配置文件 home 普通用户家目录,以/home/$username的方式存放 media 移动存储自动挂载目 ...
[bzoj2789]Letters
考虑A中第i次出现的j字符,最终位置一定是在B中第i次出现的j字符的位置,然后即求逆序对数量,cdq/线段树即可 1 #include<bits/stdc++.h> 2 using nam ...
[noi713]魔法
分治,维护一个dp数组,当递归到区间[l,r]时,需要保证这个dp数组维护的是除去[l,r]以外的dp数组维护其实很简单,就是递归左区间是先将右区间加入,然后再将左区间加入(要先复原)然后递归右区间即 ...
第02章_MySQL环境搭建
第02章_MySQL环境搭建 1. MySQL的卸载步骤1:停止MySQL服务在卸载之前,先停止MySQL8.0的服务.按键盘上的"Ctrl + Alt + Delete"组合 ...
electron另一种运行方式
编写helloword 全局安装软件 npm install -g electron 快速编写html html:5 完整代码和流程: 1.index.html <!DOCTYPE htm ...

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

页面案例1

页面案例2

页面案例3

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

随机推荐

热门专题