Qt 练习做一个登录界面

练习做一个登录界面

效果

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::WindowMinMaxButtonsHint
    this->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;
}

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