《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

源码下载

相关推荐
懒大王爱吃狼40 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
秃头佛爷2 小时前
Python学习大纲总结及注意事项
开发语言·python·学习
待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
XiaoLeisj4 小时前
【JavaEE初阶 — 多线程】单例模式 & 指令重排序问题
java·开发语言·java-ee
励志成为嵌入式工程师5 小时前
c语言简单编程练习9
c语言·开发语言·算法·vim
捕鲸叉5 小时前
创建线程时传递参数给线程
开发语言·c++·算法
A charmer5 小时前
【C++】vector 类深度解析:探索动态数组的奥秘
开发语言·c++·算法
Peter_chq5 小时前
【操作系统】基于环形队列的生产消费模型
linux·c语言·开发语言·c++·后端
记录成长java7 小时前
ServletContext,Cookie,HttpSession的使用
java·开发语言·servlet
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js