Using QT to make a beautiful login interface box

/*** * ┌─┐ ┌─┐ + + * ┌──┘ ┴───────┘ ┴──┐++ * │ │ * │ ─── │++ + + + * ███████───███████ │+ * │ │+ * │ ─┴─ │ * │ │ * └───┐ ┌───┘ * │ │ * │ │ + + * │ │ * │ └──────────────┐ * │ │ * │ ├─┐ * │ ┌─┘ * │ │ * └─┐ ┐ ┌───────┬──┐ ┌──┘ + + + + * │ ─┤ ─┤ │ ─┤ ─┤ * └──┴──┘ └──┴──┘ + + + + *  God bless  *  No code BUG! */

1、 Demonstration effect

2、 Make

2.1、 Create a new one Qwidget project

2.2、 Add interface components

Adjust the container to the appropriate size , At the same time, adjust the whole canvas to the appropriate size .

2.3、 Add a button , label , Text components

The account password part uses Input Widgets：Line Edit
Logo And forgetting your password Display Widgets：TextLabel
Remember to select one Buttons：CheckBox
The login button uses Buttons:PushButton

modify Line Edit Default text properties , Click on two LineEdit Modify text properties placeholdertext by Username and Password.
2.4、 add to qss Style sheets

*{
    
background:rgb(255, 255, 255);
font-size:15px;
font-style:MingLiU-ExtB;
}
QFrame{
    
border:sold 10px rgba(0,0,0);
background-image:url(:/image/background.png);
}
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;
}
#label_forget{
    
color:red;
text-decoration: underline
}

2.5、 Realize the function of minimizing window and closing window
Add a slot function to minimize the good close button ：

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

void Widget::on_closeButton_clicked()
{
    
    close();
}

2.6、 hide widget Window border and background

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    
    ui->setupUi(this);
    // Go to the window border 
        setWindowFlags(Qt::FramelessWindowHint | windowFlags());

    // Set the window background to transparent ;
        setAttribute(Qt::WA_TranslucentBackground);
}

2.7、 Realize the movable interface

void mouseMoveEvent(QMouseEvent *e);// Mouse movement 
void mousePressEvent(QMouseEvent *e);// Press the mouse to move 
void Widget::mouseMoveEvent(QMouseEvent* event)
{
    
    if(event->buttons() & Qt::LeftButton)
    {
    
        // Move to the upper left corner 
        move(event->globalPos() - point);
    }
}

void Widget::mousePressEvent(QMouseEvent* event)
{
    
    if(event->button() == Qt::LeftButton)
    {
    
        // Find the coordinate difference 
        // Now click on the coordinates - Coordinates of the upper left corner of the window 
        point = event->globalPos() - this->frameGeometry().topLeft();
    }
}