【鸿蒙HarmonyOS开发】pattern 的使用

鸿蒙开发 专栏收录该内容
17 篇文章 2 订阅

当开发应用的时候,我们会对一些布局的风格有统一的设计。例如多Text组件组成的表单界面,我们会将字体的大小、颜色等等外观设置一致,其中有大量的重复XML代码。而修改其中一个共同属性的时候(例如字体大小)又需要逐一的去修改每个Text组件。这个时候pattern就排上用场了,先看实例。

例如我们要完成下面的界面:

 下面的是在使用pattern之前的布局,其中大量的重复字段,维护起来也很复杂 

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:orientation="vertical"
    ohos:total_weight="8"
    ohos:width="match_parent">

    <Text
        ohos:background_element="$graphic:bg_example_pattern"
        ohos:height="0"
        ohos:margin="18vp"
        ohos:text="条目一"
        ohos:text_alignment="center"
        ohos:text_color="#FFFFFF"
        ohos:text_size="32fp"
        ohos:weight="1"
        ohos:width="match_parent"/>

    <Text
        ohos:background_element="$graphic:bg_example_pattern"
        ohos:height="0"
        ohos:margin="18vp"
        ohos:text="条目二"
        ohos:text_alignment="center"
        ohos:text_color="#FFFFFF"
        ohos:text_size="32fp"
        ohos:weight="1"
        ohos:width="match_parent"/>

    <Text
        ohos:background_element="$graphic:bg_example_pattern"
        ohos:height="0"
        ohos:margin="18vp"
        ohos:text="条目三"
        ohos:text_alignment="center"
        ohos:text_color="#FFFFFF"
        ohos:text_size="32fp"
        ohos:weight="1"
        ohos:width="match_parent"/>

    <Text
        ohos:background_element="$graphic:bg_example_pattern"
        ohos:height="0"
        ohos:margin="18vp"
        ohos:text="条目四"
        ohos:text_alignment="center"
        ohos:text_color="#FFFFFF"
        ohos:text_size="32fp"
        ohos:weight="1"
        ohos:width="match_parent"/>

    <Text
        ohos:background_element="$graphic:bg_example_pattern"
        ohos:height="0"
        ohos:margin="18vp"
        ohos:text="条目五"
        ohos:text_alignment="center"
        ohos:text_color="#FFFFFF"
        ohos:text_size="32fp"
        ohos:weight="1"
        ohos:width="match_parent"/>

</DirectionalLayout>

下面是使用pattern后的布局文件:

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:orientation="vertical"
    ohos:total_weight="8"
    ohos:width="match_parent">

    <Text
        ohos:height="0"
        ohos:text="条目一"
        ohos:text_alignment="center"
        ohos:theme="$pattern:pattern_example"
        ohos:width="match_parent"/>

    <Text
        ohos:height="0"
        ohos:text="条目二"
        ohos:text_alignment="center"
        ohos:theme="$pattern:pattern_example"
        ohos:width="match_parent"/>

    <Text
        ohos:height="0"
        ohos:text="条目三"
        ohos:text_alignment="center"
        ohos:theme="$pattern:pattern_example"
        ohos:width="match_parent"/>

    <Text
        ohos:height="0"
        ohos:text="条目四"
        ohos:text_alignment="center"
        ohos:theme="$pattern:pattern_example"
        ohos:width="match_parent"/>

    <Text
        ohos:height="0"
        ohos:text="条目五"
        ohos:text_alignment="center"
        ohos:theme="$pattern:pattern_example"
        ohos:width="match_parent"/>

</DirectionalLayout>

pattern.json 部分代码

{
  "pattern": [
    {
      "name": "pattern_example",
      "value": [
        {
          "name": "background_element",
          "value": "$graphic:bg_example_pattern"
        },
        {
          "name": "margin",
          "value": "18vp"
        },
        {
          "name": "text_color",
          "value": "#FFFFFF"
        },
        {
          "name": "text_size",
          "value": "32fp"
        },
        {
          "name": "weight",
          "value": "1"
        }
      ]
    }
  ]
}

 使用pattern后我们只需要在pattern中修改对应的属性就会全部应用到引用该配置的组件。对于后期的维护也大大的提升了效率,不再需要逐一修改(而且可能存在漏改的组件)。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

01.1 HarmonyOS示例应用介绍.mp4,网盘文件,永久连接 01.2 编写一个HarmonyOS应用.mp4 01.3 应用编译_安装_运行.mp4 01.4 HarmonyOS应用系列课第1期答疑环节.mp4 02.1 HUAWEI_DevEco_简介.mp4 02.2 HarmonyOS_应用开发平台介绍.mp4 02.3 HarmonyOS设备开发平台介绍.mp4 02.4 分布式应用开发实例演示.mp4 02.5 第2期答疑环节.mp4 03.1 致软件工程师的灵魂拷问.mp4 │ 03.2 重新定位_人_设备_场景的关系.mp4 │ 03.3 应用开发者面临的挑战.mp4 │ 03.4 DevEco_Studio提供分布式多设备调试能力.mp4 └ 03.5 第3期答疑环节.mp4 04.1 多设备场景下应用开发的挑战和解决策略.mp4 04.2 HarmonyOS应用程序框架的架构和组成.mp4 04.3 第1期答疑环节.mp4 05.1 分布式软总线架构.mp4 05.2 软总线之发现链接与组网.mp4 05.3 软总线之传输.mp4 05.4 答疑环节.mp4 06.1 分布式数据管理平台设计理念.mp4 06.2 分布式数据库.mp4 06.3 分布式文件系统.mp4 06.4 融合搜索.mp4 06.5 答疑环节.mp4 07.1 分布式调度的概述.mp4 07.2 分布式调度的原理.mp4 07.3 分布式调度的应用.mp4 08.1 单一设备往超级终端发展面临的挑战.mp4 08.2 硬件虚拟共享技术架构.mp4 08.3 硬件虚拟化关键技术.mp4 08.4 硬件虚拟化使用场景及集成案例.mp4 08.5 第八期答疑环节.mp4 09.1 HarmonyOS安全设计理念.mp4 09.2 如何利用harmonyOS安全能力保护你的数据.mp4 09.3 利用HarmonyOS安全使能生态伙伴.mp4 09.4 第九期答疑环节.mp4 10.1 从单设备体验到分布式超级终端的体验趋势.mp4 10.2 HarmonyOS_IOT设备体验模型.mp4 10.3 设计规范.mp4 10.4 第十期答疑环节.mp4 11.1 设计原则与架构导航.mp4 11.2 人机交互与Pattern.mp4 11.3 基础控件.mp4 11.4 视觉风格与样式.mp4 11.5 答疑环节.mp4 12.1 智慧屏设计原则.mp4 12.2 远场交互定义与遥控器.mp4 12.3 系统架构与应用架构.mp4 12.4 智慧屏内容风格呈现.mp4 12.5 如何使用组件构建用户界面.mp4 13.1 通用性设计概述.mp4 13.2 动态布局.mp4 13.3 交互事件归一.mp4 13.4 隐私保护.mp4 13.5 全球化.mp4 13.6 界面用语.mp4 14.1 分布式设计理念_体验架构.mp4 14.2 分布式连续性设计.mp4 14.3 分布式协同设计.mp4
©️2021 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值