练习做一个登录界面

效果

UI图

UI代码

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0"><class>Dialog</class><widget class="QDialog" name="Dialog"><property name="geometry"><rect><x>0</x><y>0</y><width>440</width><height>765</height></rect></property><property name="windowTitle"><string>Dialog</string></property><layout class="QVBoxLayout" name="verticalLayout_2"><property name="leftMargin"><number>10</number></property><property name="topMargin"><number>10</number></property><property name="rightMargin"><number>10</number></property><property name="bottomMargin"><number>10</number></property><item><widget class="QWidget" name="widget" native="true"><layout class="QHBoxLayout" name="horizontalLayout"><property name="leftMargin"><number>10</number></property><property name="topMargin"><number>10</number></property><property name="rightMargin"><number>10</number></property><property name="bottomMargin"><number>10</number></property><item><widget class="QPushButton" name="btnSet"><property name="minimumSize"><size><width>32</width><height>32</height></size></property><property name="maximumSize"><size><width>32</width><height>32</height></size></property><property name="text"><string>PushButton</string></property></widget></item><item><widget class="QLabel" name="label_Title"><property name="text"><string>视频会议</string></property><property name="alignment"><set>Qt::AlignmentFlag::AlignCenter</set></property></widget></item><item><widget class="QPushButton" name="btnMin"><property name="minimumSize"><size><width>32</width><height>32</height></size></property><property name="maximumSize"><size><width>32</width><height>32</height></size></property><property name="text"><string>PushButton</string></property></widget></item><item><widget class="QPushButton" name="btnClose"><property name="minimumSize"><size><width>32</width><height>32</height></size></property><property name="maximumSize"><size><width>32</width><height>32</height></size></property><property name="text"><string>PushButton</string></property></widget></item></layout></widget></item><item><spacer name="verticalSpacer"><property name="orientation"><enum>Qt::Orientation::Vertical</enum></property><property name="sizeType"><enum>QSizePolicy::Policy::Fixed</enum></property><property name="sizeHint" stdset="0"><size><width>20</width><height>40</height></size></property></spacer></item><item><layout class="QHBoxLayout" name="horizontalLayout_4"><item><spacer name="horizontalSpacer"><property name="orientation"><enum>Qt::Orientation::Horizontal</enum></property><property name="sizeHint" stdset="0"><size><width>40</width><height>20</height></size></property></spacer></item><item><widget class="QLabel" name="label_logo"><property name="minimumSize"><size><width>400</width><height>336</height></size></property><property name="maximumSize"><size><width>400</width><height>336</height></size></property><property name="text"><string/></property><property name="alignment"><set>Qt::AlignmentFlag::AlignCenter</set></property></widget></item><item><spacer name="horizontalSpacer_2"><property name="orientation"><enum>Qt::Orientation::Horizontal</enum></property><property name="sizeHint" stdset="0"><size><width>40</width><height>20</height></size></property></spacer></item></layout></item><item><spacer name="verticalSpacer_2"><property name="orientation"><enum>Qt::Orientation::Vertical</enum></property><property name="sizeType"><enum>QSizePolicy::Policy::Fixed</enum></property><property name="sizeHint" stdset="0"><size><width>20</width><height>35</height></size></property></spacer></item><item><layout class="QHBoxLayout" name="horizontalLayout_5"><item><spacer name="horizontalSpacer_3"><property name="orientation"><enum>Qt::Orientation::Horizontal</enum></property><property name="sizeHint" stdset="0"><size><width>40</width><height>20</height></size></property></spacer></item><item><layout class="QVBoxLayout" name="verticalLayout"><item><widget class="QPushButton" name="btnWeichatLogin"><property name="minimumSize"><size><width>400</width><height>50</height></size></property><property name="maximumSize"><size><width>400</width><height>50</height></size></property><property name="styleSheet"><string notr="true">QPushButton:hover
{/*边框色*/border-color:blue;
}</string></property><property name="text"><string>微信登录</string></property></widget></item><item><spacer name="verticalSpacer_3"><property name="orientation"><enum>Qt::Orientation::Vertical</enum></property><property name="sizeType"><enum>QSizePolicy::Policy::Fixed</enum></property><property name="sizeHint" stdset="0"><size><width>20</width><height>15</height></size></property></spacer></item><item><widget class="QPushButton" name="btnJoin"><property name="minimumSize"><size><width>400</width><height>50</height></size></property><property name="maximumSize"><size><width>400</width><height>50</height></size></property><property name="styleSheet"><string notr="true"/></property><property name="text"><string>加入会议</string></property></widget></item></layout></item><item><spacer name="horizontalSpacer_4"><property name="orientation"><enum>Qt::Orientation::Horizontal</enum></property><property name="sizeHint" stdset="0"><size><width>40</width><height>20</height></size></property></spacer></item></layout></item><item><layout class="QHBoxLayout" name="horizontalLayout_2"><item><widget class="Line" name="line"><property name="orientation"><enum>Qt::Orientation::Horizontal</enum></property></widget></item><item><widget class="QLabel" name="label_3"><property name="text"><string>其他登录方式</string></property><property name="alignment"><set>Qt::AlignmentFlag::AlignCenter</set></property></widget></item><item><widget class="Line" name="line_2"><property name="orientation"><enum>Qt::Orientation::Horizontal</enum></property></widget></item></layout></item><item><layout class="QHBoxLayout" name="horizontalLayout_3"><item><widget class="QToolButton" name="toolBtnPhone"><property name="minimumSize"><size><width>60</width><height>80</height></size></property><property name="maximumSize"><size><width>60</width><height>80</height></size></property><property name="text"><string>...</string></property></widget></item><item><widget class="QToolButton" name="toolBtnEnpriseWeichat"><property name="minimumSize"><size><width>60</width><height>80</height></size></property><property name="maximumSize"><size><width>60</width><height>80</height></size></property><property name="text"><string>...</string></property></widget></item><item><widget class="QToolButton" name="toolBtnSSO"><property name="minimumSize"><size><width>60</width><height>80</height></size></property><property name="maximumSize"><size><width>60</width><height>80</height></size></property><property name="text"><string>...</string></property></widget></item></layout></item></layout></widget><resources/><connections/>
</ui>

项目结构

样式代码

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"Dialog::Dialog(QWidget *parent): QDialog(parent), ui(new Ui::Dialog)
{ui->setupUi(this);this->setStyleSheet("background-color:white");//去除边框 : Qt::FramelessWindowHint//点任务拦图标时 显示和隐藏 窗口 Qt::WindowMinMaxButtonsHintthis->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint);ui->btnSet->setText("");//写样式表ui->btnSet->setStyleSheet("QPushButton{background-image:url(://resources/set.png);border:none} QPushButton::hover{background-color:rgb(99,99,99)}");ui->btnMin->setText("");//写样式表ui->btnMin->setStyleSheet("QPushButton{background-image:url(://resources/min.png);border:none} QPushButton::hover{background-color:rgb(99,99,99)}");ui->btnClose->setText("");//写样式表ui->btnClose->setStyleSheet("QPushButton{background-image:url(://resources/close.png);border:none} QPushButton::hover{background-color:rgb(99,99,99)}");ui->label_logo->setText("");//显示图片QPixmap *pic = new QPixmap("://resources/logo.jpg");//设置图片缩放pic->scaled(ui->label_logo->size(),Qt::KeepAspectRatio);ui->label_logo->setScaledContents(true);ui->label_logo->setPixmap(*pic);ui->btnWeichatLogin->setText("");//写样式表ui->btnWeichatLogin->setStyleSheet("QPushButton{background-image:url(://resources/weichatlogin.png);border:none} QPushButton::hover{border-color:blue}");ui->toolBtnPhone->setText("手机号");ui->toolBtnPhone->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);ui->toolBtnPhone->setIconSize(QSize(60,60));ui->toolBtnPhone->setIcon(QIcon(":/resources/phonelogin.png"));ui->toolBtnPhone->setStyleSheet("border:none");ui->toolBtnEnpriseWeichat->setText("企业微信");ui->toolBtnEnpriseWeichat->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);ui->toolBtnEnpriseWeichat->setIconSize(QSize(60,60));ui->toolBtnEnpriseWeichat->setIcon(QIcon(":/resources/enpriseweichat.png"));ui->toolBtnEnpriseWeichat->setStyleSheet("border:none");ui->toolBtnSSO->setText("SSO");ui->toolBtnSSO->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);ui->toolBtnSSO->setIconSize(QSize(60,60));ui->toolBtnSSO->setIcon(QIcon(":/resources/sso.png"));ui->toolBtnSSO->setStyleSheet("border:none");//事件//关闭事件connect(ui->btnClose,&QPushButton::clicked,[=]{close();});connect(ui->btnMin,&QPushButton::clicked,[=]{showMinimized();//最小化//showMaximized();//最大化//if(this->isMaximized())});//判断是否最大化if(isMaximized()){}//判断是否最小化if(isMinimized()){showMaximized();//最大化}
}Dialog::~Dialog()
{delete ui;
}

今天时间有限，先写到这里，后面在细化怎么一步步做出来的