Qt如何绘制带小三角的消息框
2023-09-14 09:07:01 时间
一、简述
本篇文章讲述的是如何绘制出一个带小三角的窗口,请看下图,说白了就是绘制一个Rect + Triangle ,然后添加外部阴影效果。
二、代码之路
ArrowWidget.h
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
class ArrowWidget : public QWidget
{
Q_OBJECT
public:
ArrowWidget(QWidget *parent = 0);
// 设置小三角起始位置;
void setStartPos(int startX);
// 设置小三角宽和高;
void setTriangleInfo(int width, int height);
// 设置中间区域widget;
void setCenterWidget(QWidget* widget);
protected:
void paintEvent(QPaintEvent *);
private:
// 小三角起始位置;
int m_startX;
// 小三角的宽度;
int m_triangleWidth;
// 小三角高度;
int m_triangleHeight;
};
#endif
ArrowWidget.cpp
#include "ArrowWidget.h"
#include <QHBoxLayout>
#include <QPainter>
#include <QGraphicsDropShadowEffect>
#define SHADOW_WIDTH 15 // 窗口阴影宽度;
#define TRIANGLE_WIDTH 15 // 小三角的宽度;
#define TRIANGLE_HEIGHT 10 // 小三角的高度;
#define BORDER_RADIUS 5 // 窗口边角的弧度;
ArrowWidget::ArrowWidget(QWidget *parent)
: QWidget(parent)
, m_startX(50)
, m_triangleWidth(TRIANGLE_WIDTH)
, m_triangleHeight(TRIANGLE_HEIGHT)
{
setWindowFlags(Qt::FramelessWindowHint);
setAttribute(Qt::WA_TranslucentBackground);
// 设置阴影边框;
auto shadowEffect = new QGraphicsDropShadowEffect(this);
shadowEffect->setOffset(0, 0);
shadowEffect->setColor(Qt::gray);
shadowEffect->setBlurRadius(SHADOW_WIDTH);
this->setGraphicsEffect(shadowEffect);
setFixedSize(150, 200);
}
void ArrowWidget::setCenterWidget(QWidget* widget)
{
QHBoxLayout* hMainLayout = new QHBoxLayout(this);
hMainLayout->addWidget(widget);
hMainLayout->setSpacing(0);
hMainLayout->setContentsMargins(SHADOW_WIDTH, SHADOW_WIDTH + TRIANGLE_HEIGHT, SHADOW_WIDTH, SHADOW_WIDTH);
}
// 设置小三角显示的起始位置;
void ArrowWidget::setStartPos(int startX)
{
m_startX = startX;
}
void ArrowWidget::setTriangleInfo(int width, int height)
{
m_triangleWidth = width;
m_triangleHeight = height;
}
void ArrowWidget::paintEvent(QPaintEvent *)
{
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing, true);
painter.setPen(Qt::NoPen);
painter.setBrush(QColor(255, 255, 255));
// 小三角区域;
QPolygon trianglePolygon;
trianglePolygon << QPoint(m_startX, m_triangleHeight + SHADOW_WIDTH);
trianglePolygon << QPoint(m_startX + m_triangleWidth / 2, SHADOW_WIDTH);
trianglePolygon << QPoint(m_startX + m_triangleWidth, m_triangleHeight + SHADOW_WIDTH);
QPainterPath drawPath;
drawPath.addRoundedRect(QRect(SHADOW_WIDTH, m_triangleHeight + SHADOW_WIDTH,\
width() - SHADOW_WIDTH * 2, height() - SHADOW_WIDTH * 2 - m_triangleHeight),\
BORDER_RADIUS, BORDER_RADIUS);
// Rect + Triangle;
drawPath.addPolygon(trianglePolygon);
painter.drawPath(drawPath);
}
测试代码
QLabel* textLabel = new QLabel;
textLabel->setAlignment(Qt::AlignCenter);
textLabel->setText("ArrowWidget");
ArrowWidget w;
w.setStartPos(60);
w.setTriangleInfo(20, 12);
w.setFixedSize(QSize(150, 80));
w.setCenterWidget(textLabel);
w.show();
本例子提供了设置三个接口. (1)setStartPos
设置小三角在底部的起始位置,注意不能设置为0,因为整个窗口外部加了阴影边框,所以你所看到的白色矩形区域的起始点为阴影边框宽度。(2)setTriangleInfo 设置小三角的宽和高,这里可以任意调整小三角的宽高,但是得注意设置整个窗口的宽高,使其比例适中。
(3) setCenterWidget
设置窗口中间区域的widget,这里我们可以将自己写好的widget使用此方法设置到窗口的内部。上图中我们嵌入了一个带文字的QLabel。
相关文章
- Qt之读写文件
- qt怎么设置窗口标题_qt自定义标题栏
- qlineedit 不可编辑_qt中获取lineedit文本内容
- Qt概述和Linux下安装
- Qt各类位置信息函数
- 二、Qt定时器与文本编辑器制作《QT 入门到实战》
- C/C++ Qt 数据库与TableView多组件联动
- C/C++ Qt QChart 绘图组件应用
- Qt官方示例-俄罗斯方块
- 聊聊QT添加MySQL驱动依赖的问题
- Linux下Qt安装指南:快速部署Qt运行环境(linux下qt安装教程)
- 如何在Linux系统中安装Qt开发环境(linux下qt安装教程)
- Qt QStandardItemModel用法(超级详细)
- Linux安装Qt:轻松搞定(linux如何安装qt)
- 基于Linux的Qt程序开发实践(linux与qt程序设计)
- Linux下编译Qt程序的技术指南(linux编译qt程序)
- Qt 静态编译在 Linux 的实践(qt静态编译linux)
- 开发linux下 Qt 图形界面开发实践(linux下qt图形界面)
- Linux下的Qt开发编程实践(linux版qt)
- Dooble是用Qt4写的另外一款WebKit浏览器,主要在保护用户隐私方面取胜。虽然它和其他浏览器提供的安全性相差不打,但是也有一些特有的属性比如内含的桌面等。Dooble桌面使得用户可以在增加桌面背景的同时添加应用程序启动,除了从软件包管理器安装外,还可以使用Ubuntu 10.10版本0.07安装,此时的Dooble版本为1.14,同时还要有Qt编码工具如qt4-qmake等。
- 快速搭建Qt环境中的MySQL数据库(qt配置mysql数据库)
- Qt 5.6在Linux上的应用(qt5.6linux)
- 如何在Qt应用程序中访问MySQL数据库?(qt访问mysql)