Qt实现思维导图功能2『UI设计』

浮生卍流年

已于 2023-07-16 11:27:27 修改

阅读量2k

点赞数 4

分类专栏： Qt实现思维导图文章标签： qt ui 开发语言

于 2022-06-12 22:00:30 首次发布

本文链接：https://blog.csdn.net/qq_40945965/article/details/125246719

版权

Qt实现思维导图专栏收录该内容

7 篇文章 19 订阅

订阅专栏

前文链接：Qt实现思维导图功能1『核心树』

百度网盘体验地址：
链接：https://pan.baidu.com/s/1-be0tDJokpZeqhMEuHQntA 
提取码：4d1w

注：UI窗体风格参考软件：爱莫流程图

效果图
1、动态演示效果：
在这里插入图片描述

2、静态展示图片：
在这里插入图片描述

前文BUG维护

序号	问题
1	维护删除按钮未跟随文本宽度变化的问题
2	删除节点可能奔溃：删除节点时，没有从父节点属性中移除与被删除节点的连线
3	鼠标未双击进入编辑时，任然可以输入文本的问题
4	未过滤鼠标右键双击进入编辑文本状态的问题
5	双击文本节点，遇到“-”等分隔符时，未全部选中文本的问题

新增功能如下

序号	简述	具体功能
1	快捷键	Tab键新建子节点、Del键删除节点
2	节点高亮	选中节点时，该节点至根节点路径高亮
3	编辑菜单	新建、编辑
5	调整菜单	清空、整理、放大、缩小、折叠
6	风格菜单	高亮、线型、主题、大纲（待做）
7	文件菜单	导入（待优化）、保存（待优化）、导出（待做）
8	回撤菜单	撤销（待做）、回撤（待做）
9	节点操作	上级、同级、下级、清空、删除、上移、下移

新增UI如下

序号	简述	具体功能
1	简约提示菜单	简单的悬浮提示效果，例如：”放大“菜单
2	选中提示菜单	拥有选中/未选中两种状态，例如：“高亮”菜单
3	切换提示菜单	拥有两种功能相互切换状态，例如：”折叠/展开“菜单
4	侧滑菜单栏	窗口位置动态变化，形成左侧滑动效果
5	侧滑菜单栏菜单	简单的悬浮提示效果
6	侧滑菜单栏显隐按钮	按钮宽度动态变化，图标动态旋转
7	侧滑功能窗口	窗口位置动态变化，形成左/右侧边滑动效果
8	侧滑功能窗口功能项	常态阴影、悬浮态高亮效果

UI提示菜单代码
1、UML类图
在这里插入图片描述
2、代码

ToolTipButtonBase基类，提供信息位置类型设置、提示信息文本和提示信息三态图片设置；
enterEvent事件和leaveEvent事件负责设置提示信息的显隐，paintEvent事件负责绘图。

#pragma once

/*
 * 思维导图-提示按钮基类
 */

#include <QPushButton>

class ToolTipButtonBase : public QPushButton
{
public:
	enum PositionType
	{
		RIGHT,	// 右侧
		BOTTOM,	// 下侧
		LEFT,	// 左侧
		TOP		// 上侧	
	};

	ToolTipButtonBase(QWidget *parent = nullptr);
	virtual ~ToolTipButtonBase();

	// 获取提示信息位置类型
	PositionType positionType();
	// 设置图片
	void setPixmap(const QPixmap &pixmap, const QPixmap &hoverPixmap, const QPixmap &disablePixmap);
	// 设置提示信息文本和位置类型
	void setToolTip(const QString &text, PositionType posType);

protected:
	virtual void paintEvent(QPaintEvent *event) override;
	virtual void enterEvent(QEvent *event) override;
	virtual void leaveEvent(QEvent *event) override;

protected:
	QString m_toolTip;			// 提示信息文本
	PositionType m_posType;		// 提示信息位置
	QPixmap m_pixmap;			// 常态图片
	QPixmap m_hoverPixmap;		// 悬浮态图片
	QPixmap m_disablePixmap;	// 禁用态图片
	QColor m_color;				// 文本颜色
	QColor m_hoverColor;		// 文本悬浮颜色
	QColor m_disableColor;		// 文本禁用颜色
	QColor m_bgColor;			// 背景颜色
	QColor m_bgHoverColor;		// 背景悬浮颜色
	QColor m_bgDisableColor;	// 背景禁用颜色

	bool m_hover;				// 悬浮
	bool m_disable;				// 使能状态
};

#include "ToolTipButtonBase.h"
#include "../ToolTip/FuncToolTip.h"
#include <QPainter>

ToolTipButtonBase::ToolTipButtonBase(QWidget *parent /*= nullptr*/)
	: QPushButton(parent)
{
	m_posType = RIGHT;						// 提示信息位置
	m_color = QColor(51, 51, 51);			// 文本颜色
	m_hoverColor = QColor(57, 130, 252);	// 文本悬浮颜色
	m_disableColor = QColor("#bfbfbf");		// 文本禁用颜色
	m_bgColor = Qt::white;					// 背景颜色
	m_bgHoverColor = QColor(238, 244, 255);	// 背景悬浮颜色
	m_bgDisableColor = Qt::white;			// 背景禁用颜色

	m_hover = false;						// 悬浮
	m_disable = false;						// 使能状态
}

ToolTipButtonBase::~ToolTipButtonBase()
{

}

ToolTipButtonBase::PositionType ToolTipButtonBase::positionType()
{
	return m_posType;
}

void ToolTipButtonBase::setPixmap(const QPixmap &pixmap, const QPixmap &hoverPixmap, const QPixmap &disablePixmap)
{
	m_pixmap = pixmap;
	m_hoverPixmap = hoverPixmap;
	m_disablePixmap = disablePixmap;
	update();
}

void ToolTipButtonBase::setToolTip(const QString &text, PositionType posType)
{
	m_toolTip = text;
	m_posType = posType;
	FuncToolTip::setToolTipVisible(false);	// ①
	FuncToolTip::setToolTipInfo(this, m_toolTip);
	FuncToolTip::setToolTipVisible(true);	// ②
	update();

	// 备注：若不设置①②两行代码，则提示窗口不更新文本。。。
}

void ToolTipButtonBase::paintEvent(QPaintEvent *event)
{
	int width = this->width();
	int height = this->height();

	QPainter painter(this);
	painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

	// 绘制背景
	painter.setPen(Qt::NoPen);
	painter.setBrush(!isEnabled() ? m_bgDisableColor : (m_hover ? m_bgHoverColor : m_bgColor));
	painter.drawRect(rect());
	// 绘制图片
	painter.drawPixmap(width * 0.3, height * 0.16, width * 0.4, height * 0.34, !isEnabled() ? m_disablePixmap : (m_hover ? m_hoverPixmap : m_pixmap));
	// 绘制文本
	painter.setPen(QPen(!isEnabled() ? m_disableColor : (m_hover ? m_hoverColor : m_color)));
	painter.drawText(QRect(0, height * 0.62, width, height * 0.26), Qt::AlignCenter, text());
}

void ToolTipButtonBase::enterEvent(QEvent *event)
{
	m_hover = true;
	FuncToolTip::setToolTipInfo(this, m_toolTip);
	FuncToolTip::setToolTipVisible(true);
}

void ToolTipButtonBase::leaveEvent(QEvent *event)
{
	m_hover = false;
	FuncToolTip::setToolTipVisible(false);
}

简约提示菜单

#pragma once

/*
 * 思维导图-菜单功能提示按钮
 */

#include "../FuncWidget/ToolTipButtonBase.h"

class MenuToolTipButton : public ToolTipButtonBase
{
public:
	MenuToolTipButton(QWidget *parent = nullptr);
	~MenuToolTipButton();

	void setPixmap(const QPixmap &pixmap);

protected:
	virtual void paintEvent(QPaintEvent *event) override;
};

#include "MenuToolTipButton.h"
#include <QPainter>

MenuToolTipButton::MenuToolTipButton(QWidget *parent /*= nullptr*/)
	: ToolTipButtonBase(parent)
{
	m_bgHoverColor = QColor(243, 243, 243);
	m_bgDisableColor = Qt::white;
}

MenuToolTipButton::~MenuToolTipButton()
{

}

void MenuToolTipButton::setPixmap(const QPixmap &pixmap)
{
	m_pixmap = pixmap;
	update();
}

void MenuToolTipButton::paintEvent(QPaintEvent *event)
{
	int width = this->width();
	int height = this->height();

	QPainter painter(this);
	painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

	// 绘制背景
	painter.setPen(Qt::NoPen);
	painter.setBrush(m_hover ? m_bgHoverColor : m_bgColor);
	painter.drawRect(rect());
	// 绘制图片
	painter.drawPixmap(width * 0.3, height * 0.16, width * 0.4, height * 0.34, m_pixmap);
	// 绘制文本
	painter.setPen(QPen(m_disable ? m_disableColor : m_color));
	painter.drawText(QRect(0, height * 0.62, width, height * 0.26), Qt::AlignCenter, text());
}

选中提示菜单

#pragma once

/*
 * 思维导图-菜单功能提示：状态选中按钮
 */

#include "MenuToolTipButton.h"

class MenuToolTipCheckButton : public MenuToolTipButton
{
public:
	MenuToolTipCheckButton(QWidget *parent = nullptr);
	~MenuToolTipCheckButton();

	void setPixmap(const QPixmap &pixmap, const QPixmap &checkedPixmap);

protected:
	virtual void paintEvent(QPaintEvent *event) override;
};

#include "MenuToolTipCheckButton.h"
#include <QPainter>

MenuToolTipCheckButton::MenuToolTipCheckButton(QWidget *parent /*= nullptr*/)
	: MenuToolTipButton(parent)
{

}

MenuToolTipCheckButton::~MenuToolTipCheckButton()
{

}

void MenuToolTipCheckButton::setPixmap(const QPixmap &pixmap, const QPixmap &checkedPixmap)
{
	m_pixmap = pixmap;
	m_hoverPixmap = checkedPixmap;
	update();
}

void MenuToolTipCheckButton::paintEvent(QPaintEvent *event)
{
	int width = this->width();
	int height = this->height();

	QPainter painter(this);
	painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

	// 绘制背景
	painter.setPen(Qt::NoPen);
	painter.setBrush(m_hover ? m_bgHoverColor : m_bgColor);
	painter.drawRect(rect());
	// 绘制图片
	painter.drawPixmap(width * 0.3, height * 0.16, width * 0.4, height * 0.34, isChecked() ? m_hoverPixmap : m_pixmap);
	// 绘制文本
	painter.setPen(QPen(isChecked() ? m_hoverColor : m_color));
	painter.drawText(QRect(0, height * 0.62, width, height * 0.26), Qt::AlignCenter, text());
}

切换提示菜单

#pragma once

/*
 * 思维导图-菜单功能提示：文本切换按钮
 */

#include "MenuToolTipButton.h"

class MenuToolTipChangeButton : public MenuToolTipButton
{
public:
	MenuToolTipChangeButton(QWidget *parent = nullptr);
	~MenuToolTipChangeButton();

	void setButtonText(const QString &text, const QString &changeText);
	void setPixmap(const QPixmap &pixmap, const QPixmap &changePixmap);
	void change();
	bool changed();

protected:
	virtual void paintEvent(QPaintEvent *event) override;

private:
	QString m_text;			// 文本
	QString m_changeText;	// 切换文本
	bool m_change;			// 切换
};

#include "MenuToolTipChangeButton.h"
#include "../ToolTip/FuncToolTip.h"
#include <QPainter>

MenuToolTipChangeButton::MenuToolTipChangeButton(QWidget *parent /*= nullptr*/)
	: MenuToolTipButton(parent)
{
	m_change = false;	// 切换
	connect(this, &QPushButton::clicked, this, [&]() {
		m_change = !m_change;
		setToolTip(m_change ? m_changeText : m_text, m_posType);
		update();
	});
}

MenuToolTipChangeButton::~MenuToolTipChangeButton()
{

}

void MenuToolTipChangeButton::setButtonText(const QString &text, const QString &changeText)
{
	m_text = text;
	m_changeText = changeText;
	update();
}

void MenuToolTipChangeButton::setPixmap(const QPixmap &pixmap, const QPixmap &changePixmap)
{
	m_pixmap = pixmap;
	m_hoverPixmap = changePixmap;
}

void MenuToolTipChangeButton::change()
{
	m_change = !m_change;
	setToolTip(m_change ? m_changeText : m_text, m_posType);
	FuncToolTip::setToolTipVisible(false);
}

bool MenuToolTipChangeButton::changed()
{
	return m_change;
}

void MenuToolTipChangeButton::paintEvent(QPaintEvent *event)
{
	int width = this->width();
	int height = this->height();

	QPainter painter(this);
	painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

	// 绘制背景
	painter.setPen(Qt::NoPen);
	painter.setBrush(m_hover ? m_bgHoverColor : m_bgColor);
	painter.drawRect(rect());
	// 绘制图片
	painter.drawPixmap(width * 0.3, height * 0.16, width * 0.4, height * 0.34, m_change ? m_hoverPixmap : m_pixmap);
	// 绘制文本
	painter.setPen(QPen(m_disable ? m_disableColor : m_color));
	painter.drawText(QRect(0, height * 0.62, width, height * 0.26), Qt::AlignCenter, m_change ? m_changeText : m_text);
}