分享HarmonyOS数据绑定使用技巧-电子发烧友网

相信各位应用开发者在写应用的前端部分时，会遇到这样的场景：通过某一事件触发界面上某一内容改变。比如说手表上心率数据的变化，是心率变化的事件触发手表界面心率数据的改变。看似简单的场景，实际上用到了“数据绑定”这一技术。

“事件”首先改变的是js中的一段文字对象，因js中的文字对象和标记语言的text组件里的文字内容做了数据绑定，使得改变js文字对象的操作能够令text组件里的文字内容发生改变。

“数据绑定”是实现上述场景最基础的技术，本文会基于一系列实例详细介绍”HarmonyOS数据绑定“的使用方法和技巧。

数据绑定概念

数据绑定，指的是将界面元素（View）的数据和对象实例（Model）的数据进行绑定，使它们具有相关性。

根据界面元素更新是否会引起对象实例的更新，数据绑定可分为单向数据绑定和双向数据绑定。单向数据绑定指的是对象实例的数据更新会引起界面元素的更新，反之不行；双向数据绑定指的是对象实例的数据更新会引起界面元素的数据更新，界面元素的数据更新也会引起对象实例的数据更新。

根据对象实例数据类型的不同，数据绑定又可分为简单数据绑定和复杂数据绑定，简单数据绑定数据为基本类型，而复杂数据绑定数据为列表类型。

1）HarmonyOS中的数据绑定

HarmonyOS目前支持单向数据绑定，即通过对象实例的数据更新来改变界面元素的数据。下面是Mustache语法数据绑定的通用写法的代码例子：

Hello {{title}}

/* index.js */import device from '@system.device';export default { data: { title : 'world', width: 0, height: 0, },onInit(){ // 根据设备设置窗口的宽高 device.getInfo({ success: (data)=> { this.width =data.windowWidth; this.height =data.windowHeight; } }); }}/* index.css */.container { flex-direction:column; justify-content:flex-start; align-items:flex-start;}

本文的代码例子都会包含三个文件——元素构建.hml、交互设计.js以及布局定义.css，只有.hml中可以写数据绑定语法，请各位在阅读时注意区分。下面来介绍HarmonyOS简单数据绑定和复杂数据绑定。

HarmonyOS简单数据绑定

HarmonyOS的简单数据绑定支持“属性绑定”、“样式绑定”、“动画绑定”和“内容绑定”。样式绑定和动画绑定实际上是通过属性标签发挥作用的，下面我们详细看一下具体使用过程。

1）属性绑定

属性可分为“通用属性”和“特有属性”，其中通用属性包括id、style、for、if、show和class，特有属性为各组件独有的属性如switch的checked。下面我们先看通用属性show绑定switch显示数据的代码：

点击蓝色按钮，代表触发改变switch 中show属性的“事件”，show属性的值从“false”改变为“true”，switch组件（白色开关按钮）会在界面上显示出来。如图1所示：

图1 通用属性show改变导致switch显示改变

/*index.js*/import device from '@system.device';export default{ data:{ showValue:false, width:0, height:0,}, // showChange触发会使showValue值改变 showChange(){ this.showValue =true; }, onInit(){ device.getInfo({ success:(data)=>{ this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width:40px; height:40px;}.switch{ width:90px; height:90px;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}

特有属性是各个组件独有的属性，如switch中的checked。下面是switch中checked属性数据绑定的用法：

点击蓝色按钮，代表触发改变switch 中checked属性的“事件”，checked属性的值从“false”改变为“true”，switch组件（白色开关按钮）的状态从“关”变成“开”。如图2所示：

图2 特有属性checked改变导致switch状态改变

/* index.js */importdevicefrom'@system.device';export default { data: { checkedValue: false, width: 0, height: 0, },//checkedChange触发会使checkedValue值改变 checkedChange() { this.checkedValue = true; }, onInit() { device.getInfo({ success: (data) => { this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width: 40px; height: 40px;}.switch { width: 40px; height: 40px;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}

2）样式绑定

样式有静态和动态之分，静态样式直接写在元素标签的关键字style中；动态样式写在.css文件中，通过关键字class引入。当前动态样式不支持数据绑定，数据绑定只能用在静态样式中，下面是switch静态样式宽高的数据绑定用法：

点击蓝色按钮，代表触发改变switch 中静态样式宽高改变的“事件”，静态样式宽高的值从“40px”改变为“90px”，switch组件（白色开关按钮）的宽高变大。如图3所示：

图3 通用样式宽高改变导致switch组件大小改变

/* index.js */importdevicefrom'@system.device';export default { data: { rectValue: '40px', width: 0, height: 0, },//rectChange触发会使rectValue值改变 rectChange() { this.rectValue = '90px'; }, onInit() { device.getInfo({ success: (data) => { this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width: 40px; height: 40px;}.switch { width: 40px; height: 40px;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}

3）动画绑定

动画效果可以通过静态样式中的关键字animation-name改变。我们可以在.css文件中创建多种keyframes的动画效果，通过animation-name改变keyframes，以实现动画效果的切换，下面是一个例子：

点击蓝色按钮，这是代表触发改变div 中动画效果的"事件"，animation-name的值从“animationChange1”改变为“animationChange2”，div组件动效从颜色变化动效变成宽度变化动效。如图4所示：

图4 animation-name改变导致动画样式改变

/*index.js*/import device from '@system.device';export default { data: { animationName: 'animationChange1', width: 0, height: 0, }, //animationChange触发会使animationName值改变 animationChange() { this.animationName ="animationChange2"; }, onInit() { device.getInfo({ success: (data) => { this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width: 40px; height: 40px;}.div-block { width: 200px; height: 80px; background-color: #ff0000;}.div-animation-style{ animation-duration: 3000ms; animation-timing-function: linear; animation-fill-mode: none; animation-iteration-count: 1;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}/* 初始动画效果改变背景颜色 */@keyframes animationChange1 { from { background-color: #ff0000; } to { background-color: #0000ff; }}/* 切换后动画效果改变为方块宽度变化 */@keyframes animationChange2 { from { width: 200px; } to { width: 250px; }}

4）内容绑定

除了属性、样式和动画绑定，HarmonyOS一些特殊组件如text，其标签内容中可以添加数据绑定，具体使用方法如下：

点击蓝色按钮，代表触发改变text 中文字内容的“事件”，text组件中文字内容从“Hello World”改变为“Hello Bob”，界面显示的文字相应改变。如图5所示：

图5 文字数据改变导致text中的文字内容改变

Hello {{ title }}

/*index.js*/import device from '@system.device';export default { data: { title: 'World', width: 0, height: 0, },//titleChange触发会使text中的title值改变 titleChange() { this.title = 'Bob'; }, onInit() { device.getInfo({ success: (data) => { this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width: 40px; height: 40px;}.title { width: 100px; height: 100px; font-size: 20px; text-align: center;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}

简单数据绑定中，通用属性基本都支持数据绑定，如style、if和show中绑定的对象数据改变都会使相应的View改变并刷新，只有class不支持数据绑定。同时，id虽然支持数据绑定，但其绑定的对象数据改变实际上只修改了DOM，不会对View有影响。

HarmonyOS复杂数据绑定

当数据绑定的对象为列表（数组）时，与for搭配使用，可以实现通过for展开多个组件（即列表渲染），减少.hml重复写组件。复杂数据绑定和列表渲染是强相关的，我们可以先了解一下HarmonyOS应用开发中如何用for属性做列表渲染。

1）列表渲染

参考HarmonyOS官网的开发文档：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/lite-wearable-syntax-hml-0000001078368468

我们可以看到列表渲染主要有三种方式：

for="array"：其中array为数组对象，array的元素变量默认为$item。

for="v in array"：其中v为自定义的元素变量，元素索引默认为$idx。

for="(i, v) in array"：其中元素索引为i，元素变量为v，遍历数组对象array。

这三种方式的实现代码为：

{{$idx}}.{{$item.name}}

{{$idx}}.{{value.name}}

{{index}}.{{value.name}}

//index.jsexport default { data: { array: { {id: 1, name: 'jack', age: 18}, {id: 2, name: 'tony', age: 18} } }}

2）通用属性的复杂数据绑定

下面以静态style属性为例，将style和数组进行数据绑定，可以通过改变数组的数据让组件样式改变，具体使用方法如下：

点击蓝色按钮，代表触发改变与数组绑定的某switch组件宽高的“事件”，第二个switch静态样式宽高的值从“40px”改变为“90px”，switch组件（白色开关按钮）的宽高变大。如图6所示：

图6 绑定静态样式的数组改变导致switch宽高改变

/*index.js*/import device from '@system.device';export default { data: {//定义两个宽高相等的switch rectArr: [ {"width": "40px","height": "40px"}, {"width": "40px","height": "40px"} ], width: 0, height: 0, },//改变第二个switch大小 switchChange() { this.rectArr[1].width = "90px"; this.rectArr[1].height = "90px"; }, // 推荐使用splice方法改变switch大小 // switchChange() { // this.rectArr.splice(1, 1, {"width": "90px", "height": "90px"}); //} onInit() { device.getInfo({ success: (data) => { this.width = data.windowWidth; this.height = data.windowHeight; } }); }}/* index.css */.input1 { width: 40px; height: 40px;}.container { flex-direction: column; justify-content: flex-start; align-items: flex-start;}

然而，有一些属性不支持复杂数据绑定，例如， if属性和swiper组件的loop属性等。他们的对象数据改变，都无法改变相应的view层显示效果，具体组件的数据绑定支持情况可以查阅官方开发文档。

总结

HarmonyOS简单数据绑定，可以支持“属性绑定”、“样式绑定”、“动画绑定”和“内容绑定”。HarmonyOS复杂数据绑定支持情况和简单数据绑定支持情况相同。对于诸多组件中存在的特有属性的复杂数据绑定支持情况，欢迎各位开发者参与验证。最后概括HarmonyOS数据绑定的使用技巧：

1. HamonyOS仅支持单向的数据绑定，语法为Mustache；

2. 在简单数据绑定场景下，style、if和show及特有的属性都会刷新View的显示；

3. 在简单数据绑定场景下，静态样式中的animation-name更改会刷新View的动画效果；

4. 在简单数据绑定场景下，text等组件的内容绑定更改会刷新View的显示；

5. 在复杂数据绑定场景下，数据绑定的支持情况和简单数据绑定相同，推荐使用splice方法对数据内容进行增删；

以下思维导图概括了该版本下HarmonyOS数据绑定的支持情况。

图7 HarmonyOS数据绑定全貌图

编辑：jq

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。举报投诉

数据

数据

+关注

关注
8

文章
7002

浏览量
88938
代码

代码

+关注

关注
30

文章
4779

浏览量
68519
HarmonyOS

HarmonyOS

+关注

关注
79

文章
1973

浏览量
30139

原文标题：HarmonyOS数据绑定使用技巧

文章出处：【微信号：HarmonyOS_Dev，微信公众号：HarmonyOS开发者】欢迎添加关注！文章转载请注明出处。

fpga 管脚不让绑定的问题，绑定时提示： Not assignable

fpga 管脚不让绑定的--提示如下图：网上说将复用管脚设置成普通I/O,我这也没找到我要绑定的管脚，怎么设置。该管脚是和NOR_Flash相关的，无法绑定，我想实现掉电存储一些数据

发表于 12-05 15:30

怎么绑定IP地址和MAC地址

本篇文章主要说一说怎么在本地计算机上绑定IP和MAC地址以及通过路由器绑定IP和MAC地址，并且这两者绑定可以解决什么问题。先来说说怎么去绑定本地计算上

发表于 12-01 22:48 •209次阅读

机智云智家APP的设备扫描与绑定限制

在使用机智云的智家APP时，用户可能会遇到无法扫描和绑定设备的问题。这一现象的根本原因在于智家APP的使用限制和付费策略。Q智家APP的功能概述是什么？智家APP是机智云平台为用户提供的公

发表于 09-22 08:02 •236次阅读

HarmonyOS NEXT Developer Beta1最新术语表

的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染等高级能力。 Hop，流转在HarmonyOS中泛指涉及多端的分布式操作。流转能力打破设备界限，多设备联动，使用户应用程序可分可

发表于 06-27 16:16

鸿蒙开发Ability Kit程序框架服务：Stage模型绑定FA模型ServiceAbility

本小节介绍Stage模型的两种应用组件如何绑定FA模型ServiceAbility组件。

发表于 06-25 21:47 •299次阅读

鸿蒙ArkTS声明式开发：跨平台支持列表【绑定手势方法】手势处理

为组件绑定不同类型的手势事件，并设置事件的响应方法。

发表于 06-15 09:17 •776次阅读

BLE蓝牙掉电绑定信息消失的原因？怎么解决？

测试手机连接后，重启ESP32S3，板子上的绑定信息就丢失了。还有我添加到白名单的地址也会随着重启消失。白名单我可以通过NVS记录，但是绑定的密钥信息我无法存储。我查阅了BLE的接口文档，没有看到保存绑定信息的接口。请教一下我应

发表于 06-14 06:25

鸿蒙开发接口Ability框架：【@ohos.application.formBindingData (卡片数据绑定类)】

卡片数据绑定模块提供卡片数据绑定的能力。包括FormBindingData对象的创建、相关信息的描述。

发表于 05-06 17:25 •485次阅读

udp_bind这个绑定的端口怎么解除？

请教下，udp_bind 这个绑定的端口，刚开始是可以的，但是重新绑定时返回错误，有什么方法可以在重新绑定前解除之前的绑定？

发表于 04-22 07:41

HarmonyOS开发案例：【首选项】

基于HarmonyOS的首选项能力实现的一个简单示例。

发表于 04-19 16:20 •1239次阅读

2024款鸿蒙OS 最新HarmonyOS Next_HarmonyOS4.0系列教程分享

鸿蒙的出现，标志着中国科技的崛起。HarmonyOS就是我们说的华为鸿蒙系统，截止到2023年8月4日已有超过7亿台设备搭载了鸿蒙OS系统。据多家媒体报道，2024年国内有21所985大学都开设

发表于 02-28 10:29

HarmonyOS开发技术全面分析

数据管理基于分布式软总线的能力，实现应用程序数据和用户数据的分布式管理。用户数据不再与单一物理设备绑定，业务逻辑与

发表于 02-21 16:31

请问tc233 Uart收发数据如何绑定到DMA？

请问tc233 Uart收发数据如何绑定到DMA？绑定到DMA之后中断触发还是原来的 IfxCpu_Irq_installInterruptHandler（）这个函数里绑定的中断服务函

发表于 01-22 06:27

服务器宝塔面板怎么绑定多个ip？

服务器宝塔面板怎么绑定多个ip？在宝塔面板中绑定多个IP地址可以通过以下步骤完成： 1、登录宝塔面板使用你的浏览器访问宝塔面板的网址，并使用管理员账号和密码登录。 2、进入站点管理在宝塔面板左侧

发表于 01-12 17:29 •1705次阅读

harmonyos和安卓的区别

HarmonyOS是由华为开发的一款全场景分布式操作系统，而安卓（Android）则是由谷歌开发的移动操作系统。虽然两者都是操作系统，但它们在很多方面存在明显的区别。下面是关于HarmonyOS和安

发表于 01-10 17:55 •3504次阅读