Qt 练习做一个登录界面

baivfhpwxf20232024-11-02 20:07

练习做一个登录界面

效果

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;
}

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

相关推荐
iAm_Ike4 小时前
Go 中自定义类型与基础类型间的显式类型转换详解
jvm·数据库·python
iuvtsrt4 小时前
Golang怎么实现方法集与接口的匹配_Golang如何理解值类型和指针类型实现接口的区别【详解】
jvm·数据库·python
Javatutouhouduan4 小时前
2026Java面试的正确打开方式！
java·高并发·java面试·java面试题·后端开发·java编程·java八股文
JAVA面经实录9175 小时前
Java初级最终完整版学习路线图
java·spring·eclipse·maven
tongluowan0076 小时前
MySQL中列数量及长度
数据库·mysql
-liming-6 小时前
单片机设计_串口调试工具
数据库·单片机·mongodb
Cat_Rocky6 小时前
k8s-持久化存储，粗浅学习
java·学习·kubernetes
鹿角片ljp6 小时前
从告警检测到智能研判：SQL 注入研判模型的设计与实践
数据库·sql
知识领航员6 小时前
蘑兔AI音乐深度实测：功能拆解、实测表现与适用场景
java·c语言·c++·人工智能·python·算法·github
释怀°Believe6 小时前
Spring解析
java·后端·spring
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03CC-Switch & Claude 基于 Linux 服务器安装使用指南04【AI】2026 年具身智能模型和世界模型总结05零基础教你claude code 接入 deepseek V406Cursor 接入 DeepSeek‑V4‑Pro 完整指南（2026 实测）07codex app每次打开重连5次Reconnecting问题解决08裂开！ChatGPT 居然开始要手机号验证，附详细解决方法09要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法10Windows端Codex接入第三方模型（DeekSeek，BaiLian)