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

随机推荐

JS表格显示时间格式
 <script type='text/javascript'> $(function() { var grid_selector23 = &quo ...
Django笔记&教程 5-2 进阶查询——Queryset
Django 自学笔记兼学习教程第5章第2节--进阶查询--Queryset 点击查看教程总目录 Queryset相关内容其实蛮多的,本文只介绍一些常用的,详细的推荐查询官方文档:queryset-a ...
全面的Docker快速入门教程
前言: 都2021年了,你还在为了安装一个开发或者部署环境.软件而花费半天的时间吗?你还在解决开发环境能够正常访问,而发布测试环境无法正常访问的问题吗?你还在为持续集成和持续交付(CI / CD)工作 ...
微信小程序（四）开发框架
wxss: 一套样式语言,用于描述wxml 的组件样式基于css 的删除和修改尺寸单位:rpx 样式导入 @import 内联样式 style 选择器 .class .intro 选择所有拥有 c ...
04373 C++程序设计 2019版第一章习题五、程序设计题
题目: 1.编写一个程序,将从键盘输入的n个字符串保存在一个一维数组A中.在输入字符串之前,先输入n的值.要求,数组A需要动态申请空间,程序运行结束前再释放掉. #include <iostre ...
[loj502]ZQC的截图
给每一个人一个随机数$R_{i}$,将一个消息中所有人的的$R_{i}$在三进制下相加(多次出现需要多个$R_{i}$),最终之和若为0,即判定答案为-1,若为某个$R_{i}$或$R_{i}+R_{ ...
[atARC068F]Solitaire
对于最终的序列$a_{i}$,条件如下: 1.$a_{i}$是一个排列,且$a_{k}=1$ 2.不存在三元组$1\le x<y<z<k$,使得$a_{x}<a_{y}< ...
Python字符出现次数统计
1.读取文本文档红球.txt 2.运行代码 with open('红球.txt', "r", encoding="utf-8")as f: d = {} fo ...
SubsamplingScaleImageView 源码解析
一开始没打算分析 SubsamplingScaleImageView 这个开源的图片浏览器的,因为这个库在我们 App 中使用了,觉得自己对这个库还是比较熟悉的,结果某天再看看到源码介绍的时候,才发现 ...
Hi3516开发笔记（五）：通过HiTools使用网口将uboot、kernel、roofts和userdata按照分区表烧写镜像
前言前面生成了uboot,kernel,sample,userdata(我们实际修改了ip的),rootfs,现在需要烧写进入核心板. 使用网口烧写镜像(海思烧写必须占用调试串口) 步骤一: ...

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

页面案例1

页面案例2

页面案例3

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

随机推荐

热门专题