Qt实现侧边栏显示隐藏以及自定义提示框

1、目的

  最近在工作中需要实现一个Qt的侧边栏，通过按钮控制显示和隐藏，此外还要求实现自定义气泡提示框，最终参考网上知识进行了实现，效果如下：
1、窗口控件大小可以随窗体自由缩放；
2、侧边栏按钮可以控制侧边栏的显示隐藏；
3、侧边栏按钮可以控制侧边栏内容的切换；
4、实现自定义气泡提示框，提示框形状依据需求自绘；
5、鼠标悬停到按钮控件时候可以弹出自定义气泡提示框，移开时提示框消失。

完整源码下载地址：源码地址

2、侧边栏的显示与隐藏

  侧边栏采用一个QWidget作为父窗口，嵌套一个QStackedWidget作为内容显示控件，侧边按钮栏中添加按钮设定按钮图片，点击“显示/隐藏”按钮控制侧边栏的显示和隐藏，同时切换按钮图片。

void MyGlobalMap::navigateButtonClick()
{
	QPushButton* btn = (QPushButton*)sender();
	QString sName = btn->objectName();

	if (sName == "sideButton")
	{
		if (ui.sidewidget->isHidden())
		{
			ui.sidewidget->show();
			ui.sideButton->setIcon(QIcon(":/images/left.png"));
		}
		else
		{
			ui.sidewidget->hide();
			ui.sideButton->setIcon(QIcon(":/images/right.png"));
		}
	}
}

3、自定义气泡消息提示框的绘制

  自定义对话框的绘制主要难点在于指示小三角的绘制。本文采用一个QWidget作为父窗口，嵌套一个QWidget作为子窗口，其中在初始化中对子窗口QWidget进行重绘，加入指引小箭头。

实现代码：

#pragma once

#include 
#include "ui_TransferlistWidget.h"

const int TRIANGLE_WIDTH = 10;               // 小三角的宽度;
const int TRIANGLE_HEIGHT = 30;              // 小三角的高度;
const int BORDER_RADIUS = 15;                // 窗口边角的弧度;

class TransferlistWidget : public QWidget
{
	Q_OBJECT

public:
	TransferlistWidget(QWidget *parent = nullptr);
	~TransferlistWidget();

	// 小三角相对于控件的位置
	enum Derection {
		left,
		right,
		up,
		down
	};
	// 设置小三角偏移量
	void setStartPos(int nOffset);

	// 设置小三角宽和高;
	void setTriangleInfo(int width, int height);

	// 设置小三角的位置
	void setDerection(Derection d);

	// 重载move函数，(x,y)是气泡窗口小三角的坐标
	void myMove(QPoint point);

protected:
	void paintEvent(QPaintEvent*);

private:
	Ui::TransferlistWidgetClass ui;

	// 小三角的方位
	Derection m_derect;

	// 小三角的偏移量
	int m_offset;
	// 小三角的宽度
	int m_triangleWidth;
	// 小三角高度
	int m_triangleHeight;
};

主要代码：

//设定无边框  背景透明
ui.setupUi(this);
setWindowFlags(Qt::FramelessWindowHint);
setAttribute(Qt::WA_TranslucentBackground);

// 绘制小三角
void TransferlistWidget::paintEvent(QPaintEvent*)
{
	QPainter painter(this);
	painter.setRenderHint(QPainter::Antialiasing, true);
	painter.setPen(Qt::NoPen);
	painter.setBrush(QColor(0, 0, 0, 38));

	QPainterPath drawPath;

	// 小三角区域;
	QPolygon trianglePolygon;
	QRect myRect(ui.widget->x(), ui.widget->y(), ui.widget->width(), ui.widget->height());

	// 设置小三的具体位置
	int tri_pos_x = 0, tri_pos_y = 0;
	switch (m_derect)
	{
	case left:
	{
		// 小三上边点的位置
		tri_pos_x = myRect.x();
		tri_pos_y = myRect.y();
		trianglePolygon << QPoint(tri_pos_x, tri_pos_y);
		trianglePolygon << QPoint(tri_pos_x - m_triangleWidth, tri_pos_y + m_triangleHeight / 2);
		trianglePolygon << QPoint(tri_pos_x, tri_pos_y + m_triangleHeight);
	}
	break;

	default:
		break;
	}
	drawPath.addRoundedRect(myRect, BORDER_RADIUS, BORDER_RADIUS);
	drawPath.addPolygon(trianglePolygon);
	painter.drawPath(drawPath);
}

// 设定显示位置
void TransferlistWidget::myMove(QPoint point)
{
	int top_left_x = point.x(), top_left_y = point.y();

	switch (m_derect) 
	{
	case left:
	{
		//top_left_x =  m_triangleWidth;
		top_left_y = point.y() - m_triangleHeight / 2;
	
		move(QPoint(top_left_x, top_left_y));
	}
		break;
		
	default:
		break;
	}
}

4、显示和隐藏提示框

当鼠标放在按钮上时显示自定义气泡提示框，移开后提示框消失。

实现代码：

// 设置按钮提示窗口
	m_TransferlistDlg = new TransferlistWidget(this);
	m_TransferlistDlg->setDerection(TransferlistWidget::left);
	m_TransferlistDlg->setStartPos(20);
	m_TransferlistDlg->resize(400,300);
	m_TransferlistDlg->hide();

	//为QPushButton和QLabel安装事件过滤器
	ui.transferlistButton->installEventFilter(this);
	m_TransferlistDlg->installEventFilter(this);

// 重载虚函数
virtual bool eventFilter(QObject* watched, QEvent* event);

// 虚函数实现
bool MyGlobalMap::eventFilter(QObject* watched, QEvent* event)
{

	if (ui.transferlistButton == watched || m_TransferlistDlg == watched)
	{
		if (QEvent::Enter == event->type()) 
		{            
			//鼠标进入
			if (m_TransferlistDlg->isHidden())
			{ 
				m_TransferlistDlg->show();
				QPoint point = ui.transferlistButton->pos();
				m_TransferlistDlg->myMove(point);

				m_TransferlistDlg->raise();//显示最顶层
				return true;
			}
		}
		else if (QEvent::Leave == event->type()) 
		{ 
			//鼠标离开
			if (!m_TransferlistDlg->isHidden())
			{
				//判断鼠标是否在控件上
				if (!ui.transferlistButton->geometry().contains(this->mapFromGlobal(QCursor::pos()))
					&& !m_TransferlistDlg->geometry().contains(this->mapFromGlobal(QCursor::pos())))
				{
					m_TransferlistDlg->hide();
					return true;
				}
			}
		}
	}

	return QWidget::eventFilter(watched, event);
}