Qt6 案例实战编程（一）UI可视化设计

1）首先思考我们要做的软件需要达成什么功能

        如图1.1所示，我们需要制作一个Dialog，它的目的是制作一个简单的文本文件编辑器，具体功能为：添加下划线、斜体、加粗、改变字体颜色、清空文本框中的内容。

图1.1  软件目标功能展示 

        这个软件的样子与功能应该是我们制作软件之前就已经在脑海中思考好的，下一步我们应该去界面文件ui中绘构出这幅“工程图”。

2）在界面文件中绘构ui界面

        我们在ui文件中构建出来的模板如图2.1所示，将字体的三个复选框Check Box（在Buttons组件中）选择水平布局，并且添加到一个Group Box中使其更加美观。同理，颜色模块（Radio Button在Buttons模块中）也是如此。

        然后添加文本输入组件Plain Text Edit（在Input Widgets模块中），最下面三个按钮使用Push Button添加的（也位于Buttons模块中）。为了美观，我们可以自由的使用水平对齐/垂直对齐，也可以在其中加入弹簧组件来将内容弹开一定的距离。

 图2.1 ui文件绘构可视化界面

        好啦，现在准备工作都已经做好啦，下面我们要进入编程代码部分了！！为了后面分得清每个组件代表什么意思，我们先来给它们做一个简单的重命名吧~

 

 图2.2 本示例中的重命名

3）编辑槽函数

        在Qt6中，编辑组件的槽函数有个简单快速的方法：鼠标右键点击你想要编辑的东西，选择转到槽，这样就会相应的在dialog.h头文件中自动生成以下代码：

private slots:

    void do_setFontColor(); //设置字体颜色

    void on_chkBoxUnder_clicked(bool checked);

    void on_chkBoxItalic_clicked(bool checked);

    void on_chkBoxBold_clicked(bool checked);

    void on_btnClear_clicked();

        这段代码的意思是我们定义了几个函数，这些函数都是属于dialog独有的（private）特定函数，相当于在头文件中做了一个声明。

        此外，我们会发现在dialog.cpp文件中也响应的生成了如下几行：

void Dialog::do_setFontColor()
{
   
}

void Dialog::on_chkBoxUnder_clicked(bool checked)
{
   
}

void Dialog::on_chkBoxItalic_clicked(bool checked)
{
    
}

void Dialog::on_chkBoxBold_clicked(bool checked)
{
   
}


void Dialog::on_btnClear_clicked()
{
    
}

        这几个是相当于在源代码中形成的cpp函数，程序希望我们在这里添加对这些函数的描述来实现具体的功能。下面让我们来看一下具体功能都是如何实现的吧！！！

3.1）选择颜色功能的实现

        在分析代码之前，我们在这里先认识一个新的函数吧，它叫做palette()，翻译过来也就是调色板啦，作用就是给文本改变颜色的。下面是chatgpt给出的一个详细解释：

palette() 是一个 QWidget 类的成员函数，用于获取或设置小部件的颜色调色板（QPalette）。

调色板（QPalette）是一组定义小部件颜色和样式的对象。它包含了各种角色（Role）的颜色，比如背景色、前景色、边框颜色等。调色板可以用于定制小部件的外观，使其与应用程序的整体风格相匹配。

使用 palette() 函数可以获取小部件的当前颜色调色板。您可以在获取调色板后，使用 setPalette() 函数设置新的调色板，并相应地改变小部件的外观。

         那么我们先通过如下语言来创建/获取一个调色板：

 QPalette   plet=ui->plainTextEdit->palette();

        这句话的意思是我们创建了一个Qpalette类的调色板名字为plet，然后让它获取ui下的plainTextEdit下的调色板。这样我们就成功打开文本框的调色板功能啦~让我们开始上色吧~

        上色只需要简单地调用QPalette下的setColor函数就好啦，注意我们输入的变量是我们要改变什么内容的颜色&&设置为什么颜色，可以参考如下语句：

 plet.setColor(QPalette::Text,Qt::blue);

        具体函数都已经认识了，那么让我们为它加入逻辑吧。我们的目的是哪个颜色的Radio Button被选择了，就把文本文字改成哪个颜色的。比如说，蓝色的Radio Button被选择了（转化为编程语言就是这个按钮 isChecked（）），那我们就相应的做setColor操作，plet.setColor()的意思是在plet下做这个setColor操作，“.”可以理解为执行函数操作。这样来所有逻辑都理顺了，最后给它ui输出设置一下就好啦。

void Dialog::do_setFontColor()
{//自定义槽函数，设置文字颜色
    QPalette   plet=ui->plainTextEdit->palette();
    if (ui->radioBlue->isChecked())
        plet.setColor(QPalette::Text,Qt::blue);
    else if (ui->radioRed->isChecked())
        plet.setColor(QPalette::Text,Qt::red);
    else if (ui->radioBlack->isChecked())
        plet.setColor(QPalette::Text,Qt::black);
    else
        plet.setColor(QPalette::Text,Qt::black);

    ui->plainTextEdit->setPalette(plet);
}

3.2）设置字体功能的实现

        当我们已经学会了选择颜色功能，设置字体功能就变得很简单了。这三个功能（下划线、斜体、加粗）如出一辙，我们选斜体功能简单介绍一下吧。

        首先第一步肯定还是要创建打开这样一个功能，操作为：

QFont  font=ui->plainTextEdit->font();

        打开之后当然要开始干你想干的操作啦，那就直接一点写吧：

font.setItalic(checked);

        最后，还是要给它做一个设置输出的：

 ui->plainTextEdit->setFont(font);

        那么把这三个功能给结合起来，就变成：

void Dialog::on_chkBoxUnder_clicked(bool checked)
{//Underline 复选框
    QFont   font=ui->plainTextEdit->font();
    font.setUnderline(checked);
    ui->plainTextEdit->setFont(font);
}

void Dialog::on_chkBoxItalic_clicked(bool checked)
{//Italic 复选框
    QFont  font=ui->plainTextEdit->font();
    font.setItalic(checked);
    ui->plainTextEdit->setFont(font);
}

void Dialog::on_chkBoxBold_clicked(bool checked)
{// Bold 复选框
    QFont   font=ui->plainTextEdit->font();
    font.setBold(checked);
    ui->plainTextEdit->setFont(font);
}

3.3）清除文本框文字的实现

        这个功能最简单，因为它不需要打开任何东西，只需要简单地对plainTextEdit中的文字做一个简单的clear（）操作就可以了。

void Dialog::on_btnClear_clicked()
{//"清空"按钮
    ui->plainTextEdit->clear();
}

4）连接信号与槽

        为什么我们在第三点编辑槽函数的时候没有提及“确定”和“退出”操作呢？因为它可以直接通过Qt6自带的信号与槽机制直接实现，如下图：

图4.1 确定退出按钮的信号和槽

        而另外几个函数则需要通过connect（）函数连接：

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
    , ui(new Ui::Dialog)
{
    ui->setupUi(this);

    connect(ui->radioBlack,SIGNAL(clicked()),this,SLOT(do_setFontColor()));
    connect(ui->radioRed,  SIGNAL(clicked()),this,SLOT(do_setFontColor()));
    connect(ui->radioBlue, SIGNAL(clicked()),this,SLOT(do_setFontColor()));
}

5）测试与实现

图5.1 测试与实现

        测试成功！！跑通咯！！！！！UI可视化设计完结撒花！！！

---