0


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)运行效果

标签: qt ui 开发语言

本文转载自: https://blog.csdn.net/QtCompany/article/details/129246026
版权归原作者 Qt开发老杰 所有, 如有侵权,请联系我们删除。

“Qt 设置窗体透明”的评论:

还没有评论