利用颜色线性渐变实现-透明玻璃效果按钮

透明玻璃效果按钮效果图：

1. 使用颜色线性渐变设置绘制刷子：

QRectF button_rect = this->geometry();
QLinearGradient gradient(0, 0, 0, button_rect.height());
gradient.setSpread(QGradient::ReflectSpread);
gradient.setColorAt(0.0, button_color);
gradient.setColorAt(0.4, m_shadow);
gradient.setColorAt(0.6, m_shadow);
gradient.setColorAt(1.0, button_color);

QBrush brush(gradient);

painter->setBrush(brush); 

按钮颜色：在鼠标悬浮在按钮上时，使用高亮灰色Qt::lightGray，当鼠标移走时，按钮颜色使用设置的颜色。

阴影颜色：即按钮中间的颜色，可设置。

2. 确定按钮的形状：

QPainterPath painter_path;
painter_path.addRoundedRect(1, 1, button_rect.width() - 2, button_rect.height() - 2, m_roundness, m_roundness);

painter->setClipPath(painter_path);

setClipPath可以设置绘制的形状，m_roundness为圆角矩形的圆角数值。

3. 绘制按钮外观

painter->setOpacity(m_opacity);

painter->drawRoundedRect(1, 1, button_rect.width() - 2, button_rect.height() - 2, m_roundness, m_roundness);

其中设置按钮透明setOpacity为0.5.半透明。

4. 绘制按钮立体光照

painter->setBrush(QBrush(Qt::white));
painter->setPen(QPen(QBrush(Qt::white), 0.01));
painter->setOpacity(0.30);
painter->drawRect(1, 1, button_rect.width() - 2, (button_rect.height() / 2) - 2);

立体光照其实只是在按钮上半部分绘制0.3透明度的白色矩形。本来绘制该上半部分矩形，顶部的角应可以看到。但通过setClipPath确定了按钮形状，因此最终看到效果为圆角矩形。

class CColorButton : public QGraphicsWidget
{
	Q_OBJECT
public:
	CColorButton(QGraphicsItem* parent = NULL);
	~CColorButton(void);

	void		setColor(const QColor color);
	QColor		getColor() const;

	void		setText(const QString text);
	QString		getText() const;

	void		setHighlight(QColor highlight) { m_highlight = highlight; }
	void		setShadow(QColor shadow)		{ m_shadow = shadow; }
	void		setOpacity(qreal opacity)		{ m_opacity = opacity; }
	void		setRoundness(int roundness)	{ m_roundness = roundness; }

signals:
	void		clicked();

protected:
	virtual void	paint( QPainter* painter, const QStyleOptionGraphicsItem* option, QWidget* widget  = 0 );
	virtual void	mousePressEvent( QGraphicsSceneMouseEvent *event );
	virtual void	hoverEnterEvent(QGraphicsSceneHoverEvent *event);
	virtual	void	hoverLeaveEvent(QGraphicsSceneHoverEvent *event);
	virtual void	mouseReleaseEvent(QGraphicsSceneMouseEvent *event);

private:
	QColor		m_color;
	QString		m_Text;

	QColor		m_highlight;
	QColor		m_shadow;
	qreal		m_opacity;
	int			m_roundness;

	bool		m_hovered;
	bool		m_pressed;
};

const int ColorButtonWidth = 60;
const int ColorButtonHeight = 30;

CColorButton::CColorButton( QGraphicsItem* parent /*= NULL*/ )
:QGraphicsWidget(parent),
m_hovered(false), 
m_pressed(false), 
m_color(Qt::gray),
m_highlight(Qt::lightGray),
m_shadow(Qt::black),
m_opacity(1.0),
m_roundness(0)
{
	setAcceptHoverEvents(true);
	setMaximumSize(QSize(ColorButtonWidth, ColorButtonHeight));
	setMinimumSize(QSize(ColorButtonWidth, ColorButtonHeight));
}

CColorButton::~CColorButton(void)
{
}

void CColorButton::setColor( const QColor color )
{
	m_color = color;
	update();
}

QColor CColorButton::getColor() const
{
	return m_color;
}

void CColorButton::setText( const QString text )
{
	m_Text = text;
	update();
}

QString CColorButton::getText() const
{
	return m_Text;
}

void CColorButton::paint( QPainter* painter, const QStyleOptionGraphicsItem* option, QWidget* widget /*= 0 */ )
{
	painter->setRenderHint(QPainter::Antialiasing); 

	QColor button_color = m_hovered?m_highlight:m_color;
	if(m_pressed)
	{
		button_color = m_highlight.darker(250);
	}

	QRectF button_rect = this->geometry();
	QLinearGradient gradient(0, 0, 0, button_rect.height());
	gradient.setSpread(QGradient::ReflectSpread);
	gradient.setColorAt(0.0, button_color);
	gradient.setColorAt(0.4, m_shadow);
	gradient.setColorAt(0.6, m_shadow);
	gradient.setColorAt(1.0, button_color);

	QBrush brush(gradient);
	painter->setBrush(brush); 
	painter->setPen(QPen(QBrush(button_color), 2.0));

	QPainterPath painter_path;
	painter_path.addRoundedRect(1, 1, button_rect.width() - 2, button_rect.height() - 2, m_roundness, m_roundness);
	painter->setClipPath(painter_path);

	painter->setOpacity(m_opacity);
	painter->drawRoundedRect(1, 1, button_rect.width() - 2, button_rect.height() - 2, m_roundness, m_roundness);

	painter->setBrush(QBrush(Qt::white));
	painter->setPen(QPen(QBrush(Qt::white), 0.01));
	painter->setOpacity(0.30);
	painter->drawRect(1, 1, button_rect.width() - 2, (button_rect.height() / 2) - 2);

	QString text = getText();
	if(!text.isNull())
	{
		QFont font = this->font();
		font.setPixelSize(15);
		painter->setFont(font);
		painter->setPen(Qt::white);
		painter->setOpacity(1.0);
		painter->drawText(0, 0, button_rect.width(),
			button_rect.height(), Qt::AlignCenter, text);
	}

}

void CColorButton::mousePressEvent( QGraphicsSceneMouseEvent *event )
{
	m_pressed = true;
	//QGraphicsWidget::mousePressEvent(event);
}

void CColorButton::hoverEnterEvent( QGraphicsSceneHoverEvent *event )
{
	m_hovered = true;
	//setTransformOriginPoint(boundingRect().center());
	//setScale(1.05);
	setCursor(Qt::PointingHandCursor);
	update();
}

void CColorButton::hoverLeaveEvent( QGraphicsSceneHoverEvent *event )
{
	m_hovered = false;
	//setTransformOriginPoint(boundingRect().center());
	//setScale(1.0);
	setCursor(Qt::ArrowCursor);
	update();
}

void CColorButton::mouseReleaseEvent( QGraphicsSceneMouseEvent *event )
{
	emit clicked();
	m_pressed = false;
	//QGraphicsWidget::mouseReleaseEvent(event);
}