ui控件库——PushButton系列

作者：小 琛
欢迎转载，请标明出处

PushButton在ui库中的使用

QT中提供了QPushButton，基于它我们可以实现button的绝大多数功能，同时配合样式修改，即可实现自定义控件库PushButton的效果。

一般的Button在产品中可能有的问题

在实际的产品中，针对button往往需要考虑以下几个问题

• 多语言问题。通常情况下，我们button在确定好大小后，将不再改变。而button里的内容，由于多语言则可能导致各种显示问题。（例如：中文确定退出，俄文Определение выхода ）
• 文本更迭问题。很多场景下，button中的文字不是固定的，随着业务场景而改变。
• 按钮的状态问题。按钮通常有：normal、hover、click状态，需要对他们进行定义。

设计一个PushButton控件

现在我们使用QT，来设计一个自己的PushButton

• 实现控件类，继承自QPushButton
• 通常来说，我们自定义的QPushButton，高度是固定的(若不固定，在构建时添加高度参数即可)，那么在构造函数时，接口参数可定义为：width、text、parent
• 重写event事件，实现normal、hover、click三种状态；重写paintEvent事件，实现控件样式的绘制
• 当外界使用时，直接将该类当作普通QPushButton使用，同时可以使用connect进行绑定等

example

#include <QPushButton>
class MyPushButton : public QPushButton {
    Q_OBJECT
public:
    MyPushButton (int width, const QString& text, QWidget* parent = nullptr);
    ~MyPushButton () = default;

    void updateText(const QString& text); // 提供给构建后，修改文本的接口

protected:
    bool event(QEvent* event);
    void paintEvent(QPaintEvent* event);

private:
    QColor getBackgroundColor() const;
    QColor getTextColor() const;
    QFont getTextFont() const;
    void adjustText();
    QString elideText(const QString& text, int width, const QFont& font);
    QColor opacityToAlphaColor(int red, int green, int blue, double opacity)；

private:
    int textMargin_{8};
    QString text_;
    QString displayText_;
    ButtonStatus status_{ButtonStatus::Status_Normal};
};

#include "MyPushButton.h"
#include <QPaintEvent>
#include <QSvgRenderer>
#include <QStyleOption>
#include <QFontMetrics>
MyPushButton::MyPushButton (int width, const QString& text, QWidget* parent) : QPushButton(parent), text_(text) {
		setFlat(true); // 取消边框和背景色
		setFocusPolicy(Qt::ClickFocus); // 设置点击获取焦点
		const int fixedHeight = 32;
		setFixedSize(width, fixedHeight);
		adjustText(); // 格式化输入文本
	}

	void MyPushButton::updateText(const QString& text) {
		text_ = text;
		adjustText();
		update();
	}

	bool MyPushButton::event(QEvent* event) {
		switch (event->type()) {
		case QEvent::Enter:
			status_ = ButtonStatus::Status_Hover;
			update();
			break;
		case QEvent::Leave:
			status_ = ButtonStatus::Status_Normal;
			update();
			break;
		case QEvent::MouseButtonPress:
			status_ = ButtonStatus::Status_Press;
			update();
			break;
		case QEvent::MouseButtonRelease:
			if (geometry().contains(parentWidget()->mapFromGlobal(QCursor::pos()))) {
				status_ = ButtonStatus::Status_Hover;
			}
			else {
				status_ = ButtonStatus::Status_Normal;
			}

			update();
			break;
		default:
			break;
		}

		return QPushButton::event(event);
	}

	void MyPushButton::paintEvent(QPaintEvent* event) {
		QPainter painter(this);
		painter.save();
		painter.setRenderHint(QPainter::Antialiasing, true);
		painter.setPen(Qt::NoPen);

		const auto radiusValue{ 3 };
		painter.setBrush(QBrush(getBackgroundColor()));
		painter.drawRoundedRect(rect(), radiusValue, radiusValue);

		const auto textX = textMargin_;
		const auto textY = 0;
		const auto textWidth = width() - textMargin_ * 2;
		const auto textHeight = height();

		painter.setFont(getTextFont());
		painter.setPen(QPen(getTextColor(), 1));
		painter.drawText(QRect{ textX, textY, textWidth, textHeight }, Qt::AlignCenter, displayText_);
		painter.restore();
	}

	QColor MyPushButton::getBackgroundColor() const {
		QColor color = Qt::transparent;
		switch (status_) {
		case ButtonStatus::Status_Normal:
			color = opacityToAlphaColor(2, 191, 255, 1);
			break;
		case ButtonStatus::Status_Hover:
			color = return opacityToAlphaColor(0, 209, 255, 1);
			break;
		case ButtonStatus::Status_Press:
			color = opacityToAlphaColor(2, 191, 255, 1);
			break;
		default:
			break;
		}

		return color;
	}

	QColor MyPushButton::getTextColor() const {
		QColor color = Qt::transparent;
		switch (status_) {
		case ButtonStatus::Status_Normal:
			color = opacityToAlphaColor(0, 0, 0, 1);
			break;
		case ButtonStatus::Status_Hover:
			color = opacityToAlphaColor(0, 0, 0, 1);
			break;
		case ButtonStatus::Status_Press:
			color = opacityToAlphaColor(0, 0, 0, 0.6);
			break;
		default:
			break;
		}

		return color;
	}

	QFont MyPushButton::getTextFont() const { return NemuUiLib::NemuFont::getFont14(); }

	void MyPushButton::adjustText() {
		const auto textWidth = width() - textMargin_ * 2;
		displayText_ = TextUtil::elideText(text_, textWidth, getTextFont());

		if (text_ != displayText_) {
			setToolTip(text_);
		}
	}
   
   QString MyPushButton::elideText(const QString& text, int width, const QFont& font) {
        QFontMetrics fontMetrics(font);

        if (fontMetrics.width(text) > width) {
            return QFontMetrics(font).elidedText(text, Qt::ElideRight, width);
        }

        return text;
    }

   QColor MyPushButton::opacityToAlphaColor(int red, int green, int blue, double opacity) {
    	const int alpha = round(opacity * 255);
    	return QColor(red, green, blue, alpha);
   }

    auto testButton = new MyPushButton7(240, tr("testing"), this);
    connect(testButton , &QPushButton::clicked, this, [=](){});

代码解析：

• 类继承QPushButton，可自定义构建宽度和文本，同时将输入的文本结合输入的宽度以及间隔，实现文本格式化-超出范围显示…
• opacityToAlphaColor是根据R G B A计算得到的QColor
• 核心是重写了event和paintEvent，event实现了对当前状态的更迭，paintEvent结合当前状态，重绘button