前言

自从前端大火了以后，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 <QWidget>
#include <QSlider>
#include <QDebug>class HInt : public QObject
{Q_OBJECT
public:explicit HInt(int x = 0){number = x;}void operator=(const HInt &newValue ){ Q_EMIT(change(newValue.number)); number = newValue.number;}
signals:void change(int newValue);
public slots:void update(int newValue){ number = newValue; qDebug() << "HInt::update: " << newValue;}
private:int number;
};class HSlider : public QWidget
{Q_OBJECT
public:explicit HSlider(QWidget *parent = nullptr);void Buid(HInt *newValue);
signals:void change(int newValue);
public slots:void update(int newValue);
private:QSlider* mSlider;HInt *mValue;
};#endif // HSLIDER_H/*! hslider.cpp */
#include "hslider.h"HSlider::HSlider(QWidget *parent) : QWidget(parent)
{mSlider = new QSlider(this);connect(mSlider,&QSlider::valueChanged,this,&HSlider::change);
}void HSlider::Buid(HInt *newValue){if(newValue){if(!mValue){disconnect(mValue,&HInt::change,this,&HSlider::update);disconnect(this,&HSlider::change,mValue,&HInt::update);}mValue = newValue;connect(mValue,&HInt::change,this,&HSlider::update);connect(this,&HSlider::change,mValue,&HInt::update);}
}void HSlider::update(int newValue){mSlider->setValue(newValue);qDebug() << "HSlider::update" << newValue;
}

效果

一些想法

这是一个简陋的封装及演示，有时候应该参考 QSlider 的实现自定义控件。
HInt 用起来让人很不爽，可能得找找有没有别的什么办法能监控到变量的改变（并不想用事件轮询）。或许我应该好好了解下 数据劫持 和 脏值检查 看能不能找到一些实现思路。

参考鸣谢

Vue.js数据双向绑定实现

C++ 赋值运算符重载

Qt - UI数据双向绑定简易实现相关推荐

vue数据双向绑定的原理
vue数据双向绑定的原理一复习闭包 1 闭包含义: 当函数嵌套时,内部函数使用了外部函数的变量,就会产生闭包当函数可以记住并访问自己的作用域时,就会产生闭包 2 闭包注意点 ① 队列里的代码执行 ...
Vue源码学习（三）——数据双向绑定
在Vue中我们经常修改数据,然后视图就直接修改了,那么这些究竟是怎么实现的呢? 其实Vue使用了E5的语法Object.defineProperty来实现的数据驱动. 那么Object.defineP ...
Angular数据双向绑定
本文转载自: http://www.cnblogs.com/jingwhale/p/5117419.html 作者:jingwhale 转载请注明该声明. Angular数据双向绑定 AngularJ ...
vue的数据双向绑定原理
前言: 什么是数据双向绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化,数据也会跟着同步变化.这也算是vue的精髓之处了.单项数据绑定是使用状 ...
html 数据双向绑定,javascript实现数据双向绑定的三种方式小结
前端数据的双向绑定方法前端的视图层和数据层有时需要实现双向绑定(two-way-binding),例如mvvm框架,数据驱动视图,视图状态机等,研究了几个目前主流的数据双向绑定框架,总结了下.目前实 ...
EngJS(超轻量) 中数据双向绑定如何使用
Eng github 所有支持数据双向绑定的js工具 ,触发双向关系的基本方式无外乎 wather关系和事件关系两种 . 前者操作数据时 ,后者触发事件时. 下面简单的介绍Eng 中的 w ...
小猿圈解析vue数据双向绑定的缺点
vue是当今前端很流行的一种框架,但是vue也是有一定的缺陷的,你有过了解吗?下面小猿圈web前端老师就为你解析一下vue数据双向绑定的缺陷,希望对你有所帮助,下面我们一起了解一下吧. 1.vue 实 ...
vue中通过数据双向绑定给video标签的src赋值，只有第一次有效，怎么解决？
场景:在一个视频列表页面,点击视频列表,则全屏播放视频.全屏播放是一个公用组件,每次点击视频列表则把该视频的播放地址通过vue的数据双向绑定到组件中的video标签,如下: <video con ...
数据双向绑定_手把手教你用JavaScript如何实现数据双向绑定
近几年前端技术栈真是发展的太迅速了,从以前的针对dom操作的框架如jquery,ext.js等框架逐步过渡到当前的mvvm模式,让前端开发者将注意力从dom操作逐渐解脱出来,专注于逻辑的实现,个人认为 ...

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

文章目录

前言

原理

Qt 实现思路

源码

效果

一些想法

参考鸣谢

Qt - UI数据双向绑定简易实现相关推荐

最新文章

热门文章