【QT】Hybrid UI Design

Although GUI can be developed using both Designer and code design methods, there is no doubt that the most effective development method is to use mixed development of the two.

The following experimental example comes from the "QT5.9 C++ Development Guide". I made some minor modifications, and the final effect is as follows:

Icon import

What we want to develop this time is a GUI consisting of toolbar, menu bar, title bar, etc., so there is no doubt that the base class we need to choose is Mainwindow.

Because we see that icons are involved in many places in the toolbar, our first step is to import the icons we want to use into QT. So we need to create a new Qt Resource File under the project first.

Then click Add->Add Prefix in the lower left corner, first add a storage folder and its name for our icon, here my prefix is ​​/img. Then you can press Add->Add files again.

Static component placement

After adding our files, we can use Designer to preliminary design our UI. We first lay out the static components, but here we need to introduce a new abstract class Action . We can initially understand it as a control. It is an event-triggered control mostly used on menu bars, toolbars and status bars, and is often used in the mainwindow base class. Because we may need to use some controls on the toolbar, we need to use Action.

If we want to create an Action class, we need to open the Action Editor bar under the Designer interface and click on the New Action control in the upper left corner of that bar.

 

The box of the new Action control has some options that we need to enter. The first is the text, which will display the text displayed by the Action control; the second is the object name, which represents the object name of the class; the third is the Tooltip, which represents the current The prompt text displayed after we move the mouse to the control; then the icon, which we can directly select from the image we imported before; and Checkable, which will indicate whether our newly created Action is a check button; The last step is to set the shortcut shortcut key.

Once we have these set up, we get the following columns:

Then we can right-click the middle design area to create a toolbar and taskbar, and then drag these Actions up:

 But sometimes the icons we drag up to the toolbar may not necessarily display icons and text at the same time. This is related to the setting style of the toolbar. We can modify it by adjusting the content in the following positions: select the toolbar, find the button style, and select the text The style displayed below the button (the more commonly used styles here are: ToolButtonIconOnly - only icons are displayed, ToolButtonTextOnly - only text is displayed, ToolButtonTextUnderIcon - text is below the picture, ToolButtonTextBesideIcon - the picture is next to the text\) Set and drag each Action to the menu You get the new GUI after adding bars and toolbars.

 

 Next, you need to set up a control to adjust the font size and font type. In fact, the control that stores numbers is spinbox, and the control that stores different fonts is fontcombox. However, when we drag these controls to the window toolbar, we will find that it refuses! This reflects the limitations of Designer design. Some controls cannot be placed in toolbars, menu bars, status bars, etc. Therefore, we need to manually add the following controls to the corresponding locations through code.

Next we want to add four controls, which are:

①The label located in the status bar

②The loading progress bar located in the status bar

③Number selector located in the toolbar

④Font selector located in the toolbar

⑤The separator located in the toolbar

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    //setCentralWidget();
    lab = new QLabel("当前文件：");
    lab->setMinimumWidth(150);
    ui->statusBar->addWidget(lab);

    pro = new QProgressBar();
    pro->setMinimum(5);
    pro->setMaximum(50);
    pro->setMinimumWidth(500);
    pro->setValue(9);
    ui->statusBar->addWidget(pro);
    ui->toolBar->addSeparator();
    spin = new QSpinBox();
    spin->setMaximum(50);
    spin->setMinimum(0);
    spin->setMinimumWidth(50);
    ui->toolBar->addWidget(new QLabel("字体大小："));
    ui->toolBar->addWidget(spin);

    ui->toolBar->addSeparator();
    fon = new QFontComboBox();
    fon->setMaximumWidth(100);
    ui->toolBar->addWidget(new QLabel("字体："));
    ui->toolBar->addWidget(fon);
    ui->toolBar->addSeparator();
}

MainWindow::~MainWindow()
{
    delete ui;
}

 The final result is:

Signal function and slot function settings

Previously, we have completed the design of static pages through Designer and code. The next step is to refer to how to implement its specific functions.

The first is to copy, paste, exit, clear, and other Action settings that have system default slot functions. Specifically, set the corresponding functions in the signal and slot module of Designer.

 

Then we can set the glyph first, specifically by selecting the position of the Action button that needs to be modified, right-clicking and going to the corresponding slot writing slot function. But it should be noted that the signal triggering method of Action is triggered instead of clicked, so we need to pay special attention when using the signal function.

void MainWindow::on_blod_triggered(bool checked)
{
    QFont font = ui->textEdit->font();
    font.setBold(checked);
    ui->textEdit->setFont(font);
}

void MainWindow::on_underline_triggered(bool checked)
{
    QFont font = ui->textEdit->font();
    font.setUnderline(checked);
    ui->textEdit->setFont(font);
}

void MainWindow::on_Italic_triggered(bool checked)
{
    QFont font = ui->textEdit->font();
    font.setItalic(checked);
    ui->textEdit->setFont(font);
}

Next, what we need to modify is the font and word size. We can write the corresponding slot functions in the same way as we wrote the glyphs before, but we must pay attention to the triggered signal function. For example, the signal function triggered by word count changes is valueChanged, and the font change is currentIndexChanged. Moreover, one of the transfer parameters triggered by their signal functions is the word size and the other is the selected font, so the corresponding slot function parameters also need to be modified to some extent.

void MainWindow::change_size(int size)
{
    QFont font = ui->textEdit->font();
    font.setPointSize(size);
    ui->textEdit->setFont(font);
    pro->setValue(size);
}

void MainWindow::change_family(QString family)
{
    ui->textEdit->setFontFamily(family);
}

------------------------------------------------
QObject::connect(spin,SIGNAL(valueChanged(int)),
this,SLOT(change_size(int)));
QObject::connect(fon,SIGNAL(currentIndexChanged(QString)),
this,SLOT(change_family(QString)));

The final effect is as follows: