Qt - UI数据双向绑定简易实现

乍暖还寒时候，与上班提醒互道早安。

前言

自从前端大火了以后，UI数据双向绑定的ui框架愈发流行。作为前菜鸡安卓开发，我也是最近才知道谷歌还有推 Jetpack Compose 作为UI框架；其最大的亮点就是 数据双向绑定 和 声明式UI。而作为现Qt开发，看到声明式UI的使用表示简直不要太爽啊！

实现声明式UI ≈ 实现一个 编译器，非我等俗人可简单实现。那就退而求其次，先用Qt实现 UI与·数据双向绑定。

原理

查找了一下，实现数据绑定的做法有大致如下几种：

• 发布者-订阅者模式
• 脏值检查
• 数据劫持

Qt 实现思路

首先明确我们需要实现什么：

实现一个UI组件，这个组件可实现数据双向绑定。我们更新绑定变量的时候，绑定这个变量的UI组件，数据也会同步更新。同理，我们直接修改UI组件的属性，例如滑动条的位置亦会同步修改变量值。

在 Qt - 一文理解信号槽机制（万字剖析整理） 中讲到 Qt的信号槽机制就有用到 发布-订阅模型。那么我们将通过信号槽实现。

随着而来的是，信号槽机制依赖于 QObject，元对象系统。而我们绑定的变量可能是 int、float之类。为了能使用信号槽的通讯机制，我们必须将基本数据类型再封装一次。然后在变量类改变时通知控件类，在控件类改变时通知变量类。

在Qt中，控件类的改变本身就有相应的 changed() 信号，所以我们只需要接起来即可。

接下来的问题是如何知晓变量类改变，答案是 重载赋值运算符。

源码

/*! hslider.h */
#ifndef HSLIDER_H
#define HSLIDER_H

#include 
#include 
#include 

class HInt : public QObject
{
   
    Q_OBJECT
p