Qt 设置窗体透明

一、前言

在音频开发中，窗体多半为半透明、圆角窗体，如下为Qt 5.5 VS2013实现半透明方法总结。

二、半透明方法设置

1、窗体及子控件都设置为半透明

1）setWindowOpacity(0.8);//参数范围为0-1.0，通过QSlider控件做成透明度控制条

2）无边框设置

setWindowFlags(Qt::FramelessWindowHint);

3）窗体圆角设置

setAttribute(Qt::WA_TranslucentBackground);

通过paintEvent绘制窗体背景色与圆角

void Widget::paintEvent(QPaintEvent *event)

{

QPainter painter(this);

painter.setRenderHint(QPainter::Antialiasing); // 反锯齿;

painter.setBrush(QBrush(QColor("#616F76")));//窗体背景色

painter.setPen(Qt::transparent);

QRect rect = this->rect();//rect为绘制大小

rect.setWidth(rect.width() - 1);

rect.setHeight(rect.height() - 1);

painter.drawRoundedRect(rect, 15, 15);//15为圆角角度

//也可用QPainterPath 绘制代替 painter.drawRoundedRect(rect, 15, 15);

//QPainterPath painterPath;

//painterPath.addRoundedRect(rect, 15, 15);//15为圆角角度

//painter.drawPath(painterPath);

QWidget::paintEvent(event);

}
2、通过图片贴图，设置局部透明

1）窗体设置

setAttribute(Qt::WA_TranslucentBackground);//背景半透明属性设置

setWindowFlags(Qt::FramelessWindowHint);//无边框窗体设置

2）采用样式加载图片

ui->m_BgWidget->setStyleSheet("background-image:url(:/images/bg.png);");

注意：m_BgWidget为窗体对象的子窗体，不能直接设置QWidget

3）效果图如下（录制gif时刷新有点延时）

3、通过paintEvent重绘背景色透明度

1）窗体属性设置

setAttribute(Qt::WA_TranslucentBackground);//背景半透明属性设置

setWindowFlags(Qt::FramelessWindowHint);//无边框窗体设置

m_BgColor = QColor("#616F76");//默认背景色
m_BgColor.setAlphaF(0.8);
this->setContextMenuPolicy(Qt::CustomContextMenu);
connect(this, SIGNAL(customContextMenuRequested(const QPoint &)),
this, SLOT(showContextMenuSlot(const QPoint &)));//右击出现菜单

2）右击出现菜单

void Widget::showContextMenuSlot(const QPoint &pos)

{

QAction *act = NULL;

if(NULL == m_Menu)

{

m_Menu = new QMenu();//菜单

m_Actions.clear();//记录所有Action

act = m_Menu->addAction("1.0", this, SLOT(funcSlot()));

m_Actions << act;

act->setCheckable(true);

act = m_Menu->addAction("0.8", this, SLOT(funcSlot()));

m_Actions << act;

act->setCheckable(true);//设置可选中

act->setChecked(true);//设置被选中

act = m_Menu->addAction("0.5", this, SLOT(funcSlot()));

m_Actions << act;

act->setCheckable(true);

act = m_Menu->addAction("0.3", this, SLOT(funcSlot()));

m_Actions << act;

act->setCheckable(true);

act = m_Menu->addAction("0.1", this, SLOT(funcSlot()));

m_Actions << act;

act->setCheckable(true);

}

m_Menu->exec(mapToGlobal(pos));//弹出菜单

}

3）选择菜单Action，修改背景颜色透明度

void Widget::funcSlot()

{

QAction *act = qobject_cast<QAction *>(sender());//获取选中的Action

if(act)

{

double alpha = act->text().toDouble();

m_BgColor.setAlphaF(alpha);//背景色透明度修改

foreach(QAction *action, m_Actions)//去除其余选中，互斥

{

if(act != action)

action->setChecked(false);

}

this->update();//刷新界面

}

}

4）通过paintEvent重绘背景色

void Widget::paintEvent(QPaintEvent *event)

{

QPainter painter(this);

painter.setRenderHint(QPainter::Antialiasing); // 反锯齿;

painter.setBrush(QBrush(m_BgColor));//修改后的背景色

painter.setPen(Qt::transparent);

QRect rect = this->rect();//rect为绘制窗体大小

rect.setWidth(rect.width() - 1);

rect.setHeight(rect.height() - 1);

painter.drawRoundedRect(rect, 15, 15);//15为圆角角度

//也可用QPainterPath 绘制代替 painter.drawRoundedRect(rect, 15, 15);

//QPainterPath painterPath;

//painterPath.addRoundedRect(rect, 15, 15);

//painter.drawPath(painterPath);

QWidget::paintEvent(event);

}

5）效果如下（录频有点重影）

4、通过paintEvent采用Clear模式绘图，实现局部透明

1）窗体属性设置

m_Margin = 60;//各个绘制图形与边框的距离

m_BgColor = QColor("#00BFFF");//窗体背景色
installEventFilter(this);//事件过滤器，用于鼠标按下后界面移动
setWindowFlags(Qt::FramelessWindowHint);//无边框窗体设置
setAttribute(Qt::WA_TranslucentBackground);//背景半透明属性设置

2）画笔属性设置

void Widget::paintEvent(QPaintEvent *)

{

QPainter painter(this);

painter.setPen(Qt::NoPen);

painter.setBrush(m_BgColor);

painter.drawRoundedRect(this->rect(), 15, 15);//设置整体窗体圆角为15°

painter.setCompositionMode(QPainter::CompositionMode_Clear);//设置Clear绘图模式

//绘制三角形

drawTriangle(&painter);

//绘制圆

drawCircular(&painter);

//绘制矩形

drawRectangle(&painter);

}

3）绘制三角形

void Widget::drawTriangle(QPainter *painter)

{

QPainterPath path;

int width = this->width() / 2;

int height = this->height() / 2;

//顶点

int topX = width / 2;

int topY = m_Margin;

//左下顶点

int leftX = m_Margin;

int leftY = height - m_Margin;

//右下顶点

int rightX = width - m_Margin;

int rightY = height - m_Margin;

path.moveTo(topX, topY);//起点

path.lineTo(leftX, leftY);//画线段1

path.lineTo(rightX, rightY);//画线段2

path.lineTo(topX, topY);//画线段3

painter->fillPath(path, QBrush(m_BgColor));//绘制三角形

}

4）绘制圆

void Widget::drawCircular(QPainter *painter)

{

int width = this->width() / 2;

int height = this->height() / 2;

int x = width + width / 2;//X向坐标

int y = height / 2; //Y向坐标

int r = width / 2 - m_Margin;

//第一个参数为中心点，r为x向、y向长度（不一致时可绘制椭圆）

painter->drawEllipse(QPoint(x, y), r, r);

}

5）绘制矩形

void Widget::drawRectangle(QPainter *painter)

{

int width = this->width() / 2;

int height = this->height() / 2;

int rectWidth = width - 2 * m_Margin;//矩形宽度

int rectHeight = height - 2 * m_Margin;//矩形高度

int rectX = width - rectWidth / 2;//矩形X向长度

int rectY = height + m_Margin;//矩形Y向长度

painter->drawRect(QRect(rectX, rectY, rectWidth, rectHeight));

}

6）运行效果