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

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

2022-11-10 96
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【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
关键词：
HarmonyOS布局
XML布局
HarmonyOS xml
XML作业
harmonyos XML布局
萌狼蓝天
目录
相关文章
mao29955
|
1月前
|
XML 编解码 搜索推荐
XML 布局小技巧
【10月更文挑战第24天】通过掌握这些 XML 布局小技巧，我们可以更轻松地设计出高质量的用户界面，提升用户体验。在实际应用中，要根据具体项目的需求和特点，灵活运用这些技巧，不断探索和创新，打造出独具特色的界面布局。
mao29955
51 1
lqj_本人
|
29天前
|
开发者 UED 容器
鸿蒙next版开发：ArkTS组件通用属性（Flex布局）
在HarmonyOS next中，ArkTS的Flex布局是一种强大且灵活的布局方式，支持水平或垂直方向排列元素，并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap，适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
lqj_本人
65 10
保山hh
|
5月前
鸿蒙使用 @Builder扩展出来的布局数据更新没法更新UI
鸿蒙使用 @Builder扩展出来的布局数据更新没法更新UI
保山hh
176 1
lqj_本人
|
29天前
|
UED 开发者 容器
鸿蒙next版开发：ArkTS组件通用属性（布局约束）
在HarmonyOS next中，ArkTS提供了一系列通用属性来设置组件的布局约束，使开发者能够灵活控制组件的布局行为。本文详细解读了这些属性，包括`space`、`justifyContent`、`alignItems`、`layoutWeight`、`matchParent`和`wrapContent`，并通过示例代码展示了它们的使用方法。这些属性有助于实现响应式布局、动态界面调整和提升用户体验。
lqj_本人
61 5
lqj_本人
|
1月前
|
开发者 容器
Flutter&鸿蒙next 布局架构原理详解
本文详细介绍了 Flutter 中的主要布局方式，包括 Row、Column、Stack、Container、ListView 和 GridView 等布局组件的架构原理及使用场景。通过了解这些布局 Widget 的基本概念、关键属性和布局原理，开发者可以更高效地构建复杂的用户界面。此外，文章还提供了布局优化技巧，帮助提升应用性能。
lqj_本人
97 4
lqj_本人
|
1月前
|
容器
深入理解 Flutter 鸿蒙版的 Stack 布局：适配屏幕与层叠样式布局
Flutter 的 Stack 布局组件允许你将多个子组件层叠在一起，实现复杂的界面效果。本文介绍了 Stack 的基本用法、核心概念（如子组件层叠、Positioned 组件和对齐属性），以及如何使用 MediaQuery 和 LayoutBuilder 实现响应式设计。通过示例展示了照片展示与文字描述、动态调整层叠布局等高级用法，帮助你构建更加精美和实用的 Flutter 应用。
lqj_本人
125 2
游客zi3qmblbcdexu
|
2月前
|
容器
Flutter&鸿蒙next 布局架构原理详解
Flutter&鸿蒙next 布局架构原理详解
游客zi3qmblbcdexu
91 2
保山hh
|
5月前
鸿蒙使用 @Builder扩展出来的布局数据更新没法更新UI
采用的方法是在修改数据时，通过`this.dArray.splice(index, 1, this.dArray[index])`替换指定元素，强制数组更新并反映到界面上。
保山hh
225 0
人才程序员
|
7月前
|
容器 索引 缓存
【鸿蒙软件开发】ArkUI容器组件之Grid(网格布局)
【鸿蒙软件开发】ArkUI容器组件之Grid(网格布局)
人才程序员
974 0
【鸿蒙软件开发】ArkUI容器组件之Grid(网格布局)
人才程序员
|
7月前
|
容器 API UED
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
人才程序员
294 0
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)

热门文章

最新文章

  • 1
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（一） 嵌入式Linux开发基本概念以及开发流程介绍
  • 2
    鸿蒙应用开发项目新建过程与hap包生成方法
  • 3
    【鸿蒙软件开发】ArkUI容器组件之Grid(网格布局)
  • 4
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（四）传输文件
  • 5
    【鸿蒙软件开发】UIAbility组件概况、生命周期与启动模式
  • 6
    【鸿蒙软件开发】文本显示（Text/Span）
  • 7
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发流程（六）烧写整个系统或更新部分系统
  • 8
    scrcpy投屏工具的在harmonyOS开发上的使用
  • 9
    【HarmonyOS 4.0 应用开发实战】ArkTS 快速入门
  • 10
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（七）Ubuntu开发环境配置
  • 1
    Spring高手之路18——从XML配置角度理解Spring AOP
    93
  • 2
    XML DOM 解析器
    58
  • 3
    XML DOM - 属性和方法
    48
  • 4
    XML DOM 节点
    36
  • 5
    加载 XML 字符串
    34
  • 6
    XML DOM 解析器
    34
  • 7
    基于若依的ruoyi-nbcio流程管理系统里修正仿钉钉流程部门主管与多实例转xml的bug
    48
  • 8
    基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式（支持并行网关）
    359
  • 9
    基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式（排它条件网关）
    120
  • 10
    基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式（简单支持发起人与审批人的流程）
    424

    • 相关课程

    更多
  • XML入门

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月