界面窗口可视化设计实例（第二章）

可视化界面的效果图： 

 创建步骤：

1、创建项目和资源文件

注意：此处窗口基类选择QDialog

 2、创建资源文件

将所需要的图标文件复制到项目所在根目录中的image文件夹中；

具体步骤：

new file or project →Qt Resource file→设置资源文件名（res.qrc）；此时，在项目管理目录树中就会自动创建一个资源文件组（如下图）；

 资源文件的主要功能是存储图标和图片文件，以便在程序里面使用；

选中res.qrc→open in editor→add prefix→将前缀名（prefix）改为icons→add files→向项目所在根目录中添加资源文件→选中资源文件中图标文件并单击打开；此时资源文件就会被加载到项目中；如下图

 3、窗口界面设计

双击dailog.ui进入可视化窗口界面设计界面→完成所需要的任务布局，如下图所示：

对应的组件：

文本框：QPlainTextEdit组件，位于Input Widget分组中

为组件添加资源文件中的图标的办法：

选中待设置的组件→输入icon→在Theme右边的倒三角中选择choose resource,然后选择正确图标即可；

 

4、信号槽的相关设置

信号与槽的使用规则：

1. 一个信号可以连接多个槽函数
2. 多个信号可以连接一个槽函数
3. 一个信号可以连接另一个信号

为组件的信号生成槽函数原型和框架： 

为上述的对话框中的确定与选择功能添加信号与槽功能：

 5、清空功能的实现

选中【清空】→右击进入go to slot对话框→clicked()→ok

 此时，进入Dialog.cpp开始编辑相应代码：

void Dialog::on_pushButton_clear_clicked()
{
    ui->plainTextEdit->clear();
}

6 字体修改

6.1 字体修改功能的实现

选中【清空】→右击进入go to slot对话框→clicked(bool)→ok 

//设置下划线
void Dialog::on_checkBox_underline_clicked(bool checked)
{
    QFont font=ui->plainTextEdit->font();   //创建一个字体对象，让这个对象获取当前文本编辑框中字体的样式
    font.setUnderline(checked);
    ui->plainTextEdit->setFont(font);   //将字体设回到文本框中的字体格式中
}
//设置斜体
void Dialog::on_checkBox_italic_clicked(bool checked)
{
    QFont font=ui->plainTextEdit->font();
    font.setItalic(checked);
    ui->plainTextEdit->setFont(font);
}

//设置为加粗
void Dialog::on_checkBox_bold_clicked(bool checked)
{
    QFont font=ui->plainTextEdit->font();
    font.setBold(checked);
    ui->plainTextEdit->setFont(font);
}

6.2 字体颜色修改功能的实现

 设置文字颜色的三个单选按钮是互斥选择的，即一次只有一个单选按钮被选中，虽然也可以采用go to slot对话框为他们的clicked()信号生成槽函数，但是这样就需要生成三个槽函数，此时可以选择换一种方式，即设计一个自定义槽函数，将三个单选按钮的clicked()信号都与这个自定义槽函数关联； 

颜色是单选框，因此我们希望自己去写一个slot函数，让这三个signal都发送给同样一个slot;

//头文件中，修改颜色函数功能的定义
void do_fontcolor();
//源文件中，修改颜色函数功能的实现
void Dialog::do_fontcolor()
{
    QPalette plet=ui->plainTextEdit->palette();
    if(ui->radioButton_blue->isChecked())
    {
        plet.setColor(QPalette::Text,Qt::blue);
    }
    else if(ui->radioButton_red->isChecked())
    {
        plet.setColor(QPalette::Text,Qt::red);
    }
    else if(ui->radioButton_black->isChecked())
    {
        plet.setColor(QPalette::Text,Qt::black);
    }
    else
    {
         plet.setColor(QPalette::Text,Qt::black);
    }
    ui->plainTextEdit->setPalette(plet);
}

相应的控件初始化后，需要建立连接

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
    , ui(new Ui::Dialog)
{
    ui->setupUi(this);
    QObject::connect(ui->radioButton_black, SIGNAL(clicked()),this, SLOT(do_fontcolor()));
    QObject::connect(ui->radioButton_red, SIGNAL(clicked()),this, SLOT(do_fontcolor()));
    //使用函数指针
    QObject::connect(ui->radioButton_blue, &QRadioButton::clicked,this, &do_fontcolor);
}

8 运行效果：