AI 助理
备案控制台
开发者社区 大数据 文章 正文

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

2022-11-10 86
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【HarmonyOS】【xml】初学XML布局作业

页面案例1

q6.png

q5.png

代码如下：

<?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

q4.png

q3.png

<?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

q2.png

q1.png

<?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>
文章标签：
数据格式
XML
关键词：
XML布局
HarmonyOS布局
HarmonyOS xml
XML作业
harmonyos XML布局
萌狼蓝天
目录
相关文章
卡尔特斯
|
XML 前端开发 Android开发
Android XML 布局基础（四）内外边距（margin、padding）
Android XML 布局基础（四）内外边距（margin、padding）
卡尔特斯
251 0
保山hh
|
3月前
鸿蒙使用 @Builder扩展出来的布局数据更新没法更新UI
鸿蒙使用 @Builder扩展出来的布局数据更新没法更新UI
保山hh
96 1
保山hh
|
3月前
鸿蒙使用 @Builder扩展出来的布局数据更新没法更新UI
采用的方法是在修改数据时，通过`this.dArray.splice(index, 1, this.dArray[index])`替换指定元素，强制数组更新并反映到界面上。
保山hh
118 0
人才程序员
|
5月前
|
容器 索引 缓存
【鸿蒙软件开发】ArkUI容器组件之Grid(网格布局)
【鸿蒙软件开发】ArkUI容器组件之Grid(网格布局)
人才程序员
772 0
【鸿蒙软件开发】ArkUI容器组件之Grid(网格布局)
人才程序员
|
5月前
|
容器 API UED
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
人才程序员
243 0
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
爱吃土豆丝的打工人
|
XML Java Android开发
HarmonyOS学习路之开发篇—Java UI框架(六大布局开发)
Android的布局开发中存在五大布局，在鸿蒙布局开发中也存在与之相似的五种布局类型，唯一多余的一个类型叫做自适应盒子布局，布局可以在不同设备上有不同的展示方式。 熟悉Android开发的小伙伴可以参照Android的布局开发来学习。
爱吃土豆丝的打工人
281 0
HarmonyOS学习路之开发篇—Java UI框架(六大布局开发)
爱吃土豆丝的打工人
|
XML Java 数据格式
HarmonyOS学习路之开发篇—Java UI框架(自定义组件与布局 二)
自定义布局 当Java UI框架提供的布局无法满足需求时，可以创建自定义布局，根据需求自定义布局规则
爱吃土豆丝的打工人
144 0
爱吃土豆丝的打工人
|
XML 前端开发 Java
HarmonyOS学习路之开发篇—Java UI框架(自定义组件与布局 一)
HarmonyOS提供了一套复杂且强大的Java UI框架，其中Component提供内容显示，是界面中所有组件的基类。ComponentContainer作为容器容纳Component或ComponentContainer对象，并对它们进行布局。
爱吃土豆丝的打工人
186 0
爱吃土豆丝的打工人
|
XML Java 数据格式
HarmonyOS学习路之开发篇—— Java UI框架（组件与布局说明）
UI即使用在屏幕上显示的用户界面，该界面用来显示所有可能被用户查看和操作的内容。
爱吃土豆丝的打工人
114 0
卡尔特斯
|
XML Android开发 数据格式
Android XML 布局基础（八）帧布局 - GridLayout
Android XML 布局基础（八）帧布局 - GridLayout
卡尔特斯
120 0

热门文章

最新文章

  • 1
    【鸿蒙软件开发】自定义弹窗（CustomDialog）
  • 2
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（一） 嵌入式Linux开发基本概念以及开发流程介绍
  • 3
    【鸿蒙软件开发】文本输入（TextInput/TextArea）
  • 4
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（四）传输文件
  • 5
    鸿蒙应用开发项目新建过程与hap包生成方法
  • 6
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之FlowItem容器组件
  • 7
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之AlphabetIndexer组件
  • 8
    【HarmonyOS 4.0 应用开发实战】TypeScript入门之元组详讲
  • 9
    HarmonyOS学习路之开发篇—网络与连接（WLAN开发 一）
  • 10
    HarmonyOS学习路之开发篇—多媒体开发（图像开发 二）
  • 1
    深入学习 XML 解析器及 DOM 操作技术
    112
  • 2
    Python下的XML文件处理技巧与实践
    140
  • 3
    XML 简介及用法详解
    117
  • 4
    Mybatis中Mapper.xml 文件使用注释遇到的坑
    113
  • 5
    【Mybatis】XML映射文件
    70
  • 6
    Python读写XML文件：深入解析与技术实现
    191
  • 7
    Apache Flink自定义 logback xml配置
    325
  • 8
    Python生成XML文件
    92
  • 9
    C# .NET面试系列八：ADO.NET、XML、HTTP、AJAX、WebService
    270
  • 10
    SAP OData metadata.xml 里 EntityType，EntitySet 和 EntityContainer 三个概念之间的区别和联系
    53

    • 相关课程

    更多
  • XML入门

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    无影云桌面