ReactiveX 学习笔记（29）使用 RxCpp（RxQt）+ Qt 进行 GUI 编程
2024-09-07 13:07:24
课题
- 程序界面由3个文本编辑框和1个文本标签组成。
- 要求文本标签实时显示3个文本编辑框所输入的数字之和。
- 文本编辑框输入的不是合法数字时，将其值视为0。
- 3个文本编辑框的初值分别为1，2，3。
下载 RxCpp 和 RxQt
$ git clone --recursive https://github.com/ReactiveX/RxCpp.git
$ git clone --recursive https://github.com/tetsurom/rxqt.git
创建工程
启动 Qt Creator, File / New File or Project...
在向导的第1页选择 Application 分类下的 Qt Widgets Application
在向导的第2页输入工程名称 RxExample 以及工程所在位置
在向导的第3页选择 Desktop Qt
完成向导后点击 Done 创建工程。
配置工程
打开工程文件 RxExample.pro，做如下修改
- 使用 C++17，即改变 CONFIG 这一项，将 C++11 改为 C++17。
- 添加对 RxCpp 和 RxQt 所在路径的引用，即添加 INCLUDEPATH 这一项
CONFIG += c++17
INCLUDEPATH += <下载位置>/RxCpp/Rx/v2/src \
<下载位置>/rxqt/include
配置 UI
打开 mainwindow.ui，在设计器中做如下修改
- 添加 Form Layout。这一步是为了方便添加并定位其他控件。
- 在 Form Layout 内添加三个 LineEdit 控件，分别命名为 edtNumber1，edtNumber2，edtNumber3 （设置 objectName 属性）
然后将其水平对齐属性均改为右对齐（将 alignment/Horizontal 属性设置为 AlignRight ）
然后再将其初值分别设为1，2，3（设置 text 属性） - 在 Form Layout 内添加一个 Label 控件, 将其命名为 lblResult（设置 objectName 属性）
然后将其水平对齐属性改为右对齐（将 alignment/Horizontal 属性设置为 AlignRight ）
不使用 RxCpp（RxQt） 的解决方案
打开 mainwindow.ui，在设计器中给三个 LineEdit 控件分别添加 textChanged 事件
（右键点击控件，然后选择 Go to slot...，然后选择 QLineEdit/textChanged(QString)，最后按 OK ）
这一步的结果是在 MainWindow 类中生成（由 IDE 添加）了以下三个方法
// mainwindow.h
void on_edtNumber1_textChanged(const QString &arg1);
void on_edtNumber2_textChanged(const QString &arg1);
void on_edtNumber3_textChanged(const QString &arg1);
// mainwindow.cpp
void MainWindow::on_edtNumber1_textChanged(const QString &arg1)
{
}
void MainWindow::on_edtNumber2_textChanged(const QString &arg1)
{
}
void MainWindow::on_edtNumber3_textChanged(const QString &arg1)
{
}
打开 mainwindow.h 和 mainwindow.cpp 在 MainWindow 类中添加 add 方法，执行加法操作
// mainwindow.h
void add();
// mainwindow.cpp
void MainWindow::add()
{
int n = ui->edtNumber1->text().toInt() + ui->edtNumber2->text().toInt() + ui->edtNumber3->text().toInt();
ui->lblResult->setNum(n);
}
最后在窗口的构造器以及三个 LineEdit 控件的事件中添加对 add 方法的调用
// mainwindow.cpp
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
add();
}
void MainWindow::on_edtNumber1_textChanged(const QString &arg1)
{
add();
}
void MainWindow::on_edtNumber2_textChanged(const QString &arg1)
{
add();
}
void MainWindow::on_edtNumber3_textChanged(const QString &arg1)
{
add();
}
使用 RxCpp（RxQt） 的解决方案
打开 mainwindow.cpp，添加对 RxQt 的引用并在窗口的构造器中添加事件处理程序，即将文件改为
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <rxqt.hpp> // 添加这一行
// mainwindow.cpp
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 执行加法操作
auto f = [](const QLineEdit* edt) {
return rxqt::from_signal(edt, &QLineEdit::textChanged)
.start_with(edt->text());
};
f(ui->edtNumber1).combine_latest([](const QString& s1, const QString& s2, const QString& s3){
return s1.toInt() + s2.toInt() + s3.toInt();
}, f(ui->edtNumber2), f(ui->edtNumber3))
.subscribe([&](int n){ui->lblResult->setNum(n);});
}
MainWindow::~MainWindow()
{
delete ui;
}
最新文章
- selenium-webdriver(python) (十三) -- cookie处理
- Button、ImageButton及ImageView详解
- java判断字符串是否为数字或中文或字母
- 如何修改opencms数据库配置
- LINUX的一些常用操作
- A Tour of Go For
- vsftp的设置选项
- #python基础学习模块:marshal 对象的序列化
- struts2的对象工厂（ObjectFactory）
- sql两表联合查询
- LintCode-子数组之和
- css3中的布局相关样式
- IE浏览器下ajax和缓存的那些事儿
- nodejs编译遇到的问题
- ES - dynamic field mapping
- pHP生成唯一单号
- 工具Maven
- Python集合（set）类型的操作 (转)
- 【Java并发编程】15、ReentrantLock实现原理深入探究
- lamp/lnmp下添加PHP扩展