Uso de controles de diseño y comunes.

Uso de controles de diseño y comunes.

1. Diseñador

1. Uso del diseñador








2. Operar el archivo ui por código

#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;
}

• Puede entender todas las funciones en el diseñador como ui->setupUi(this);crédito, por lo que si desea modificar la interfaz de la interfaz de usuario en el código, es mejor seguir este código.
• La forma de operar los controles en la interfaz ui es la misma que el código para operar los controles ordinarios, excepto que se agrega un prefijo ui-> para representar los controles en la interfaz ui

En segundo lugar, los controles de uso común en el diseñador.

1.Diseños :代表界面布局

2. Separadores :代表间距等

3. Botones :按钮类

4. Vistas del artículo :数据库相关

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

6. Contenedores :容器

7. Widgets de entrada :输出控件

8. Mostrar widgets :显示控件

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

• El texto de visualización (texto normal, html) se establece
  mediante la función setText de la clase QLabel:

voidsetText(const QString &)

• Puede mostrar cadenas de texto ordinarias

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

• Puede mostrar cadenas en formato HTML,
  como mostrar un enlace

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

¿Qué setOpenExternalLinks () se utiliza para establecer si se abren automáticamente cuando el usuario hace clic en el enlace de
enlace , si no se especifica el parámetro como verdadero se abre automáticamente, si se ha ajustado a falso, el enlace que desea abrir
solamente por la captura de la señal linkActivated () ,在 自 定 义 的 槽 函 数 中 使 用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));
}

• Mostrar imágenes
  Puede usar la función de miembro de QLabel setPixmap para establecer imágenes

void setPixmap(const QPixmap &)

Primero defina el objeto QPixmap

QPixmap pixmap;

Luego carga la imagen

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

Finalmente, configure la imagen en QLabel

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

• Mostrar animación

Puede usar la función de miembro de QLabel setMovie para cargar animaciones, puede reproducir archivos en formato gif

void setMovie(QMovie * movie)

Primero defina el objeto QMovied e inicialícelo:

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

Reproduce la animación cargada:

movie->start();

Establezca la animación en QLabel:

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

10.Control de SQLineEdit

Cuadro de edición de texto de una línea proporcionado por Qt.

• Establecer / Obtener contenido

Para obtener el contenido del cuadro de edición, use text (). La declaración de la función es la siguiente:

QString text() const

Establecer el contenido del cuadro de edición

void setText(const QString &)

• Establecer modo de visualización

Utilice QLineEdit 类的 setEchoMode () 函数el modo de visualización de texto , la declaración de función:

void setEchoMode(EchoMode mode)

EchoMode es un tipo enumerado, que define cuatro modos de visualización:

QLineEdit :: Modo de visualización en modo normal, de acuerdo con el contenido de entrada.
QLineEdit :: NoEcho no muestra ningún contenido. En este modo, no puede ver la entrada del usuario
QLineEdit :: Modo de contraseña de contraseña. Los caracteres ingresados ​​se convertirán en caracteres especiales de acuerdo con la plataforma.
QLineEdit :: PasswordEchoOnEdit muestra caracteres al editar, de lo contrario, muestra caracteres como contraseña

Además, cuando usamos QLineEdit para mostrar texto, esperamos dejar un área en blanco a la izquierda,
entonces, podemos usar la 使用 QLineEdit 给我们提供的 setTextMarginsfunción:

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

Use esta función para especificar el número de píxeles entre el texto mostrado y los bordes superior, inferior, izquierdo y derecho del cuadro de entrada.

• Establecer solicitud de entrada

Si queremos implementar una función similar al cuadro de búsqueda de Baidu: ingrese uno o unos pocos caracteres, a continuación se
enumerarán algunas cadenas que coincidan con los caracteres ingresados. QLineEdit puede usar
tales funciones miembro para lograr dicha función Función setComleter () para lograr:

voidsetCompleter(QCompleter * c)

Crear objeto QCompleter e inicializar

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

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

La función setCaseSensitivity () de la clase QCompleter se puede utilizar para establecer la distinción entre mayúsculas y minúsculas . Su parámetro es un tipo enumerado:

Qt :: CaseInsensitive no distingue entre mayúsculas y minúsculas
Qt :: CaseSensitive distingue entre mayúsculas y minúsculas

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

Además, también podemos configurar una cierta parte de la cadena para que coincida. Esta función puede implementarse mediante la
función setFilterMode de la clase QCompleter . La declaración de la función es la siguiente:

voidsetFilterMode(Qt::MatchFlags filterMode)

Los parámetros son macros definidos por Qt y existen varios tipos. Para obtener más información, consulte el documento de ayuda de Qt. Para implementar
las funciones mencionadas anteriormente , se pueden utilizar los parámetros Qt::MatchContains:

completer->setFilterMode(Qt::MatchContains);

Una vez completada la configuración de la propiedad, establezca el objeto QCompleter en QLineEdit:

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

11. Layout Manager

En el análisis final, la llamada interfaz GUI es la superposición de un grupo de componentes. Creamos una ventana, le ponemos el botón
y le ponemos el icono para que se convierta en una interfaz. Al colocar, la posición de los componentes es particularmente importante.

• Tenemos que especificar dónde colocar los componentes para que la ventana se pueda representar de la manera que necesitamos. Esto implica el mecanismo de posicionamiento de componentes.
• Qt proporciona dos mecanismos para el posicionamiento de componentes: 绝对定位和布局定位.
• El posicionamiento absoluto es uno de los métodos de posicionamiento más primitivos: proporcione las coordenadas y los valores de longitud y anchura de este componente. De esta manera, Qt sabe dónde colocar el componente y cómo establecer el tamaño del componente. Sin embargo, un problema provocado por esto es que si el usuario cambia el tamaño de la ventana, como hacer clic en el botón de maximizar o arrastrar el borde de la ventana con el mouse, los componentes posicionados absolutamente no responderán. Esto también es natural, porque no le dijo a Qt si el componente debería actualizarse a sí mismo y cómo actualizarlo cuando cambia la ventana . O bien, hay una manera más fácil:禁止用户改变窗口大小。 但这总不是长远之计。
• Posicionamiento de diseño: solo necesita colocar componentes en un diseño determinado, y el diseño es administrado por un
  administrador de diseño especial . Cuando necesita ajustar el tamaño o la posición, Qt usa el administrador de diseño correspondiente para ajustar. El posicionamiento de diseño resuelve perfectamente el defecto de usar posicionamiento absoluto

Los siguientes tres de los diseños proporcionados por Qt son los más utilizados:

QHBoxLayout: diseño de izquierda a derecha en dirección horizontal;
QVBoxLayout: diseño de arriba a abajo en dirección vertical;
QGridLayout: diseño en una cuadrícula, similar a la tabla HTML;

1. Diseño horizontal / vertical / cuadrícula

A continuación, utilizamos un ejemplo para aprender a usar el siguiente administrador de diseño horizontal:

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();
}

Introdujimos dos nuevos componentes en este código: QSpinBox y QSlider. QSpinBox es un cuadro de entrada que solo puede ingresar números, y tiene botones de paso con flechas hacia arriba y hacia abajo. QSlider es un control deslizante con un control deslizante

En el código anterior, window.setLayout (diseño) es establecer el diseño en la ventana. Hay otra forma de configurar el diseño en la ventana :

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

Especificar la ventana principal para el nuevo objeto al crear el objeto de diseño es equivalente a configurar el diseño para la ventana entrante. Además, el diseño y el diseño se pueden anidar, use el método addLayout (). QVBoxLayout se usa exactamente de la misma manera que QHBoxLayout

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

Cuando el contenido del cuadro de entrada digital cambia, se enviará un mensaje y el control deslizante recibirá esta señal
y hará los cambios. Si la conexión de la ranura de señal de los dos se escribe de la siguiente manera:

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))'

Que esta pasando 从出错信息可以看出， 编译器认为 QSpinBox::valueChanged 是一个 overloaded 的函数. Examinamos la documentación de QSpinBox y encontramos que QSpinBox tiene dos señales:

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

Cuando usamos & QSpinBox :: valueChanged para obtener el puntero de función, el compilador no sabe qué función debe tomar la función (recuerde que introdujimos anteriormente, la señal también es una función normal), por lo que se informa el error. La solución es simple: ¿el compilador no está seguro de qué función? Luego especificamos explícitamente una función. El método es, creamos un puntero de función, este parámetro de puntero de función se especifica como int :

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

Luego usamos este puntero de función como señal y lo conectamos con la función QSlider:

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

Esto evita errores de compilación.

2. Controles personalizados

Al construir una interfaz de ventana Qt, muchas ventanas en un proyecto, o un módulo en la ventana,
se reutilizarán con frecuencia. En general, en este caso, sacaremos esta ventana o módulo y la
convertiremos en una clase de ventana independiente para su futura reutilización. Cuando usamos los archivos ui de Qt para construir una interfaz, la barra de la barra de herramientas solo nos proporciona controles de ventana estándar. ¿Qué pasa si queremos usar controles personalizados?

Por ejemplo: derivamos una clase SmallWidget de QWidget e implementamos una ventana personalizada

// 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);
}

Entonces este SmallWidget puede mostrarse como una ventana independiente o usarse como control