Qt自定义控件学习 /**
* @brief 自定义QLineEdit控件,使用时将QLineEdit提升为CustomButtonEdit即可
* 此类的样式:一个删除按钮,动态显示隐藏
* 应用场景:密码输入,搜索框输入框
* @author GGX
* @date 2020-05-20
*/
使用方法1:在UI设计拖出一个QLineEdit控件,然后提升
效果:
有文字时
无文字时:
头文件: custombuttonedit.h
#ifndef CUSTOMBUTTONEDIT_H
#define CUSTOMBUTTONEDIT_H
#include <QMainWindow>
#include <QPushButton>
#include <QLineEdit>
#include <QHBoxLayout>
#include <QString>
#include <QDebug>
/**
* @brief 自定义QLineEdit控件,使用时将QLineEdit提升为CustomButtonEdit即可
* 关键,一定要重写showEvent,具体原因,注释即可看到效果
* 此类的样式:一个删除按钮,动态显示隐藏
* 应用场景:密码输入,搜索框输入框
* @author GGX
* @date 2020-05-20
*/
class CustomButtonEdit : public QLineEdit
{
Q_OBJECT
public:
//定义多个构造函数,方便使用
explicit CustomButtonEdit(QWidget *parent = 0);
explicit CustomButtonEdit(const QString text,QWidget *parent = 0);
explicit CustomButtonEdit(const QIcon icon,QWidget *parent = 0);
explicit CustomButtonEdit(const QIcon icon,const QString text, QWidget *parent = 0);
~CustomButtonEdit();
virtual void setSizeButton(QSize size = QSize(0,0)) const;
virtual void setSizeButton(int w, int h) const;
virtual void setIconButton(const QIcon &icon) const;
virtual void setIconSizeButton(const QSize &size) const;
protected:
void showEvent(QShowEvent *event);
private:
void init();
private:
QPushButton *m_pPushButton;
QHBoxLayout *m_pHBoxLayout;
private slots:
void sl_PushButton_Visible(QString str);
signals:
void buttonClicked(bool);
};
#endif // CUSTOMBUTTONEDIT_H
源文件: custombuttonedit.cpp
#include "custombuttonedit.h"
/**
* @brief 构造函数,UI设计将QLineEdit提升为本类,使用的是该构造函数
* @param [in] parent 父窗口
* @author GGX
* @date 2020-5-20
*/
CustomButtonEdit::CustomButtonEdit(QWidget *parent) :
QLineEdit(parent)
{
init();
}
/**
* @brief 构造函数,带图标按钮
* @param [in] parent 父窗口,icon 图标
* @author GGX
* @date 2020-5-20
*/
CustomButtonEdit::CustomButtonEdit(const QIcon icon, QWidget *parent) :
QLineEdit(parent)
{
init();
m_pPushButton->setIcon(icon);
}
/**
* @brief 构造函数,带文字按钮
* @param [in] parent 父窗口,text 文字
* @author GGX
* @date 2020-5-20
*/
CustomButtonEdit::CustomButtonEdit(const QString text, QWidget *parent) :
QLineEdit(parent)
{
init();
m_pPushButton->setText(text);
}
/**
* @brief 构造函数,带图标和文字按钮
* @param [in] parent 父窗口,icon 图标, text 文字
* @author GGX
* @date 2020-5-20
*/
CustomButtonEdit::CustomButtonEdit(const QIcon icon, const QString text, QWidget *parent) :
QLineEdit(parent)
{
init();
m_pPushButton->setIcon(icon);
m_pPushButton->setText(text);
}
CustomButtonEdit::~CustomButtonEdit()
{
delete m_pPushButton;
}
/**
* @brief 设置按钮大小,size(0,0)即设置默认大小
* @param [in] size
* @author GGX
* @date 2020-5-20
*/
void CustomButtonEdit::setSizeButton(QSize size) const
{
//默认大小,比父窗口的高小6,即QLineEdit,
if(size.width() == 0 && size.height() == 0)
size = QSize(this->height() - 6, this->height() - 6);
m_pPushButton->setFixedSize(size);
}
/**
* @brief 设置按钮大小
* @param [in] w,h
* @author GGX
* @date 2020-5-20
*/
void CustomButtonEdit::setSizeButton(int w, int h) const
{
m_pPushButton->setFixedSize(w, h);
}
/**
* @brief 设置按钮图标
* @param [in] w,h
* @author GGX
* @date 2020-5-20
*/
void CustomButtonEdit::setIconButton(const QIcon &icon) const
{
m_pPushButton->setIcon(icon);
}
/**
* @brief 设置按钮图标大小
* @param [in] w,h
* @author GGX
* @date 2020-5-20
*/
void CustomButtonEdit::setIconSizeButton(const QSize &size) const
{
m_pPushButton->setIconSize(size);
}
/**
* @brief 重写showEvent,为设置按钮大小,此步骤关键
* @param [in] event
* @author GGX
* @date 2020-5-20
*/
void CustomButtonEdit::showEvent(QShowEvent *event)
{
if(event == NULL)
return ;
setSizeButton();
}
/**
* @brief 初始化函数
* @param 无
* @author GGX
* @date 2020-5-20
*/
void CustomButtonEdit::init()
{
m_pPushButton = new QPushButton();
m_pHBoxLayout = new QHBoxLayout();
connect(m_pPushButton, SIGNAL(clicked(bool)), this , SLOT(clear()));
connect(this, SIGNAL(textChanged(QString)), this, SLOT(sl_PushButton_Visible(QString)));
// 按钮已经是edit的一部分了,不应该再能被单独聚焦,否则可能导致误触
m_pPushButton->setFocusPolicy(Qt::NoFocus);
// 设置鼠标,否则点击按钮时仍然会显示输入内容时的鼠标图标
m_pPushButton->setCursor(Qt::ArrowCursor);
m_pPushButton->setStyleSheet("QPushButton{border: none;},QPushButton:hover{border: none;}");
m_pHBoxLayout->addStretch();
m_pHBoxLayout->addWidget(m_pPushButton);
// 设置组件右对齐,按钮会显示在edit的右侧
m_pHBoxLayout->setAlignment(Qt::AlignRight);
//设置边距
m_pHBoxLayout->setContentsMargins(0, 0, 2, 0);
this->setLayout(m_pHBoxLayout);
// 设置输入区域的范围,从edit的最左到按钮的最左(包含了按钮设置的buttonMargin)
this->setTextMargins(0, 0, this->height() + 1, 0);
m_pPushButton->setVisible(false);
}
/**
* @brief 槽函数,控制按钮是否显示,有内容就显示,无内容不显示
* @param 无
* @author GGX
* @date 2020-5-20
*/
void CustomButtonEdit::sl_PushButton_Visible(QString str)
{
if(str.isEmpty())
{
m_pPushButton->setVisible(false);
}
else
{
m_pPushButton->setVisible(true);
}
}