《QT实用小工具·五十五》带有标签、下划线的Material Design风格输入框

1、概述
源码放在文章末尾

该项目实现了一个带有标签动画、焦点动画、正确提示、错误警告的单行输入框控件。下面是demo演示:

项目部分代码如下所示:

cpp 复制代码
#ifndef LABELEDEDIT_H
#define LABELEDEDIT_H

#include <QObject>
#include <QWidget>
#include <QVBoxLayout>
#include <QPropertyAnimation>
#include <QPainter>
#include <QPainterPath>
#include <QTimer>
#include <cmath>
#include <QDebug>
#include "bottomlineedit.h"

class LabeledEdit : public QWidget
{
    Q_OBJECT
    Q_PROPERTY(double LabelProg READ getFocusProg WRITE setLabelProg)
    Q_PROPERTY(int FocusProg READ getFocusProg WRITE setFocusProg)
    Q_PROPERTY(int LosesProg READ getLosesProg WRITE setLosesProg)
    Q_PROPERTY(int WrongProg READ getWrongProg WRITE setWrongProg)
    Q_PROPERTY(int CorrectProg READ getCorrectProg WRITE setCorrectProg)
    Q_PROPERTY(int ShowLoadingProg READ getShowLoadingProg WRITE setShowLoadingProg)
    Q_PROPERTY(int HideLoadingProg READ getHideLoadingProg WRITE setHideLoadingProg)
    Q_PROPERTY(int TipProg READ getTipProg WRITE setTipProg)
    Q_PROPERTY(int MsgShowProg READ getMsgShowProg WRITE setMsgShowProg)
    Q_PROPERTY(int MsgHideProg READ getMsgHideProg WRITE setMsgHideProg)
public:
    LabeledEdit(QWidget *parent = nullptr);
    LabeledEdit(QString label, QWidget* parent = nullptr);
    LabeledEdit(QString label, QString def, QWidget* parent = nullptr);

    BottomLineEdit* editor();
    void adjustBlank();
    QString text();
    void setText(QString text);

    void setLabelText(QString text);
    void setMsgText(QString text, bool autoClear = false);
    void setMsgText(QString text, QColor color);
    void setTipText(QString text);
    void setTipText(QString text, QColor color);
    void setAccentColor(QColor color);

    void showCorrect();
    void hideCorrect();
    void showWrong();
    void showWrong(QString msg, bool autoClear = false);
    void showLoading();
    void hideLoading();

private:
    void upperLabel();
    void innerLabel();
    void showTip();
    void hideTip();
    void showMsg();
    void hideMsg();

protected:
    void resizeEvent(QResizeEvent *event) override;
    void paintEvent(QPaintEvent *) override;
    void enterEvent(QEvent *event) override;
    void leaveEvent(QEvent *event) override;

signals:

public slots:

private:
    QPropertyAnimation *startAnimation(QByteArray name, double start, double end, int duration, QEasingCurve curve = QEasingCurve::Linear);
    void setLabelProg(double x);
    double getLabelProg();
    void setFocusProg(int x);
    int getFocusProg();
    void setLosesProg(int x);
    int getLosesProg();
    void setWrongProg(int x);
    int getWrongProg();
    void setCorrectProg(int x);
    int getCorrectProg();
    void setShowLoadingProg(int x);
    int getShowLoadingProg();
    void setHideLoadingProg(int x);
    int getHideLoadingProg();
    void setTipProg(int x);
    int getTipProg();
    void setMsgShowProg(int x);
    int getMsgShowProg();
    void setMsgHideProg(int x);
    int getMsgHideProg();

private:
    BottomLineEdit* line_edit;
    QWidget* up_spacer;
    QWidget* down_spacer;

    QColor grayed_color;   // 没有聚焦的颜色:下划线+文字
    QColor accent_color;   // 终点颜色

    QString label_text;    // 标签
    QList<QPointF> label_in_poss; // 标签在输入框里面的左下角位置
    QList<QPointF> label_up_poss; // 标签在输入框上方的左下角位置
    const int label_ani_max = 4;  // 不超过这数字就使用普通的动画

    QString tip_text;      // 鼠标悬浮显示在下面的(有msg_text时隐藏)
    QColor tip_color;
    bool entering = false; // showWrong隐藏tip,用来做flag

    QString msg_text; // 警告信息
    QColor msg_color; // 警告颜色
    QString msg_hiding; // 隐藏中的msg,用于两次msg的切换
    bool autoClearMsg = false; // 自动删除错误消息

    QTimer* loading_timer = nullptr;
    int loading_petal = 8;    // 菊花花瓣数量
    QRect loading_rect;    // 加载菊花的位置
    double loading_inner = 0; // 菊花内环半径
    double loading_outer = 0; // 菊花外环半径
    int loading_index = 0; // 加载到了哪个花瓣(最右边为0)

    double label_prog = 0; // 标签上下移动
    int focus_prog = 0;    // 下划线从左往右
    int loses_prog = 0;    // 下划线从右边消失
    int wrong_prog = 0;    // 底部下划线浪动
    int correct_prog = 0;  // 右边的勾
    int show_loading_prog = 0;  // 显示加载
    int hide_loading_prog = 0;  // 隐藏加载
    int tip_prog = 0;
    int msg_show_prog = 0;
    int msg_hide_prog = 0;

    const int pen_width = 2;
    const double label_scale = 1.5;
    const int label_duration = 400;
    const int focus_duration = 500;
    const int wrong_duration = 900;
    const int correct_duration = 600;
    const int show_loading_duration = 600;
    const int hide_loading_duration = 200;
    const int tip_duration = 400;
    const int msg_show_duration = 600;
    const int msg_hide_duration = 300;
};

#endif // LABELEDEDIT_H

源码下载

相关推荐
神明不懂浪漫1 小时前
【第七章】Java中的常用类
java·开发语言·前端·经验分享·笔记
梓䈑4 小时前
【算法题攻略】BFS 解决FloodFill 算法、最短路问题、多源BFS 和 拓扑排序
c++·算法·宽度优先
程序喵大人9 小时前
【C++进阶】STL容器与迭代器 - 01 STL 容器先解决元素放在哪里
开发语言·c++·stl
cui_ruicheng9 小时前
Python从入门到实战(十六):多进程编程
开发语言·python
wdfk_prog11 小时前
嵌入式面试真题第 15 题:不可恢复异常后的通用崩溃快照、调用栈保存与离线分析架构
linux·开发语言·面试·架构
晴空了无痕11 小时前
从 Go 基础到 K8s:一条可落地的 Go 服务端成长路线
开发语言·后端·golang·kubernetes
神明不懂浪漫11 小时前
【第五章】Java中的继承与多态
java·开发语言
神州世通12 小时前
解密企业通信安全防线:Avaya Aura 三层安全架构深度解析
开发语言·php
AC赳赳老秦13 小时前
企业工商公开信息采集分析:OpenClaw 批量查询企业工商信息,生成企业画像报告
大数据·开发语言·python·自动化·php·deepseek·openclaw
qq_25183645713 小时前
基于java Web 动漫视频网站毕业论文
java·开发语言·前端