Qt：可视化UI设计

我就是我 2022-05-17 10:46 377阅读 0赞

# 1、创建项目&修改组件的对象名字和显示文本内容 #

创建一个 Widget Application 项目类 QDialog，在创建窗体时选择基类 QDialog，生成的类命名为 QWDialog，并选择生成窗体。

在界面设计时，对需要访问的组件修改其objectName，比如各个按钮，需要读取输入的编辑框，需要显示结果的标签等，以便在程序里区分。对于不需要程序访问的组件则无需修改其 objectName，如用于界面上组  
件分组的 GroupBox、Frame、布局等，让 UI 设计器自动命名即可。

*  objectName是窗体上创建的组件的实例名称，必须唯一，因为程序访问组件是通过objectName进行访问的。
 *  窗体的 objectName 就是窗体的类名称，在 UI 设计器里不要修改窗体的 objectName，窗体的实例名称需要在使用窗体的代码里去定义。

![70][]

![70 1][]

# 2、界面组件布局 #

## 2.1、界面组件的层次关系。 ##

使用容器类：如 QgoupBox、QtabWidget、QFrame 等。

例如，将 3 个 CheckBox 组件放置在一个 GroupBox 组件里，该 GroupBox组件就是这 3 个 CheckBox 的容器，移动这个 GroupBox 就会同时移动其中的 3 个 CheckBox：在窗体上放置了2个GroupBox组件，在groupBox1里放置 3 个 CheckBox 组件，在 groupBox2 里放置 3 个 RadioButton 组件

![70 2][]

## 2.2、布局管理 ##

2.2.1、组件面板中的Layouts和Spacers

![70 3][]

![70 4][]

![70 5][]

2.2.2、工具栏：调整设计器进入不同的状态，进行布局设计。

![70 6][]

![70 7][]

单击需要布局的组件，然后点击布局按钮

*  在窗体上选中组件时Ctrl可以实现组件多选
 *  选择容器内组件，相当于选择了其内部的所有组件

此时，选中两个groupBox，点击Lay Out Horizontally，实现水平布局

![70 8][]

# 3、信号与槽 #

槽就是一个函数：槽函数可以和一个信号关联，当信号被发射时，关联的槽函数被自动执行。

信号与槽关联是用 QObject::connect()函数实现的，其基本格式是：

QObject::connect(sender, SIGNAL(signal()), receiver, SLOT(slot()));

connect()是QObject类的一个静态函数，而QObject是所有Qt类的基类，在实际调用时可以忽略前面的限定符，所以可以直接写为：

connect(sender, SIGNAL(signal()), receiver, SLOT(slot()));

其中：

*  sender 是发射信号的对象的名称，
 *  signal()是信号名称。信号可以看做是特殊的函数，需要带括号，有参数时还需要指明参数。
 *  receiver 是接收信号的对象名称
 *  slot()是槽函数的名称，需要带括号，有参数时还需要指明参数。

SIGNAL和STOT是Qt的宏，用于指明信号与槽，并将他们的参数转换为相应的字符串。

（1）一个信号可以连接多个槽，例如：

connect(spinNum, SIGNAL(valueChanged(int)), this, SLOT(addFun(int)); 
    connect(spinNum, SIGNAL(valueChanged(int)), this, SLOT(updateStatus(int));

*  这是当一个对象 spinNum 的数值发生变化时，所在窗体有两个槽进行响应，一个 addFun()用于计算，一个 updateStatus()用于更新状态。
 *  当一个信号与多个槽函数关联时，槽函数按照建立连接时的顺序依次执行。
 *  当信号和槽函数带有参数时，在 connect()函数里，要写明参数的类型，但可以不写参数名称。

（2）多个信号可以连接同一个槽

例如在本项目的设计中，让三个选择颜色的 RadioButton的 clicked()信号关联到相同的一个自定义槽函数 setTextFontColor()。

connect(ui->rBtnBlue,SIGNAL(clicked()),this,SLOT(setTextFontColor())); 
    connect(ui->rBtnRed,SIGNAL(clicked()),this,SLOT(setTextFontColor())); 
    connect(ui->rBtnBlack,SIGNAL(clicked()),this,SLOT(setTextFontColor()));

这样，当任何一个 RadioButton 被单击时，都会执行 setTextFontColor()函数。

（3）一个信号可以连接另外一个信号

例如：

connect(spinNum, SIGNAL(valueChanged(int)), this, SIGNAL (refreshInfo(int));

这样，当一个信号发射时，也会发射另外一个信号，实现某些特殊的功能。

（4）严格的情况下，信号与槽的参数个数和类型需要一致，至少信号的参数不能少于槽的参数。如果不匹配，会出现编译错误或运行错误。  
（5）在使用信号与槽的类中，**必须在类的定义中加入宏 Q\_OBJECT**。  
（6）当一个信号被发射时，与其关联的槽函数通常被立即执行，就像正常调用一个函数一样。  
**只有当信号关联的所有槽函数执行完毕后，才会执行发射信号处后面的代码**。

# 4 可视化生成槽函数原型和框架 #

下面开始设计程序功能。对于该程序，希望它的功能如下。

*  单击 UnderLine、Italic、Bold 3 个 CheckBox 时，根据其状态，设置 PlainTextEdit 里的文字的字体样式；
 *  Black、Red、Blue 3 个 RadioButton 是互斥选择的，单击某个 RadioButton 时，设置文字的颜色；
 *  单击“确定”“取消”或“退出”按钮时，关闭窗口，退出程序。

## 4.1、字体样式设置 ##

选中chkBoxUnder 组件---->“Go to slot…”，出现下面的对话框：列出了QCheckBox类的所有信号，第一个是clicked()，第2个是带bool参数的clicked(bool)

*  信号clicked()：需要在代码中读取CheckBox组件的选中状态
 *  信号号 clicked(bool)：将CheckBox组件当前的选择状态作为一个参数传递，在响应代码中可以直接利用这个传递的参数

![70 9][]

选择 clicked(bool)，然后单击“OK”按钮，在 QWDialog 的类定义中，会在 private slots 部分自动增加一个槽函数声明，函数名是根据发射对象及其信号名称自动命名的。

void on_chkBoxUnder_clicked(bool checked);

同时，在 qwdialog.cpp 文件中自动添加了函数on\_chkBoxUnder\_clicked(bool)的框架。添加代码

void QWDialog::on_chkBoxUnder_clicked(bool checked)
    {
        QFont font = ui->txtEdit->font();
        font.setUnderline(checked);
        ui->txtEdit->setFont(font);
    }

以同样的方法为 Italic 和 Bold 两个 CheckBox 设计槽函数，编译后运行，发现已经实现了修改字体的下划线、斜体、粗体属性的功能，说明信号与槽函数已经关联了。

QWDialog 的构造函数执行ui->setupUi(this); ------->的 ui\_qwdialog.h 中setupUi有：

QMetaObject::connectSlotsByName(QWDialog);

connectSlotsByName<QWDialog>函数将搜索QWDialog界面上的所有组件，将信号与槽函数的信号和槽关联起来。它假设槽函数的名称是：void on\_<object name>\_<signal name>(<signal parameters>)

比如，通过UI设计器的操作，为chkBoxUnder自动生成的槽函数是：void QWDialog::on\_chkBoxUnder\_clicked(bool checked)。那么，connectSlotsByName()就会将此信号和槽函数关联起来，如同执行了下面的这样一条语句：  
connect(chkBoxUnder, SIGNAL(clicked (bool)), this, SLOT (on\_chkBoxUnder\_clicked (bool));

这就是用 UI 设计器可视化设计某个组件的信号响应槽函数，而不用手工去将其关联起来的原因，都是在界面类的构造函数里调用 setupUi()自动完成了关联。

![70 10][]

总结：

1、选中组件--->go to slot---->clicked(bool)----->添加代码

2、checkBox可以同时选中

## 4.2、字体颜色设置 ##

设置字体的 3 个 RadioButton 是互斥性选择的，即一次只有一个 RadioButton 被选中，虽然也可以采用可视化设计的方式设计其 clicked()信号的槽函数，但是这样就需要生成 3 个槽函数。这里可以简化设计，即设计一个槽函数，将 3 个 RadioButton 的 clicked()信号关联到这一个槽函数。为此，在 QWDialog 类的 private slots 部分增加一个槽函数定义如下：

void setTextFontColor();

提示 将鼠标光标移动到这个函数的函数名上面，单击右键，在弹出的快捷菜单中选择“Refactor”→“Add Definition in qwdialog.cpp”，就可以在 qwdialog.cpp 文件中自动为函数 setTextFontColor()生成一个函数框架。

void QWDialog::setTextFontColor()
    {
        QPalette Plet = ui->txtEdit->palette();
        if(ui->rBtnBlack->isChecked())
            Plet.setColor(QPalette::Text, Qt::black);
        else if(ui->rBtnBlue->isChecked())
            Plet.setColor(QPalette::Text, Qt::blue);
        else if(ui->rBtnRed->isChecked())
            Plet.setColor(QPalette::Text, Qt::red);
        ui->txtEdit->setPalette(Plet);
    }

由于这个槽函数是自定义的，所以不会自动与 RadioButton 的 clicked()事件关联，此时编译后运行程序不会实现改变字体颜色的功能。需要在 QWDialog 的构造函数中手工进行关联，代码如下

QWDialog::QWDialog(QWidget *parent) :
        QDialog(parent),
        ui(new Ui::QWDialog)
    {
        ui->setupUi(this);
        connect(ui->rBtnBlack, SIGNAL(clicked()), this, SLOT(setTextFontColor()));
        connect(ui->rBtnBlue, SIGNAL(clicked()), this, SLOT(setTextFontColor()));
        connect(ui->rBtnRed, SIGNAL(clicked()), this, SLOT(setTextFontColor()));
    }

总结：1、QWDialog 类的 private slots声明槽函数：void setTextFontColor();点击函数名Refactor生成在qwdialog.cpp生成函数框架，并补全函数。

2、在qwdialog.cpp的构造函数里面手动关联

3、RadioButton为单选框

## 4.3、按钮功能设置 ##

“确定”表示确认选择并关闭对话框，“取消”表示取消选择并关闭对话框，“退出”则直接关闭对话框。

QWDialog是从QDialog继承而来的，QDialog提供了accept()，erject()，close()等槽函数来表示这三种状态，只需要将按钮的clicked()信号与相应槽函数关联即可。

在 UI 设计器里，单击上方工具栏里的“Edit Signals/Slots”按钮\[快捷键为F4，取消为F3\]，窗体进入信号与槽函数编辑状态。

将鼠标移动到“确定”按钮上方，再按下鼠标左键，移动到窗体的空白区域释放左键，这时出现\[确定&窗口\]关联对话框

*  左侧的列表框里显示了 btnOK 的信号，选择 clicked()，右边的列表框里显示了QWDialog 的槽函数，选择 accept()，单击“OK”按钮
 *  btnCancel 的 clicked()信号与 QWDialog 的 reject()槽函数关联
 *  btnClose的 clicked()信号与 QWDialog 的 close()槽函数关联。
 *  右侧列表框中没有 close()槽函数，需要勾选下方的“Show signals and slots inherited from QWidget”才会出现 close()函数。

![70 11][]设置完 3 个按钮的信号与槽关联之后，在窗体下方的 Signals 和 Slots 编辑器里也显示了这 3个关联。实际上，可以直接在 Signals 和 Slots 编辑器进行关联设置。现在编译并运行程序，单击这 3 个按钮都会关闭程序。

![70 12][]

现在编译并运行程序，单击这 3 个按钮都会关闭程序。

那么，这 3 个按钮的信号与槽函数的关联是在哪里实现的呢？答案在 setupUi()函数里，在setupUi()函数里自动增加了以下 3 行代码：

QObject::connect(btnOK, SIGNAL(clicked()), QWDialog, SLOT(accept()));
    QObject::connect(btnCancel, SIGNAL(clicked()), QWDialog, SLOT(reject()));
    QObject::connect(btnClose, SIGNAL(clicked()), QWDialog, SLOT(close()));

[70]: /images/20220517/8fb2b596a220402d8376ab461f33f31a.png
[70 1]: /images/20220517/dab4f9bb58be43b1b56f34dc2ed3e579.png
[70 2]: /images/20220517/f49ea8279a334ec0895190efb8a02a9b.png
[70 3]: /images/20220517/6aa40ded62424038a69b601355924243.png
[70 4]: /images/20220517/707614e7a487495492e0e9d9291bf2d2.png
[70 5]: /images/20220517/a4898ae6d8d54d9b8ed966d08ba3ca32.png
[70 6]: /images/20220517/a29c38a4bcab4719b9423fdee79e693a.png
[70 7]: /images/20220517/15b70e813dd54a6a9e8d4d5b51e2641e.png
[70 8]: /images/20220517/4a83f4cf1b2840448306c703867abe0c.png
[70 9]: /images/20220517/af515000381947da82077ec39660d400.png
[70 10]: /images/20220517/fb7799d2a54142a69fb39e1c981e1a27.png
[70 11]: /images/20220517/d5927851f80542819eaf138c038abdec.png
[70 12]: /images/20220517/820e869c33cc4f608817a4129c7512a4.png