《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

源码下载

相关推荐
网络风云10 分钟前
golang中的包管理-下--详解
开发语言·后端·golang
小唐C++27 分钟前
C++小病毒-1.0勒索
开发语言·c++·vscode·python·算法·c#·编辑器
S-X-S33 分钟前
集成Sleuth实现链路追踪
java·开发语言·链路追踪
北 染 星 辰1 小时前
Python网络自动化运维---用户交互模块
开发语言·python·自动化
佳心饼干-1 小时前
数据结构-栈
开发语言·数据结构
我们的五年1 小时前
【C语言学习】:C语言补充:转义字符,<<,>>操作符,IDE
c语言·开发语言·后端·学习
Golinie1 小时前
【C++高并发服务器WebServer】-2:exec函数簇、进程控制
linux·c++·webserver·高并发服务器
灯火不休ᝰ1 小时前
[java] java基础-字符串篇
java·开发语言·string
励志去大厂的菜鸟1 小时前
系统相关类——java.lang.Math (三)(案例详细拆解小白友好)
java·服务器·开发语言·深度学习·学习方法
课堂随想2 小时前
`std::make_shared` 无法直接用于单例模式,因为它需要访问构造函数,而构造函数通常是私有的
c++·单例模式