Préface

Récemment, j'utilise Qt5 et Qt Creator pour faire un projet de système de gestion. Naturellement, j'ai besoin d'utiliser l'interface de connexion, alors enregistrez la production de l'interface de connexion. La réalisation de certaines de ces fonctions a également bénéficié de l'étude précédente de la partie fenêtre irrégulière de la vidéo de base Qt5 .

table des matières

Préface
1. Apprenez à mettre en œuvre une belle interface de connexion

1. Apprenez à mettre en œuvre une belle interface de connexion

Regardez d'abord le produit fini. Insérez la description de l'image ici

La première étape consiste à créer un nouveau projet Qwidget

Il n'est pas nécessaire d'utiliser qmainwindow, et ces menus ne sont pas nécessaires. Généralement, qwidget peut être utilisé. Veuillez vérifier ui.
Insérez la description de l'image ici

La deuxième étape, ajouter des composants d'interface

1. Ajouter un conteneur

Insérez la description de l'image ici
Ajustez le conteneur à une taille appropriée et ajustez l'ensemble de la toile à une taille appropriée.

2. Ajouter des boutons, des étiquettes, des composants de texte

Idée:
Utilisez des widgets d'entrée pour le compte et le mot de passe: Line Edit
Logo et oubliez le mot de passe. Utilisez deux widgets d'affichage: TextLabel se
souvient-il si je choisis un
bouton: le bouton de connexion CheckBox utilise Buttons: PushButton
Insérez la description de l'image ici

3. Modifiez le nom du composant

Commencez par modifier les attributs de texte par défaut de Modification de ligne, cliquez sur les deux modifications de ligne pour modifier les attributs de texte en Nom d'utilisateur et Mot de passe. Insérez la description de l'image ici
Ensuite, les autres étiquettes de texte de bouton peuvent être directement modifiées en double-cliquant sur le nom.
Après les deux étapes ci-dessus, vous pouvez obtenir ce look (ici, vous avez modifié la police dans le menu à droite de Wiighets, et vous pouvez la changer via la feuille de style plus tard).
Insérez la description de l'image ici

4. Ajouter une feuille de style

Semblable à css, Qt a Qss, l'étape la plus critique est d'ajouter une feuille de style. Cliquez avec le bouton droit dans le canevas en dehors du conteneur Frame pour modifier la feuille de style et entrez le code suivant.

*{
    
    
background:rgb(255, 255, 255);
font-size:15px;
font-style:MingLiU-ExtB;
}
QFrame{
    
    
border:sold 10px rgba(0,0,0);
background-image:url(H:/GUI_design/day04/image/Login_Blue5);//背景
}
QLineEdit{
    
    
color:#8d98a1;
background-color:#405361;
font-size:16px;
border-style:outset;
border-radius:10px;
font-style:MingLiU-ExtB;
}
QPushButton{
    
    
background:#ced1d8;
border-style:outset;
border-radius:10px;
font-style:MingLiU-ExtB;
}
QPushButton:pressed{
    
    
background-color:rgb(224,0,0);
border-style:inset;
font-style:MingLiU-ExtB;
}
QCheckBox{
    
    
background:rgba(85,170,255,0);
color:white;
font-style:MingLiU-ExtB;
}
QLabel{
    
    
background:rgba(85,170,255,0);
color:white;
font-style:MingLiU-ExtB;
font-size:14px;
}

Il suffit de trouver "Du Niang" en arrière-plan.
Insérez la description de l'image ici
Affichage après application de la feuille de style.

La troisième étape consiste à réaliser les fonctions de réduction de fenêtre et de fermeture de fenêtre

1. Ajouter des boutons de réduction et de fermeture de la fenêtre

Sélectionnez Boutons: Bouton outil, utiliser pour réduire et x pour fermer la fenêtre. Insérez la description de l'image ici

2. Le bouton va à l'emplacement

Tournez les deux boutons vers l'emplacement.
Insérez la description de l'image ici

3. Exemple de code

Après être passé à l'emplacement, ajoutez simplement les fonctions close () et showMinimized () à la fonction correspondante. Le code spécifique est le suivant.

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui {
    
     class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    
    
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:
    void on_toolButton_clicked();

    void on_toolButton_2_clicked();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

main.cpp

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    
    
    QApplication a(argc, argv);
    Widget w;
    w.show();
    return a.exec();
}

widget.cpp

#include "widget.h"
#include "ui_widget.h"

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

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

//核心代码就这几行
void Widget::on_toolButton_clicked()
{
    
    
    close();
}

void Widget::on_toolButton_2_clicked()
{
    
    
    showMinimized();
}

Ajustez le canevas à une taille appropriée. L'
Insérez la description de l'image ici
affichage est le suivant: À

ce stade, nous devons également supprimer la bordure supérieure du widget et supprimer l'arrière-plan.

Étape 4: Cachez la bordure et l'arrière-plan de la fenêtre du widget

Ajoutez les deux lignes de code suivantes au fichier widget.cpp.

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    
    
    ui->setupUi(this);
    //去窗口边框
        setWindowFlags(Qt::FramelessWindowHint | windowFlags());

    //把窗口背景设置为透明;
        setAttribute(Qt::WA_TranslucentBackground);
}

La cinquième étape, réalisez que l'interface peut être déplacée

Besoin d'ajouter un événement de déplacement de la souris et de souris. Utilisez * e pour obtenir le mouvement de la souris ou appuyez sur.
main.cpp

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    
    
    QApplication a(argc, argv);
    Widget w;
    w.show();
    return a.exec();
}