Use of designer and common controls

Use of designer and common controls

1. Designer

1. Use of the designer








2. Operate the ui file by code

#include "mainwindow.h"
#include "ui_mainwindow.h"
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->pushButton->setText("text");
    connect(ui->pushButton,&QPushButton,this,&MainWindow);
}

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

• You can understand all the functions in the designer as ui->setupUi(this);credit, so if you want to modify the UI interface in the code, it is best to follow this code.
• The way of operating the controls in the ui interface is the same as the code for operating the ordinary controls, except that a ui-> prefix is ​​added to represent the controls in the ui interface

Second, the commonly used controls in the designer

1.Layouts：代表界面布局

2. Spacers：代表间距等

3. Buttons：按钮类

4. Item Views：数据库相关

5. Item Witgets：文件目录树相关

6. Containers：容器

7. Input Widgets：输出控件

8. Display Widgets：显示控件

9. QLabel control
QLabel 是我们最常用的控件之一， 其功能很强大， 我们可以用来显示文本， 图片和动画等

• The display text (normal text, html) is set
  by the setText function of the QLabel class:

voidsetText(const QString &)

• Can display ordinary text strings

QLable *label = new QLable;
label->setText(“Hello, World!”);

• Can display strings in HTML format,
  such as displaying a link

QLabel * label = new QLabel(this);
label ->setText("Hello, World");
label ->setText("<h1><a href=\"https://www.baidu.com\">
百度一下</a></h1>");
label ->setOpenExternalLinks(true);

Which setOpenExternalLinks () function is used to set whether to automatically open after the user clicks the link
link , if the parameter is specified as true it will automatically open, if set to false, the link you want to open
only by capturing linkActivated () signal ,在 自 定 义 的 槽 函 数 中 使 用QDesktopServices::openUrl()打开链接， 该函数参数默认值为 false

QLabel * label = new QLabel(this);
label ->setText("Hello, World");
label ->setText("<h1><a href=\"https://www.baidu.com\">
百度一下</a></h1>");
// label->setOpenExternalLinks(true);
connect(label, &QLabel::linkActivated,
this, &MyWidget::slotOpenUrl);
//槽函数
void MyWidget::slotOpenUrl(const QString &link)
{
QDesktopServices::openUrl(QUrl(link));
}

• Display pictures
  You can use QLabel's member function setPixmap to set pictures

void setPixmap(const QPixmap &)

First define the QPixmap object

QPixmap pixmap;

Then load the picture

pixmap.load(":/Image/boat.jpg");

Finally, set the picture to QLabel

QLabel *label = new QLabel;
label.setPixmap(pixmap);

• Show animation

You can use QLabel's member function setMovie to load animations, you can play gif format files

void setMovie(QMovie * movie)

First define the QMovied object and initialize it:

QMovie *movie = new QMovie(":/Mario.gif");

Play the loaded animation:

movie->start();

Set the animation to QLabel:

QLabel *label = new QLabel；
label->setMovie(movie);

10.QLineEdit control

Single-line text edit box provided by Qt.

• Set / Get Content

To get the contents of the edit box, use text (). The function declaration is as follows:

QString text() const

Set edit box content

void setText(const QString &)

• Set display mode

Use QLineEdit 类的 setEchoMode () 函数of the text display mode , the function declaration:

void setEchoMode(EchoMode mode)

EchoMode is an enumerated type, which defines four display modes:

QLineEdit :: Normal mode display mode, according to the input content.
QLineEdit :: NoEcho does not display any content. In this mode, you cannot see the user's input
QLineEdit :: Password password mode. The entered characters will be converted into special characters according to the platform.
QLineEdit :: PasswordEchoOnEdit displays characters when editing otherwise displays characters as password

In addition, when we use QLineEdit to display text, we hope to leave a blank area on the left,
then, we can use the 使用 QLineEdit 给我们提供的 setTextMarginsfunction:

void setTextMargins(int left, int top, int right, int bottom)

Use this function to specify the number of pixels between the displayed text and the upper, lower, left, and right borders of the input box.

• Set input prompt

If we want to implement a function similar to Baidu's search box: enter one or a few characters, a
few strings that match the entered characters will be listed below. QLineEdit can use
such member functions to achieve such a function setComleter () function to achieve:

voidsetCompleter(QCompleter * c)

Create QCompleter object and initialize

QStringList tipList;
tipList<< “Hello” << “how are you” << “Haha” << “oh, hello”;

// 不区分大小写
completer->setCaseSensitivity(Qt::CaseInsensitive);
QCompleter *completer = new QCompleter(tipList, this);

The setCaseSensitivity () function of the QCompleter class can be used to set case sensitivity . Its parameter is an enumerated type:

Qt :: CaseInsensitive is not case sensitive
Qt :: CaseSensitive is case sensitive

如果不设置该属性， 默认匹配字符串时是区分大小写的。

In addition, we can also set a certain part of the string to match. This function can be implemented by the
setFilterMode function of the QCompleter class . The function declaration is as follows:

voidsetFilterMode(Qt::MatchFlags filterMode)

The parameters are macros defined by Qt, and there are multiple types. For details, please refer to the Qt help document. To implement
the functions mentioned above , the parameters can be used Qt::MatchContains:

completer->setFilterMode(Qt::MatchContains);

After the property setting is completed, set the QCompleter object to QLineEdit:

QLineEdit *edit = new QLineEdit(this);
edit->setCompleter(completer);

11. Layout Manager

In the final analysis, the so-called GUI interface is the superposition of a bunch of components. We create a window, put the button
on it, and put the icon on it, so that it becomes an interface. When placing, the position of the components is particularly important.

• We have to specify where to put the components so that the window can be rendered in the way we need. This involves the mechanism of component positioning.
• Qt provides two mechanisms for positioning components: 绝对定位和布局定位.
• Absolute positioning is one of the most primitive positioning methods: Give the coordinates and length and width values ​​of this component. In this way, Qt knows where to put the component and how to set the size of the component. However, a problem brought about by this is that if the user changes the window size, such as clicking the maximize button or dragging the window edge with the mouse, the absolutely positioned components will not respond. This is also natural, because you did not tell Qt whether the component should update itself and how to update it when the window changes . Or, there is an easier way:禁止用户改变窗口大小。 但这总不是长远之计。
• Layout positioning: You only need to put components into a certain layout, and the layout is managed by a special layout
  manager. When you need to adjust the size or position, Qt uses the corresponding layout manager to adjust. Layout positioning perfectly solves the defect of using absolute positioning

The following three of the layouts provided by Qt are our most commonly used:

QHBoxLayout: layout from left to right in horizontal direction;
QVBoxLayout: layout from top to bottom in vertical direction;
QGridLayout: layout in a grid, similar to HTML table;

1. Horizontal / Vertical / Grid Layout

Below we use an example to learn how to use the following horizontal layout manager:

int main(int argc, char *argv[])
{
	QApplication app(argc, argv);
	
	QWidget window;
	window.setWindowTitle("Enter your age");
	
	QSpinBox *spinBox = new QSpinBox(&window);
	QSlider *slider = new QSlider(Qt::Horizontal, &window);
	spinBox->setRange(0, 130);
	slider->setRange(0, 130);
	
	QObject::connect(slider, &QSlider::valueChanged,
					spinBox, &QSpinBox::setValue);
					
	void (QSpinBox:: *spinBoxSignal)(int) = &QSpinBox::valueChanged;
						QObject::connect(spinBox, spinBoxSignal,
						slider, &QSlider::setValue);
						
	spinBox->setValue(35);
	
	//给控件设置布局
	QHBoxLayout *layout = new QHBoxLayout;
	layout->addWidget(spinBox);
	layout->addWidget(slider);
	window.setLayout(layout);
	
	window.show();
	return app.exec();
}

We introduced two new components in this code: QSpinBox and QSlider. QSpinBox is an input box that can only input numbers, and has step buttons with up and down arrows. QSlider is a slider with a slider

In the above code, window.setLayout (layout); is to set the layout in the window. There is another way to set the layout in the window :

//给控件设置布局
QHBoxLayout *layout = new QHBoxLayout（window） ;
layout->addWidget(spinBox);
layout->addWidget(slider);

Specifying the parent window for the new object when creating the layout object is equivalent to setting the layout for the incoming window. In addition, layout and layout can be nested, use addLayout () method. QVBoxLayout is used in exactly the same way as QHBoxLayout

关于上述代码中信号和槽连接的解释：

When the content of the digital input box changes, a message will be sent out, and the slider will receive this signal
and make changes. If the signal slot connection of the two is written as follows:

QObject::connect(spinBox, &QSpinBox::valueChanged,
slider, &QSlider::setValue);
编译器却会报错
no matching function for call to 'QObject::connect(QSpinBox*&, 
<unresolved overloaded function type>, QSlider*&, void 
(QAbstractSlider::*)(int))'

What is going on? 从出错信息可以看出， 编译器认为 QSpinBox::valueChanged 是一个 overloaded 的函数. We look at the QSpinBox documentation and find that QSpinBox does have two signals:

void valueChanged(int)
void valueChanged(const QString &)

When we use & QSpinBox :: valueChanged to fetch the function pointer, the compiler does not know which function should take the function (remember that we introduced earlier, the signal is also a normal function.), So the error is reported. The solution is simple. Isn't the compiler not sure which function? Then we explicitly specify a function. The method is, we create a function pointer, this function pointer parameter is specified as int :

void (QSpinBox:: *spinBoxSignal)(int) = &QSpinBox::valueChanged;

Then we use this function pointer as a signal and connect it with the QSlider function:

QObject::connect(spinBox, spinBoxSignal,
slider, &QSlider::setValue);

This avoids compilation errors

2. Custom controls

When building a Qt window interface, many windows in a project, or a module in the window,
will be reused frequently. In general, in this case, we will take this window or module out and
make it into an independent window class for future reuse. When using Qt's ui files to build an interface, the toolbar bar only provides us with standard window controls. What if we want to use custom controls?

For example: We derive a class SmallWidget from QWidget and implement a custom window

// smallwidget.h
class SmallWidget : public QWidget
{
	Q_OBJECT
public:
	explicit SmallWidget(QWidget *parent = 0);
signals:
public slots:
private:
	QSpinBox* spin;
	QSlider* slider;
};
// smallwidget.cpp
SmallWidget::SmallWidget(QWidget *parent) : QWidget(parent)
{
	spin = new QSpinBox(this);
	slider = new QSlider(Qt::Horizontal, this);

	// 创建布局对象
	QHBoxLayout* layout = new QHBoxLayout;

	// 将控件添加到布局中
	layout->addWidget(spin);
	layout->addWidget(slider);

	// 将布局设置到窗口中
	setLayout(layout);

	// 添加消息响应
	connect(spin,static_cast<void (QSpinBox::*)(int)>
						(&QSpinBox::valueChanged),slider, 
						&QSlider::setValue);

	connect(slider, &QSlider::valueChanged,spin, &QSpinBox::setValue);
}

Then this SmallWidget can be displayed as an independent window or used as a control