Table des matières
1.3 Création et disposition des composants d'interface
1.4 Relation entre les signaux et les slots
La conception visuelle de l'interface utilisateur
est destinée aux utilisateurs. En fait, la couche inférieure est implémentée dans du code
C++
, mais
Qt
la gère habilement, ce qui évite aux utilisateurs beaucoup de travail fastidieux de conception d'interface.
Étant donné que la couche inférieure de la conception de l’interface est en réalité implémentée en
langage
C++ , les fonctions implémentées au niveau de la couche inférieure sont plus puissantes et plus flexibles que la conception visuelle.
Certains effets d'interface ne peuvent pas être obtenus par la conception visuelle, ou certaines personnes sont habituées à concevoir des interfaces en code pur, elles peuvent donc concevoir des interfaces en code pur. Par exemple, les exemples fournis avec Qt sont essentiellement implémentés en code pur
. interface.
Par conséquent, cette section présente un exemple de conception
d'interface utilisateur
à l'aide de code pur et utilise l'exemple pour comprendre les principes de base de la conception d'interface utilisateur à l'aide de code pur. Correspondant à la conception visuelle de l’interface utilisateur précédente, elle est appelée conception d’interface utilisateur codée.
1.1 Fonction d'instance
Créez d'abord un projet d'application de widget samp2_3. Lors de la sélection de la classe de base dans l'assistant de création de projet, sélectionnez la classe de base QDialog . Le nom de la nouvelle classe est QWDlgManual . L'essentiel est d'annuler la création du formulaire, c'est-à-dire de ne pas cochez la case « Générer un formulaire » (créer une interface). Il n'y a pas de fichier qwdlgmanual.ui dans l'arborescence des répertoires des fichiers de projet créés .
Ce projet crée une boîte de dialogue via du code pour obtenir une
interface et des fonctionnalités similaires à
samp2_2 .
L'effet d'exécution après la fin de cet exemple est illustré dans la figure
1.
Son interface et ses fonctions sont
similaires à celles de samp2_2.
1.2 Création d'interfaces
Définition de la classe QWDlgManual
La définition complète de la classe QWDlgManual dans le fichier
qwdlgmanual.h
après avoir terminé la fonction est la suivante :
#include <QDialog>
#include <QCheckBox>
#include <QRadioButton>
#include <QPlainTextEdit>
#include <QPushButton>
class QWDlgManual : public QDialog
{
Q_OBJECT
private:
QCheckBox *chkBoxUnder;
QCheckBox *chkBoxItalic;
QCheckBox *chkBoxBold;
QRadioButton *rBtnBlack;
QRadioButton *rBtnRed;
QRadioButton *rBtnBlue;
QPlainTextEdit *txtEdit;
QPushButton *btnOK;
QPushButton *btnCancel;
QPushButton *btnClose;
void iniUI();//UI 创建与初始化
void iniSignalSlots();//初始化信号与槽的链接
private slots:
void on_chkBoxUnder(bool checked); //Underline 的 clicked(bool)信号的槽函数
void on_chkBoxItalic(bool checked);//Italic 的 clicked(bool)信号的槽函数
void on_chkBoxBold(bool checked); //Bold 的 clicked(bool)信号的槽函数
void setTextFontColor(); //设置字体颜色
public:
QWDlgManual(QWidget *parent = 0);
~QWDlgManual();
};
Dans
la partie privée de la classe
QWDlgManual
, les variables pointeurs de chaque composant de l'interface sont déclarées. Ces composants d'interface doivent être créés dans le constructeur de la classe QWDlgManual et disposés sur le formulaire.
Deux fonctions sont personnalisées dans la partie
privée .
iniUI() est utilisé pour créer tous les composants d'interface et compléter les paramètres de mise en page et d'attributs. iniSignalSlots() est utilisé pour compléter l'association de tous les signaux et fonctions de slot.
Quatre fonctions de slot sont déclarées dans la section
slots privés
, qui sont trois fonctions de slot de réponse CheckBox et trois fonctions de slot de réponse communes RadioButton de réglage des couleurs.
Remarque : Contrairement à la définition de classe de formulaire obtenue à partir de la conception visuelle,
la définition de classe de
QWDlgManual n'a pas de pointeur
ui pointant vers l'interface .
Les fonctions de ces fonctions slot sont similaires à celles de l'exemple
samp2_2
, sauf que lors de l'accès au composant d'interface, il n'est pas nécessaire d'utiliser
le
pointeur ui, mais d'accéder directement aux variables membres du composant d'interface définies dans la classe QWDlgManual, telles que
le code de
on_chkBoxUnder() :
void QWDlgManual::on_chkBoxUnder(bool checked)
{
QFont font=txtEdit->font();
font.setUnderline(checked);
txtEdit->setFont(font);
}
La création de l'interface et l'association des signaux et des fonctions slot
se réalisent dans le constructeur de
QWDlgManual . Le code constructeur est le suivant :
QWDlgManual::QWDlgManual(QWidget *parent) : QDialog(parent)
{
iniUI(); //界面创建与布局
iniSignalSlots(); //信号与槽的关联
setWindowTitle("Form created mannually");
}
Le constructeur appelle
iniUI()
pour créer des composants d'interface et une disposition, et appelle
iniSignalSlots()
pour associer des signaux et des fonctions de slot.
1.3 Création et disposition des composants d'interface
La fonction iniUI() implémente la création et la disposition des composants d'interface, ainsi que les paramètres d'attributs. Voici le code complet de iniUI() :
void QWDlgManual::iniUI()
{
//创建 Underline, Italic, Bold 3 个 CheckBox，并水平布局
chkBoxUnder=new QCheckBox(tr("Underline"));
chkBoxItalic=new QCheckBox(tr("Italic"));
chkBoxBold=new QCheckBox(tr("Bold"));
QHBoxLayout *HLay1=new QHBoxLayout;
HLay1->addWidget(chkBoxUnder);
HLay1->addWidget(chkBoxItalic);
HLay1->addWidget(chkBoxBold);
//创建 Black, Red, Blue 3 个 RadioButton，并水平布局
rBtnBlack=new QRadioButton(tr("Black"));
rBtnBlack->setChecked(true);
rBtnRed=new QRadioButton(tr("Red"));
rBtnBlue=new QRadioButton(tr("Blue"));
QHBoxLayout *HLay2=new QHBoxLayout;
HLay2->addWidget(rBtnBlack);
HLay2->addWidget(rBtnRed);
HLay2->addWidget(rBtnBlue);
//创建确定, 取消, 退出 3 个 PushButton, 并水平布局
btnOK=new QPushButton(tr("确定"));
btnCancel=new QPushButton(tr("取消"));
btnClose=new QPushButton(tr("退出"));
QHBoxLayout *HLay3=new QHBoxLayout;
HLay3->addStretch();
HLay3->addWidget(btnOK);
HLay3->addWidget(btnCancel);
HLay3->addStretch();
HLay3->addWidget(btnClose);
//创建文本框,并设置初始字体
txtEdit=new QPlainTextEdit;
txtEdit->setPlainText("Hello world\n\nIt is my demo");
QFont font=txtEdit->font(); //获取字体
font.setPointSize(20);//修改字体大小
txtEdit->setFont(font);//设置字体
//创建垂直布局，并设置为主布局
QVBoxLayout *VLay=new QVBoxLayout;
VLay->addLayout(HLay1); //添加字体类型组
VLay->addLayout(HLay2);//添加字体颜色组
VLay->addWidget(txtEdit);//添加 PlainTextEdit
VLay->addLayout(HLay3);//添加按键组
setLayout(VLay); //设置为窗体的主布局
}
La fonction iniUI()
remplit les fonctions suivantes dans l'ordre :
⚫Créez
trois composants QCheckBox . Les pointeurs de ces trois composants ont été définis comme variables
privées
de QWDlgManual . Créez ensuite une disposition horizontale HLay1 et ajoutez trois CheckBox à cette disposition horizontale.
⚫Créez
3 composants QRadioButton , créez une disposition horizontale HLay2
et
ajoutez 3 RadioButtons à cette disposition horizontale .
⚫Créez
3 composants QPushButton et créez une disposition horizontale HLay3 . Ajoutez 3 PushButtons à cette disposition horizontale et ajoutez des espaces horizontaux
de manière appropriée
.
⚫Créez
un composant
QPlainTextEdit
, définissez son contenu textuel et définissez sa police.
⚫Créez
une mise en page verticale
VLay et ajoutez
les trois mises en page horizontales et zones de texte
créées précédemment
à cette mise en page dans l'ordre.
⚫Définissez
la disposition verticale comme disposition principale du formulaire.
Après avoir créé le composant et défini la disposition de cette manière, vous pouvez obtenir
l'effet d'interface comme indiqué dans la figure
1 lors de l'exécution.
Le code est entièrement utilisé pour implémenter la création de composants et les paramètres de mise en page, et ces fonctions sont automatiquement implémentées
dans la conception visuelle par la fonction setupUi() en fonction des résultats de conception visuelle de l'interface.
Lorsque vous utilisez la conception de code pour implémenter
l'interface utilisateur
, vous devez disposer d'un plan complet pour la disposition des composants, qui n'est pas aussi intuitif que la conception visuelle et nécessite beaucoup de travail de codage.
1.4 Association entre signaux et slots
Lors de la conception
d'une interface utilisateur en code pur
, l'association entre les signaux et les slots doit également être complétée dans le code. La fonction
iniSignalSlots()
initialise l'association de tous les signaux et slots. Le code complet est le suivant :
void QWDlgManual::iniSignalSlots()
{
//三个颜色 QRadioButton 的 clicked()信号与 setTextFontColor()槽函数关联
connect(rBtnBlue,SIGNAL(clicked()),this,SLOT(setTextFontColor()));
connect(rBtnRed,SIGNAL(clicked()),this,SLOT(setTextFontColor()));
connect(rBtnBlack,SIGNAL(clicked()),this,SLOT(setTextFontColor()));
//三个字体设置的 QCheckBox 的 clicked(bool)信号与相应的槽函数关联
connect(chkBoxUnder,SIGNAL(clicked(bool)),
this,SLOT(on_chkBoxUnder(bool)));
connect(chkBoxItalic,SIGNAL(clicked(bool)),
this,SLOT(on_chkBoxItalic(bool)));
connect(chkBoxBold,SIGNAL(clicked(bool)),
this,SLOT(on_chkBoxBold(bool)));
//三个按钮的信号与窗体的槽函数关联
connect(btnOK,SIGNAL(clicked()),this,SLOT(accept()));
connect(btnCancel,SIGNAL(clicked()),this,SLOT(reject()));
connect(btnClose,SIGNAL(clicked()),this,SLOT(close()));
}
Une fois la conception terminée, compilez et exécutez le programme, vous pouvez obtenir
l'effet d'exécution comme le montre la figure
1 , et la fonction est la même que
samp2_2 . De toute évidence, il est relativement compliqué d'implémenter l'interface utilisateur en utilisant du code pur, et la charge de travail de conception de code est importante et lourde.