Shulou(Shulou.com)06/02 Report--

This article shows you how to achieve a beautiful Qt login interface, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Preface

Recently in the use of Qt5,Qt Creator to do a management system class project, naturally need to use the login interface, so record the production of the login interface. Some of these functions also benefit from the previous study of the irregular window part of the basic Qt5 video.

Hand in hand to teach you to achieve a beautiful login interface

First, take a look at the finished product.

First step, create a new Qwidget project

There is no need to use qmainwindow, do not need those menus, generally use qwidget, pay attention to check ui.

Step 2, add interface components

1. Add a container

Resize the container to the right size, while adjusting the entire canvas to the right size.

2. Add buttons, labels, text components

Idea:

Use Input Widgets:Line Edit in the account password part

Use two Display Widgets:TextLabel for Logo and forgetting password

Do you remember that I chose a Buttons:CheckBox

Login button uses Buttons:PushButton

3. Modify the component name

First modify the default text properties of LineEdit, and click two LineEdit to change the text properties to Username and Password.

Then the other button text labels directly double-click to change the name.

After the above two steps, you can get something like this (the font has been changed in the menu on the right of Wighets, which can be changed later through the stylesheet).

4. Add a style sheet

Similar to css,Qt with Qss, the most critical step is to add stylesheets. Right-click inside the canvas outside the Frame container to change the stylesheet and enter the following code.

* {background:rgb (255,255,255); font-size:15px;font-style:MingLiU-ExtB;} QFrame {border:sold 10px rgba; background-image:url (H:/GUI_design/day04/image/Login_Blue5); / / background} 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; border-style:inset;font-style:MingLiU-ExtB;} QCheckBox {background:rgba; color:white;font-style:MingLiU-ExtB;} QLabel {background:rgba; color:white;font-style:MingLiU-ExtB;font-size:14px;}

You can find "du Niang" in the background part.

Display after applying stylesheet.

The third step is to minimize the window and close the window.

1. Add minimize and close window buttons

Button to select Buttons:Tool Button, minimize the use of -, close the window with x.

2. The button goes to the slot

Turn both buttons to the slot.

3. Code example

After you go to the slot, you only need to add the close () and showMinimized () functions to the corresponding functions. The specific code is as follows.

Widget.h

# ifndef WIDGET_H#define WIDGET_H#include QT_BEGIN_NAMESPACEnamespace Ui {class Widget;} QT_END_NAMESPACEclass Widget: public QWidget {Q_OBJECTpublic: 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 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;} / / these lines of void Widget::on_toolButton_clicked () {close ();} void Widget::on_toolButton_2_clicked () {showMinimized ();}

Resize the canvas to the right size

The display is as follows:

At this time, we also need to remove the top frame of Widget and remove the background.

Step 4: hide the widget window frame and background

Add the following two lines of code to the widget.cpp file.

Widget::Widget (QWidget * parent): QWidget (parent), ui (new Ui::Widget) {ui- > setupUi (this); / / go to the window frame setWindowFlags (Qt::FramelessWindowHint | windowFlags ()); / / set the window background to transparent; setAttribute (Qt::WA_TranslucentBackground);} step 5, make the interface mobile

You need to add a mouse movement and mouse down event. Use * e to get mouse movement or press.

Main.cpp

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

Widget.h

# ifndef WIDGET_H#define WIDGET_H#include QT_BEGIN_NAMESPACEnamespace Ui {class Widget;} QT_END_NAMESPACEclass Widget: public QWidget {Q_OBJECTpublic: Widget (QWidget * parent = nullptr); ~ Widget (); protected: void mouseMoveEvent (QMouseEvent * e); / / Mouse move void mousePressEvent (QMouseEvent * e); / / Mouse press and move private slots: void on_close_clicked (); void on_minimized_clicked (); private: Ui::Widget * ui QPoint p;}; # endif / / WIDGET_H

Widget.cpp

# include "widget.h" # include "ui_widget.h" # include # include Widget::Widget (QWidget * parent): QWidget (parent), ui (new Ui::Widget) {ui- > setupUi (this); / / setWindowFlags (Qt::FramelessWindowHint | windowFlags ()); / / set window background to transparent; setAttribute (Qt::WA_TranslucentBackground);} Widget::~Widget () {delete ui } void Widget::mousePressEvent (QMouseEvent * e) {if (e-> button () = = Qt::LeftButton) {/ / find the coordinate difference / / current click coordinates-coordinates in the upper left corner of the window p = e-> globalPos ()-this- > frameGeometry (). TopLeft () }} void Widget::mouseMoveEvent (QMouseEvent * e) {if (e-> buttons () & Qt::LeftButton) {/ / move to the upper left corner move (e-> globalPos ()-p);}} void Widget::on_close_clicked () {close ();} void Widget::on_minimized_clicked () {showMinimized () } the above content is how to achieve a beautiful Qt login interface, have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.