《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

源码下载

相关推荐
阿坤带你走近大数据9 分钟前
java中泛型不能用基础数据类型
java·开发语言
weixin_3077791311 分钟前
从脚本执行到智能体协作:AI辅助测试能力的范式重构
运维·开发语言·人工智能·算法·测试用例
云絮.22 分钟前
增删改查操作
java·开发语言
themingyi29 分钟前
Abaqus2024安装python包pandas
开发语言·python·pandas
阿正的梦工坊35 分钟前
【Rust】19-FFI、ABI 与跨语言边界设计
开发语言·后端·rust
殇淋狱陌38 分钟前
Python列表知识思维导图
开发语言·python·学习
代码中介商39 分钟前
C++ 智能指针完全指南(三):weak_ptr 与循环引用
开发语言·c++
fox_lht39 分钟前
第十五章 函数式语言:迭代器和闭包
开发语言·后端·学习·算法·rust
Web极客码1 小时前
如何通过 Python + LLM 用最少的 Token 完成精准推荐任务
开发语言·人工智能·python·ai
BestOrNothing_20151 小时前
ROS2 C++ 小车控制完整实战(二):自定义 msg 消息发布与订阅保姆级教程
c++·ros2·subscriber·publisher·msg·topic通信·自定义接口