• ReactiveX 学习笔记(29)使用 RxCpp(RxQt)+ Qt 进行 GUI 编程


    课题

    1. 程序界面由3个文本编辑框和1个文本标签组成。
    2. 要求文本标签实时显示3个文本编辑框所输入的数字之和。
    3. 文本编辑框输入的不是合法数字时,将其值视为0。
    4. 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,做如下修改

    1. 使用 C++17,即改变 CONFIG 这一项,将 C++11 改为 C++17。
    2. 添加对 RxCpp 和 RxQt 所在路径的引用,即添加 INCLUDEPATH 这一项
    CONFIG += c++17
    INCLUDEPATH += <下载位置>/RxCpp/Rx/v2/src 
        <下载位置>/rxqt/include
    

    配置 UI

    打开 mainwindow.ui,在设计器中做如下修改

    1. 添加 Form Layout。这一步是为了方便添加并定位其他控件。
    2. 在 Form Layout 内添加三个 LineEdit 控件,分别命名为 edtNumber1,edtNumber2,edtNumber3 (设置 objectName 属性)
      然后将其水平对齐属性均改为右对齐(将 alignment/Horizontal 属性设置为 AlignRight )
      然后再将其初值分别设为1,2,3(设置 text 属性)
    3. 在 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;
    }
    
  • 相关阅读:
    祝师傅新婚快乐 :)
    NetBeans IDE 6.8 里程碑 2 已经可用!
    GRETA库在VS 2005环境下的编译经验
    祝师傅新婚快乐 :)
    NetBeans 时事通讯(刊号 # 74 Sep 30, 2009)
    忆父亲
    NetBeans 时事通讯(刊号 # 74 Sep 30, 2009)
    Miss Nev great app
    订阅我不会怀孕
    数据结构排序: 两路归并排序算法 子逸 博客园
  • 原文地址:https://www.cnblogs.com/zwvista/p/11039365.html
Copyright © 2020-2023  润新知