码上通QT实战02--登录设计

1、前言

在QT项目开发过程中，设计系统登录界面可以使用QT框架来实现。以下是一个简单的系统登录界面设计示例：

创建登录界面UI：可以使用QT Designer来设计登录界面的UI，包括用户名输入框、密码输入框、登录按钮等。在QT Designer中，可以直观地拖放控件来设计界面布局。

实现登录功能：在C++中，可以通过连接信号与槽的方式实现登录功能。当用户点击登录按钮时，可以连接按钮的clicked信号与相应的槽函数，用于验证用户名密码是否正确。

用户验证：在槽函数中，可以获取用户名密码输入框中的文本内容，并与预先设置的用户名密码进行比对。如果用户名密码正确，可以跳转到系统主界面；如果不正确，可以提示用户重新输入。

界面美化：可以使用QT的样式表来美化界面，包括设置背景颜色、字体样式、按钮样式等。

2、实现过程

1、添加文件

2、添加图片资源

3、添加字体资源

阿里巴巴字体简介

阿里巴巴普惠体是阿里巴巴集团于2019年发布的一款免费商用字体，旨在为中小企业和个人用户提供高质量的字体解决方案。该字体包含多字重（如Light、Regular、Medium、Bold等）和简繁中文支持，设计风格现代、简洁，适用于多种场景。

字体特点

免费商用：无需支付版权费用，可应用于商业设计、广告、产品包装等。

多语言支持：覆盖简体中文、繁体中文、拉丁字母、数字及常用符号。

字重丰富：提供不同粗细版本，适应标题、正文等排版需求。
下载与安装

官方渠道：通过阿里巴巴设计官网或阿里云字体平台下载。

安装步骤（以Windows为例）：

下载字体文件（.ttf格式）。

右键文件选择"安装"，或复制到系统字体目录（C:\Windows\Fonts）。
使用注意事项

授权范围：适用于阿里巴巴生态内外项目，但禁止用于违法、敏感内容。

兼容性：部分老旧软件可能需更新以支持OpenType特性。

4、登录布局

常用布局控件

在Qt中，布局控件用于管理窗口部件的排列和大小调整，确保界面在不同设备和分辨率下保持一致性。以下是一些常用的布局控件：

QHBoxLayout

水平布局，将部件从左到右排列。适用于需要水平排列按钮、标签等部件的场景。

QVBoxLayout

垂直布局，将部件从上到下排列。常用于垂直排列的菜单、列表或表单。

QGridLayout

网格布局，将部件按行和列排列。适用于复杂的表单或需要对齐多个部件的场景。

QFormLayout

表单布局，专门用于标签和输入字段的对齐。通常用于快速创建表单界面。

QStackedLayout

堆叠布局，允许在同一区域显示多个部件，但每次只显示一个。常用于选项卡或向导界面。

常用界面控件

Qt提供了丰富的界面控件，用于构建用户交互界面。以下是一些常用的控件：

QPushButton

按钮控件，用于触发操作。支持文本、图标和自定义样式。

QLabel

标签控件，用于显示文本或图像。支持富文本和超链接。

QLineEdit

单行文本输入框，用于用户输入短文本。支持验证器和占位文本。

QTextEdit

多行文本编辑器，支持富文本和纯文本编辑。适用于长文本输入或显示。

QComboBox

下拉列表框，允许用户从预定义选项中选择。支持可编辑和不可编辑模式。

QCheckBox

复选框，用于布尔选项的选择。支持三态（选中、未选中、部分选中）。

QRadioButton

单选按钮，用于互斥选项的选择。通常与QButtonGroup一起使用。

QSpinBox

数字输入框，用于输入整数或浮点数。支持范围限制和步长调整。

QSlider

滑动条，用于通过拖动选择数值。支持水平和垂直方向。

QProgressBar

进度条，用于显示任务的完成进度。支持水平和垂直方向。

QListView

列表视图，用于显示一维数据列表。支持自定义模型和委托。

QTableView

表格视图，用于显示二维表格数据。支持排序、筛选和自定义样式。

QTreeView

树形视图，用于显示层次结构数据。支持展开、折叠和自定义节点样式。

容器控件

容器控件用于组织和管理其他控件，提供更好的布局和结构。以下是一些常用的容器控件：

QGroupBox

分组框，用于将相关控件分组并添加标题。支持边框和标题显示。

QTabWidget

选项卡控件，允许用户通过选项卡切换不同页面。支持自定义选项卡样式。

QScrollArea

滚动区域，用于显示超出可见区域的内容。支持水平和垂直滚动条。

QSplitter

分割器，允许用户通过拖动分割条调整子部件的大小。支持水平和垂直分割。

QDockWidget

停靠窗口，用于创建可浮动和停靠的面板。常用于工具面板或属性窗口。

高级控件

QCalendarWidget

日历控件，用于选择日期。支持自定义日期范围和样式。

QDial

旋钮控件，用于通过旋转选择数值。适用于模拟输入场景。

QWebEngineView

网页视图，用于显示网页内容。基于Chromium引擎，支持现代网页技术。

QGraphicsView

图形视图框架，用于显示和交互复杂的2D图形场景。支持缩放、旋转和自定义绘图。

QOpenGLWidget

OpenGL控件，用于渲染3D图形。需要OpenGL支持，适用于高性能图形应用。

UI设计

窗体事件

cpp 复制代码

#include "loginwindow.h"
#include "ui_loginwindow.h"
#include <systemutils.h>
#include <QGraphicsDropShadowEffect>

LoginWindow::LoginWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::LoginWindow)
{
    ui->setupUi(this);

    this->setWindowFlag(Qt::FramelessWindowHint);//无边框窗口
    this->setAttribute(Qt::WA_TranslucentBackground);//透明窗口

    // //设置渐变阴影
    // QGraphicsDropShadowEffect *effect=new QGraphicsDropShadowEffect();
    // effect->setOffset(0,0);
    // effect->setColor(Qt::gray);//灰色渐变
    // effect->setBlurRadius(10);//阴影有多大
    // ui->wdg_content->setGraphicsEffect(effect);

    // QGraphicsDropShadowEffect *effect2=new QGraphicsDropShadowEffect();
    // effect2->setOffset(0,0);
    // effect2->setColor(Qt::gray);//灰色渐变
    // effect2->setBlurRadius(40);//阴影有多大
    // ui->wdg_logo->setGraphicsEffect(effect2);

     //  设置渐变阴影
    utils=new SystemUtils();
    utils->SetDropShadowEffect(ui->wdg_content,Qt::gray,10);
    utils->SetDropShadowEffect(ui->wdg_logo,Qt::gray,60);


    // 设置相关字体图标
    QFont font=QFont(QString("zx_icons"),12);

    // 关闭
    ui->pb_close->setFont(font);
    ui->pb_close->setText(QChar(0xe653));
    //用户名
    ui->lbl_icon_un->setFont(font);
    ui->lbl_icon_un->setText(QChar(0xe64a));
    //密码
    ui->lbl_icon_pw->setFont(font);
    ui->lbl_icon_pw->setText(QChar(0xe609));

}

LoginWindow::~LoginWindow()
{
    delete ui;
    delete utils;
}


// 按下鼠标左键
void LoginWindow::mousePressEvent(QMouseEvent *event) {
    if (event->button() == Qt::LeftButton) {  // 如果按下左边按钮
        m_drag = true;//表示要移动
        // 获取当前光标的位置
        m_dragPos = event->pos();
        // 当前鼠标点相对于桌面屏幕左上角的坐标(0,0)，全局坐标；
        m_resizeDownPos = event->globalPosition().toPoint();
        // 获取当前窗口的相关参数，包括位置，大小等等各种参数
        m_mouseDownRect = this->rect();
    }
}

// 鼠标移动
void LoginWindow::mouseMoveEvent(QMouseEvent *event) {
    // 如果是鼠标在拖动时，当前窗口是全屏，不做任何处理
    if (isFullScreen()) {
        return;
    }
    if (m_move) {
        move(event->globalPosition().toPoint() - m_dragPos);
        return;
    }

    setCursor(Qt::ArrowCursor);
    if (m_drag && (event->buttons() & Qt::LeftButton)) {
        m_move = true;

        move(event->globalPosition().toPoint() - m_dragPos);
    }
}

// 鼠标释放
void LoginWindow::mouseReleaseEvent(QMouseEvent *event) {
    Q_UNUSED(event)
    m_drag = false;
    if (m_move) {
        m_move = false;
    }
    setCursor(Qt::ArrowCursor);
}


void LoginWindow::on_pb_close_clicked()
{
     this->close();
}

5、加载字体

6、启动项目

复制代码

原创不易，打字不易，截图不易，撸码不易，整理不易，走过路过，不要错过，欢迎点赞，收藏，转载，复制，抄袭，留言，灌水，请动动你的金手指，祝您早日实现财务自由。