我可以模糊 qwidget “menu_pos_" 背后的背景吗? [英] Can I blur the background behind qwidget “menu_pos_”?

问题描述

我需要将menu_pos_"块的背景设为半透明并模糊背面的所有内容.并让文字清晰.这种效果通常被称为磨砂玻璃效果.

但不幸的是我只能模糊整个小部件

导入系统从 PyQt5.QtCore 导入(QCoreApplication、QMetaObject、QObject、QPoint、QRect、QSize、QUrl、Qt)从 PyQt5 导入 QtWidgets从 PyQt5 导入 QtGui从 PyQt5 导入 QtCore从 PyQt5.QtCore 导入 QPropertyAnimation, QPoint从 PyQt5.QtWidgets 导入 QGraphicsEffect#或者'''从 PySide2.QtCore 导入(QCoreApplication、QMetaObject、QObject、QPoint、QRect、QSize、QUrl、Qt)从 PySide2 导入 QtWidgets从 PySide2 导入 QtGui从 PySide2 导入 QtCore从 PySide2.QtCore 导入 QPropertyAnimation, QPoint从 PySide2.QtWidgets 导入 QGraphicsEffect'''类 test_mynu(QtWidgets.QWidget):def __init__(self, arr="", parent=None):super(test_mynu, self).__init__(parent)self._expand = False # - self.__expand ;+ self._expand !!!#------menu_pos_block------self.menu_pos_block = QtWidgets.QWidget()模糊 = QtWidgets.QGraphicsBlurEffect(blurRadius=5)self.menu_pos_block.setGraphicsEffect(blur)#------menu_pos_block_layout------self.menu_pos_block_layout = QtWidgets.QHBoxLayout(self.menu_pos_block)self.menu_pos_block_layout.setObjectName(u"menu_pos_block_layout")#------menu_pos_label------self.menu_pos_label = QtWidgets.QLabel()self.menu_pos_label.setText(arr)self.menu_pos_block_layout.addWidget(self.menu_pos_label)# -  -  - 添加 -  -  -躺 = QtWidgets.QHBoxLayout(self)Lay.addWidget(self.menu_pos_block)类 MainWindow(QtWidgets.QMainWindow):#收音机数量定义编号(自我):返回 3def __init__(self, parent=None):super().__init__(parent)self.toggle_animations = QtCore.QSequentialAnimationGroup(self)#------centralwidget------centralwidget = QtWidgets.QWidget()centralwidget.setObjectName(u"centralwidget")self.setCentralWidget(centralwidget)# -  -  - 布局 -  -  -central_w_layout = QtWidgets.QGridLayout(centralwidget)central_w_layout.setObjectName(u"central_w_layout")#------垫片------vs_up = QtWidgets.QSpacerItem(17, 105, QtWidgets.QSizePolicy.Minimum, QtWidgets.QSizePolicy.Expanding)central_w_layout.addItem(vs_up, 0, 1, 1, 1)hs_left = QtWidgets.QSpacerItem(327, 20, QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Minimum)central_w_layout.addItem(hs_left, 1, 0, 1, 1)hs_right = QtWidgets.QSpacerItem(326, 20, QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Minimum)central_w_layout.addItem(hs_right, 1, 2, 1, 1)vs_down = QtWidgets.QSpacerItem(20, 105, QtWidgets.QSizePolicy.Minimum, QtWidgets.QSizePolicy.Expanding)central_w_layout.addItem(vs_down, 2, 1, 1, 1)# -  -  - 堵塞 -  -  -块 = QtWidgets.QWidget()block.setObjectName(u"block")central_w_layout.addWidget(block, 1, 1, 1, 1) ####### -  -  - 布局 -  -  -layout_block = QtWidgets.QVBoxLayout(block)layout_block.setObjectName(u"layout_block")#------menu_block------menu_block = QtWidgets.QWidget()menu_block.setObjectName(u"menu_block")layout_block.addWidget(menu_block) #######------menu_layout------menu_layout = QtWidgets.QHBoxLayout(menu_block)menu_layout.setObjectName(u"menu_layout")self.menu_but = []self.menu_pos = []self.menu_by_pos = 无对于范围内的 i(self.num()):menu_pos_block = test_mynu("menu_{}".format(i))menu_pos_block.setObjectName("menu_pos_{}".format(i))self.menu_pos.append(menu_pos_block)self.menu_pos[i].setGeometry(QRect(menu_pos_block.width(), menu_pos_block.height(), 151, 181))menu_layout.addWidget(self.menu_pos[i])#------menu_block_but------self.menu_block_but = QtWidgets.QWidget()self.menu_block_but.setObjectName(u"menu_block_but")menu_layout.addWidget(self.menu_block_but) #######------menu_block_but_layout------menu_block_but_layout = QtWidgets.QVBoxLayout(self.menu_block_but)menu_block_but_layout.setObjectName(u"menu_block_but_layout")#------menu_but_radio------对于范围内的 i(self.num()):menu_but_radio = QtWidgets.QRadioButton('{}'.format(i))menu_but_radio.setObjectName("{}".format(i))menu_but_radio.toggled.connect(self.menu_animation)self.menu_but.append(menu_but_radio)menu_block_but_layout.addWidget(menu_but_radio)# Связывание меню к кнопкам и наоборотself.menu_by_but = dict()self.but_by_menu = dict()对于范围内的 i(self.num()):but = self.menu_but[i]menu = self.menu_pos[i]self.menu_by_but[menu] = 但是self.but_by_menu[but] = 菜单menu_block_content = QtWidgets.QWidget()menu_block_content.setObjectName(u"menu_block_content")menu_layout.addWidget(menu_block_content) #######------menu_content_layout------menu_content_layout = QtWidgets.QHBoxLayout(menu_block_content)menu_content_layout.setObjectName(u"menu_content_layout")#------menu_label------menu_label = QtWidgets.QLabel()menu_label.setText('文字，文字文字，文字')menu_content_layout.addWidget(menu_label)self.num = 0self.menu_pos_ter = []def menu_animation(self):self.num =self.num+1self.toggle_animations.clear()num = int(self.sender().objectName())self.menu_pos_ter.append(self.menu_pos[num])# Хитрая сортировка, что сначала вернет элемент с _expand = True对于 sorted(self.menu_pos_ter, key=lambda x: x._expand) 中的菜单:pos1 = QPoint(self.menu_block_but.x() - menu.width(), menu.y())pos2 = QPoint(self.menu_block_but.x() +self.menu_block_but.width(), menu.y())but = self.menu_by_but[menu]menu.raise_(​​)self.menu_block_but.raise_(​​)如果但是.isChecked():开始位置 = 位置 1end_pos = pos2别的:start_pos = menu.pos()end_pos = pos1动画 = QPropertyAnimation(menu, b"pos")动画.setDuration(1000)anim.setStartValue(start_pos)anim.setEndValue(end_pos)self.toggle_animations.addAnimation(anim)如果(self.num == 1)或(self.num == 3):self.toggle_animations.start()self.menu_pos_ter.clear()如果 self.num == 3 :self.num = 1打印(--x--")样式表 = """#centralwidget QWidget QWidget，#centralwidget QWidget QWidget QWidget QWidget，#centralwidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget，#centralwidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget，#centralwidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget{背景:#000；颜色:#fff;}#centralwidget QWidget，#centralwidget QWidget QWidget QWidget，#centralwidget QWidget QWidget QWidget QWidget QWidget QWidget，#centralwidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget，#centralwidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget{背景:#fff;颜色:#000；}#click_me{背景:#000；颜色:#fff;}"""如果 __name__ == "__main__":app = QtWidgets.QApplication(sys.argv)app.setStyleSheet(StyleSheet)w = 主窗口()w.resize(640, 570) #大小窗口w.show()sys.exit(app.exec_())

我希望小部件看起来像这个 html 模板.

$(".menu-btn input").change(function() {$('.menu_1').removeClass('menu_1_active');$('.menu_2').removeClass('menu_2_active');$('.menu_3').removeClass('menu_3_active');$('.sidebar_menu_1').removeClass('sidebar_menu_1_active');$('.frame_menu_1').removeClass('frame_menu_1_active');$('.sidebar_menu_2').removeClass('sidebar_menu_2_active');$('.frame_menu_2').removeClass('frame_menu_2_active');$('.sidebar_menu_3').removeClass('sidebar_menu_3_active');$('.frame_menu_3').removeClass('frame_menu_3_active');var name = $(this).val();设置超时(功能(){$('.menu_'+name).toggleClass('menu_'+name+'_active');$('.sidebar_menu_'+name).toggleClass('sidebar_menu_'+name+'_active');$('.frame_menu_'+name).toggleClass('frame_menu_'+name+'_active');}, 1000);});/*返回*/$("#block_blur").append('<div class="frame_menu_1" ><div class="full sidebar_menu_1"></div></div>');$("#block_blur").append('<div class="frame_menu_2" ><div class="full sidebar_menu_2"></div></div>');$("#block_blur").append('<div class="frame_menu_3" ><div class="full sidebar_menu_3"></div></div>');/*复制菜单*/$('.copy').clone().appendTo('.full');

.content >h3{填充:10px；边距:2px；}.title_1{背景:红色；}.title_2{背景:蓝色；}.title_3{背景:绿色；}.title_4{背景:url('https://i.ytimg.com/vi/slZdLNewXrE/maxresdefault.jpg');}.title_5{背景:黄色；}.menu-btn {显示:弹性；弹性方向:列；背景色:#333；位置:绝对；左:10px；顶部:10px；z-索引:110；}.menu-btn >输入{边距:2px；}.menu >div{宽度:200px；高度:200px；背景色:#18182178;位置:绝对；左:0px；顶部:0px；文本对齐:居中；白颜色;过渡:1s；变换:translateX(-100%);z-索引:100；}.menu .menu_1_active,.menu .menu_2_active,.menu .menu_3_active{变换:translateX(0%);}/*模糊*/.frame_menu_1，.frame_menu_2，.frame_menu_3{z-索引:10；溢出:隐藏；位置:绝对；宽度:200px！重要；高度:200px！重要；顶部:200 像素！重要；左:0px！重要；过渡:1s；变换:翻译(0%，-100%)；变换:翻译(-100%，-100%)；}.frame_menu_1_active,.frame_menu_2_active,.frame_menu_3_active{过渡:1s；变换:翻译(-100%，-100%)；变换:翻译(0%，-100%)；}/*复制*/.sidebar_menu_1,.sidebar_menu_2,.sidebar_menu_3{宽度:100%！重要；高度:100%！重要；位置:绝对；过滤器:模糊(8px)；-webkit-filter:blur(8px);顶部:-200px；左:0px；过渡:1s；转换:翻译(0％，100％)；变换:翻译(100%，100%)；}/*积极的*/.sidebar_menu_1_active,.sidebar_menu_2_active,.sidebar_menu_3_active{过渡:1s；变换:翻译(100%，100%)；转换:翻译(0％，100％)；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="copy"><div class="menu-btn"><input type="radio" id="rad_men" name="red" value="1"/><input type="radio" id="rad_men" name="red" value="2"/><input type="radio" id="rad_men" name="red" value="3"/>

<div class="菜单"><div class="menu_1">菜单 1</div><div class="menu_2">菜单 2</div><div class="menu_3">菜单 3</div>

<div class="内容"><h3 class="title_1" >text text text</h3><h3 class="title_2" >text text text</h3><h3 class="title_3" >text text text</h3><h3 class="title_4" >text text text</h3><h3 class="title_5" >text text text</h3>

<div id="block_blur"></div>

我不得不用JS来复制所有的HTML代码，frame overflow: hidden;并与按钮同步动作.

如果可能，我想避免这种方法，因为它是最疯狂的恐怖.

解决方案

QGraphicsEffect 会影响小部件及其子部件，因此 QLabel 也会受到影响.为了避免这种情况，一个可能的解决方案是使用 QWidget，其中通过布局建立另一个 QWidget，并对最后一个小部件应用效果，并将 QLabel 添加到初始 QWidget，以便 QLabel 和 QWidget 将有效地具有相同parent ， raise_(​​) 也必须使用，以便 QLabel 位于所有顶部:

from PyQt5 import QtCore, QtGui, QtWidgets类模糊标签(QtWidgets.QWidget):def __init__(self, text, parent=None):super().__init__(parent)self.setAttribute(QtCore.Qt.WA_StyledBackground)小部件 = QtWidgets.QWidget()widget.setStyleSheet("""QWidget{ background:#fff; color:#000;}""")模糊效果 = QtWidgets.QGraphicsBlurEffect(blurRadius=5)widget.setGraphicsEffect(blur_effect)self._label = QtWidgets.QLabel(文本=文本，对齐=QtCore.Qt.AlignCenter，父=自我)self.label.setStyleSheet(""" 背景色:透明；颜色:黑色""")self.label.setContentsMargins(10, 0, 10, 0)躺 = QtWidgets.QVBoxLayout(self)lay.addWidget(小部件)@财产定义标签(自我):返回 self._label定义大小提示(自我):返回 self._label.sizeHint()def resizeEvent(self, event):self._label.resize(self.size())self._label.raise_(​​)返回 super().resizeEvent(event)类ButtonWidget(QtWidgets.QWidget):单击 = QtCore.pyqtSignal(int)def __init__(self, parent=None):super().__init__(parent)self.setAttribute(QtCore.Qt.WA_StyledBackground)self.setStyleSheet("""背景:#fff;""")vlay = QtWidgets.QVBoxLayout(self)group = QtWidgets.QButtonGroup(self)group.buttonClicked[int].connect(self.clicked)对于范围内的 i (3):radiobutton = QtWidgets.QRadioButton(str(i))radiobutton.setStyleSheet("""background:#000; color:#fff;""")group.addButton(radiobutton, i)vlay.addWidget(单选按钮)类 LabelWidget(QtWidgets.QWidget):def __init__(self, parent=None):super().__init__(parent)self.setAttribute(QtCore.Qt.WA_StyledBackground)self.setStyleSheet("""背景:#fff;""")vlay = QtWidgets.QVBoxLayout(self)label = QtWidgets.QLabel("文本，文本，文本，文本")label.setStyleSheet("""background:#000; color:#fff;""")vlay.addWidget(标签)类 MainWindow(QtWidgets.QMainWindow):def __init__(self, parent=None):super().__init__(parent)容器 = QtWidgets.QWidget()container.setStyleSheet("""QWidget{ background:#000;}""")hlay_menus = QtWidgets.QHBoxLayout()hlay_menus.setContentsMargins(0, 6, 0, 6)self.menus = []对于范围内的 i (3):menu = BlurLabel("menu-{}".format(i))hlay_menus.addWidget(菜单)self.menus.append(菜单)self.button_widget = ButtonWidget()self.button_widget.clicked.connect(self.onClicked)self.label_widget = LabelWidget()躺 = QtWidgets.QHBoxLayout(容器)lay.addLayout(hlay_menus)Lay.addWidget(self.button_widget)Lay.addWidget(self.label_widget)container.setFixedSize(container.sizeHint())hlay = QtWidgets.QHBoxLayout()hlay.addStretch(0)hlay.addWidget(容器)hlay.addStretch(0)central_widget = QtWidgets.QWidget()self.setCentralWidget(central_widget)vlay = QtWidgets.QVBoxLayout(central_widget)vlay.addStretch(0)vlay.addLayout(hlay)vlay.addStretch(0)self.last_id = [e-mail](int)def onClicked(self, id_):菜单 = self.menus[id_]如果不是 hasattr(menu, "animation"):动画 = QtCore.QPropertyAnimation(menu, b"pos", duration=1000)animation.setStartValue(menu.pos())动画.setEndValue(QtCore.QPoint(self.label_widget.pos().x() + 5, menu.pos().y()))动画开始()menu.animation = 动画如果 self.last_id != -1:last_menu = self.menus[self.last_id]last_menu.animation.setDirection(QtCore.QAbstractAnimation.Backward)last_menu.animation.start()last_menu.raise_(​​)menu.animation.setDirection(QtCore.QAbstractAnimation.Forward)menu.animation.start()menu.raise_(​​)self.button_widget.raise_(​​)self.last_id = id_如果 __name__ == "__main__":导入系统app = QtWidgets.QApplication(sys.argv)w = 主窗口()w.resize(640, 480)w.show()sys.exit(app.exec_())

I need to make the background of the "menu_pos_" block translucent and blur everything on the back. And leave the text clear. This effect is usually called the frosted glass effect.

But unfortunately I could only blur the whole widget

import sys


from PyQt5.QtCore import (QCoreApplication, QMetaObject, QObject, QPoint,
    QRect, QSize, QUrl, Qt)
from PyQt5 import QtWidgets
from PyQt5 import QtGui
from PyQt5 import QtCore
from PyQt5.QtCore import QPropertyAnimation, QPoint

from PyQt5.QtWidgets import QGraphicsEffect

#Or

'''
from PySide2.QtCore import (QCoreApplication, QMetaObject, QObject, QPoint,
    QRect, QSize, QUrl, Qt)
from PySide2 import QtWidgets
from PySide2 import QtGui
from PySide2 import QtCore
from PySide2.QtCore import QPropertyAnimation, QPoint

from PySide2.QtWidgets import QGraphicsEffect
'''



class test_mynu(QtWidgets.QWidget):
    def __init__(self, arr="", parent=None):
        super(test_mynu, self).__init__(parent)
        self._expand = False                                # - self.__expand ; + self._expand  !!!
        #------menu_pos_block------
        self.menu_pos_block = QtWidgets.QWidget()

        blur = QtWidgets.QGraphicsBlurEffect(blurRadius=5)
        self.menu_pos_block.setGraphicsEffect(blur)


        #------menu_pos_block_layout------
        self.menu_pos_block_layout = QtWidgets.QHBoxLayout(self.menu_pos_block)
        self.menu_pos_block_layout.setObjectName(u"menu_pos_block_layout")
        #------menu_pos_label------
        self.menu_pos_label = QtWidgets.QLabel()
        self.menu_pos_label.setText(arr)
        self.menu_pos_block_layout.addWidget(self.menu_pos_label)
        #------ADD------
        lay = QtWidgets.QHBoxLayout(self)
        lay.addWidget(self.menu_pos_block)



class MainWindow(QtWidgets.QMainWindow):
    # number of radio
    def num(self):
        return 3
    def __init__(self, parent=None):
        super().__init__(parent)

        self.toggle_animations = QtCore.QSequentialAnimationGroup(self)

        #------centralwidget------
        centralwidget = QtWidgets.QWidget()
        centralwidget.setObjectName(u"centralwidget")
        self.setCentralWidget(centralwidget)
        #------layout------
        central_w_layout = QtWidgets.QGridLayout(centralwidget)
        central_w_layout.setObjectName(u"central_w_layout")
        #------Spacer------
        vs_up = QtWidgets.QSpacerItem(17, 105, QtWidgets.QSizePolicy.Minimum, QtWidgets.QSizePolicy.Expanding)
        central_w_layout.addItem(vs_up, 0, 1, 1, 1)
        hs_left = QtWidgets.QSpacerItem(327, 20, QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Minimum)
        central_w_layout.addItem(hs_left, 1, 0, 1, 1)
        hs_right = QtWidgets.QSpacerItem(326, 20, QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Minimum)
        central_w_layout.addItem(hs_right, 1, 2, 1, 1)
        vs_down = QtWidgets.QSpacerItem(20, 105, QtWidgets.QSizePolicy.Minimum, QtWidgets.QSizePolicy.Expanding)
        central_w_layout.addItem(vs_down, 2, 1, 1, 1)
        #------block------
        block = QtWidgets.QWidget()
        block.setObjectName(u"block")
        central_w_layout.addWidget(block, 1, 1, 1, 1)             ######
        #------layout------
        layout_block = QtWidgets.QVBoxLayout(block)
        layout_block.setObjectName(u"layout_block")
        #------menu_block------
        menu_block = QtWidgets.QWidget()
        menu_block.setObjectName(u"menu_block")
        layout_block.addWidget(menu_block)             ######
        #------menu_layout------
        menu_layout = QtWidgets.QHBoxLayout(menu_block)
        menu_layout.setObjectName(u"menu_layout")

        self.menu_but = []
        self.menu_pos = []
        self.menu_by_pos = None

        for i in range(self.num()):
            menu_pos_block = test_mynu("menu_{}".format(i))
            menu_pos_block.setObjectName("menu_pos_{}".format(i))

            self.menu_pos.append(menu_pos_block)
            self.menu_pos[i].setGeometry(QRect(menu_pos_block.width(), menu_pos_block.height(), 151, 181))
            menu_layout.addWidget(self.menu_pos[i])

        #------menu_block_but------
        self.menu_block_but = QtWidgets.QWidget()
        self.menu_block_but.setObjectName(u"menu_block_but")
        menu_layout.addWidget(self.menu_block_but)             ######
        #------menu_block_but_layout------
        menu_block_but_layout = QtWidgets.QVBoxLayout(self.menu_block_but)
        menu_block_but_layout.setObjectName(u"menu_block_but_layout")
        #------menu_but_radio------
        for i in range(self.num()):
            menu_but_radio = QtWidgets.QRadioButton('{}'.format(i))
            menu_but_radio.setObjectName("{}".format(i))
            menu_but_radio.toggled.connect(self.menu_animation)

            self.menu_but.append(menu_but_radio)
            menu_block_but_layout.addWidget(menu_but_radio)

        # Связывание меню к кнопкам и наоборот
        self.menu_by_but = dict()
        self.but_by_menu = dict()
        for i in range(self.num()):
            but = self.menu_but[i]
            menu = self.menu_pos[i]

            self.menu_by_but[menu] = but
            self.but_by_menu[but] = menu

        menu_block_content = QtWidgets.QWidget()
        menu_block_content.setObjectName(u"menu_block_content")
        menu_layout.addWidget(menu_block_content)             ######
        #------menu_content_layout------
        menu_content_layout = QtWidgets.QHBoxLayout(menu_block_content)
        menu_content_layout.setObjectName(u"menu_content_layout")
        #------menu_label------
        menu_label = QtWidgets.QLabel()
        menu_label.setText('text, text text, text')
        menu_content_layout.addWidget(menu_label)

        self.num = 0
        self.menu_pos_ter = []

    def menu_animation(self):
        self.num =self.num+1
        self.toggle_animations.clear()

        num = int(self.sender().objectName())
        self.menu_pos_ter.append(self.menu_pos[num])

        # Хитрая сортировка, что сначала вернет элемент с _expand = True
        for menu in sorted(self.menu_pos_ter, key=lambda x: x._expand):
            pos1 = QPoint(self.menu_block_but.x() - menu.width(), menu.y())
            pos2 = QPoint(self.menu_block_but.x() +self.menu_block_but.width(), menu.y())

            but = self.menu_by_but[menu]
            menu.raise_()
            self.menu_block_but.raise_()
            if but.isChecked():

                start_pos = pos1
                end_pos = pos2
            else:
                start_pos = menu.pos()
                end_pos = pos1

            anim = QPropertyAnimation(menu, b"pos")
            anim.setDuration(1000)
            anim.setStartValue(start_pos)
            anim.setEndValue(end_pos)

            self.toggle_animations.addAnimation(anim)


        if (self.num == 1) or (self.num == 3):
            self.toggle_animations.start()
            self.menu_pos_ter.clear()

        if self.num == 3 :
            self.num = 1
        print("--x--")


StyleSheet = """
#centralwidget QWidget QWidget,
#centralwidget QWidget QWidget QWidget QWidget,
#centralwidget QWidget QWidget QWidget QWidget QWidget QWidget,
#centralwidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget,
#centralwidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget{
background:#000;
color:#fff;
}
#centralwidget QWidget,
#centralwidget QWidget QWidget QWidget,
#centralwidget QWidget QWidget QWidget QWidget QWidget,
#centralwidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget,
#centralwidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget QWidget{
background:#fff;
color:#000;
}
#click_me{
background:#000;
color:#fff;
}
"""

if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)
    app.setStyleSheet(StyleSheet)
    w = MainWindow()
    w.resize(640, 570) #Size window
    w.show()
    sys.exit(app.exec_())

I want the widget to look like this html template.

$(".menu-btn input").change(function() {
$('.menu_1').removeClass('menu_1_active');
$('.menu_2').removeClass('menu_2_active'); $('.menu_3').removeClass('menu_3_active');
 
 $('.sidebar_menu_1').removeClass('sidebar_menu_1_active');
 $('.frame_menu_1').removeClass('frame_menu_1_active'); 
 
  $('.sidebar_menu_2').removeClass('sidebar_menu_2_active');
 $('.frame_menu_2').removeClass('frame_menu_2_active'); 
  
  $('.sidebar_menu_3').removeClass('sidebar_menu_3_active');
 $('.frame_menu_3').removeClass('frame_menu_3_active'); 
  
  
var name = $(this).val();

setTimeout(function(){ 

$('.menu_'+name).toggleClass('menu_'+name+'_active'); 
$('.sidebar_menu_'+name).toggleClass('sidebar_menu_'+name+'_active'); 
$('.frame_menu_'+name).toggleClass('frame_menu_'+name+'_active');  
}, 1000);


  
  
  
});


/*return*/
$("#block_blur").append('<div class="frame_menu_1" ><div class="full sidebar_menu_1"></div></div>');

$("#block_blur").append('<div class="frame_menu_2" ><div class="full sidebar_menu_2"></div></div>');

$("#block_blur").append('<div class="frame_menu_3" ><div class="full sidebar_menu_3"></div></div>');





/*copy menu */
$('.copy').clone().appendTo('.full');

.content > h3{
  padding:10px;
  margin:2px;
}

.title_1{
 background:red;
}
.title_2{
 background:blue;
}
.title_3{
 background:green;
}

.title_4{
 background:url('https://i.ytimg.com/vi/slZdLNewXrE/maxresdefault.jpg');
}

.title_5{
 background:yellow;
}


.menu-btn {
 display: flex;
  flex-direction: column;
  background-color: #333;
  position: absolute;
  left: 10px;
  top: 10px;
  z-index:110;
}

.menu-btn > input{
 margin:2px;
}

.menu > div{
   width: 200px;
  height: 200px;
  background-color:#18182178;
  position: absolute;
  left: 0px;
  top: 0px;
text-align: center;
  color:white;
transition:  1s;
  transform: translateX(-100%);
   z-index:100;
}

.menu .menu_1_active,
.menu .menu_2_active,
.menu .menu_3_active{
 transform: translateX(0%);
}


/*blur*/
.frame_menu_1,
.frame_menu_2,
.frame_menu_3{
z-index: 10;
overflow: hidden;
position: absolute;
width: 200px !important;
height:  200px !important;
top: 200px !important;
left: 0px !important;
transition:  1s;
transform: translate(0%, -100%);

 transform: translate(-100%, -100%); 
  
  
}




 .frame_menu_1_active,
 .frame_menu_2_active,
 .frame_menu_3_active{
transition:  1s; 
transform: translate(-100%, -100%);
   
   
   transform: translate(0%, -100%);
   
   
 }   









/*copy*/
.sidebar_menu_1,
.sidebar_menu_2,
.sidebar_menu_3{
width: 100% !important;
height: 100% !important;
position: absolute;
filter:blur(8px);
-webkit-filter:blur(8px);
top:  -200px;
left: 0px;
transition:  1s;
transform: translate(0%, 100%);
  
transform: translate(100%, 100% );  
  
}




 






/*active*/
.sidebar_menu_1_active,
.sidebar_menu_2_active,
.sidebar_menu_3_active{
transition:  1s; 
transform: translate(100%, 100% );
  
  
  transform: translate(0%, 100%);
  
}

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="copy">


<div class="menu-btn">
<input type="radio" id="rad_men" name="red" value="1"/>
    <input type="radio" id="rad_men" name="red" value="2"/>
    <input type="radio" id="rad_men" name="red" value="3"/>
  
  
</div>
  
<div class="menu">
<div class="menu_1">menu 1</div>
<div class="menu_2">menu 2</div>
<div class="menu_3">menu 3</div>  
</div>
  
  


  <div class="content">
  <h3  class="title_1" >text text text</h3>
  <h3  class="title_2" >text text text</h3>
  <h3  class="title_3" >text text text</h3>
  <h3  class="title_4" >text text text</h3>
  <h3  class="title_5" >text text text</h3>
   </div>

     
     
</div>

  
 <div id="block_blur"></div>

I had to use JS to copy all the HTML code, frame overflow: hidden; and synchronize movements with buttons.

If possible, I would like to avoid this method, because it is the wildest horror.

解决方案

The QGraphicsEffect affects the widget and the children of the widget therefore the QLabel is also affected. To avoid this, a possible solution is to use a QWidget where another QWidget is established through a layout, and to that last widget apply the effect, and add a QLabel to the initial QWidget so that the QLabel and the QWidget will effectively have the same parent , raise_() must also be used so that the QLabel is on top of all:

from PyQt5 import QtCore, QtGui, QtWidgets


class BlurLabel(QtWidgets.QWidget):
    def __init__(self, text, parent=None):
        super().__init__(parent)
        self.setAttribute(QtCore.Qt.WA_StyledBackground)
        widget = QtWidgets.QWidget()
        widget.setStyleSheet("""QWidget{ background:#fff; color:#000;}""")
        blur_effect = QtWidgets.QGraphicsBlurEffect(blurRadius=5)
        widget.setGraphicsEffect(blur_effect)

        self._label = QtWidgets.QLabel(
            text=text, alignment=QtCore.Qt.AlignCenter, parent=self
        )
        self.label.setStyleSheet(""" background-color : transparent; color : black""")
        self.label.setContentsMargins(10, 0, 10, 0)

        lay = QtWidgets.QVBoxLayout(self)
        lay.addWidget(widget)

    @property
    def label(self):
        return self._label

    def sizeHint(self):
        return self._label.sizeHint()

    def resizeEvent(self, event):
        self._label.resize(self.size())
        self._label.raise_()
        return super().resizeEvent(event)


class ButtonWidget(QtWidgets.QWidget):
    clicked = QtCore.pyqtSignal(int)

    def __init__(self, parent=None):
        super().__init__(parent)
        self.setAttribute(QtCore.Qt.WA_StyledBackground)
        self.setStyleSheet("""background:#fff;""")

        vlay = QtWidgets.QVBoxLayout(self)

        group = QtWidgets.QButtonGroup(self)
        group.buttonClicked[int].connect(self.clicked)

        for i in range(3):
            radiobutton = QtWidgets.QRadioButton(str(i))
            radiobutton.setStyleSheet("""background:#000; color:#fff;""")
            group.addButton(radiobutton, i)
            vlay.addWidget(radiobutton)


class LabelWidget(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.setAttribute(QtCore.Qt.WA_StyledBackground)
        self.setStyleSheet("""background:#fff;""")

        vlay = QtWidgets.QVBoxLayout(self)

        label = QtWidgets.QLabel("text, text, text, text")
        label.setStyleSheet("""background:#000; color:#fff;""")
        vlay.addWidget(label)


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self, parent=None):
        super().__init__(parent)

        container = QtWidgets.QWidget()
        container.setStyleSheet("""QWidget{ background:#000;}""")

        hlay_menus = QtWidgets.QHBoxLayout()
        hlay_menus.setContentsMargins(0, 6, 0, 6)

        self.menus = []

        for i in range(3):
            menu = BlurLabel("menu-{}".format(i))
            hlay_menus.addWidget(menu)
            self.menus.append(menu)

        self.button_widget = ButtonWidget()
        self.button_widget.clicked.connect(self.onClicked)
        self.label_widget = LabelWidget()

        lay = QtWidgets.QHBoxLayout(container)
        lay.addLayout(hlay_menus)
        lay.addWidget(self.button_widget)
        lay.addWidget(self.label_widget)
        container.setFixedSize(container.sizeHint())

        hlay = QtWidgets.QHBoxLayout()
        hlay.addStretch(0)
        hlay.addWidget(container)
        hlay.addStretch(0)

        central_widget = QtWidgets.QWidget()
        self.setCentralWidget(central_widget)
        vlay = QtWidgets.QVBoxLayout(central_widget)
        vlay.addStretch(0)
        vlay.addLayout(hlay)
        vlay.addStretch(0)

        self.last_id = -1

    @QtCore.pyqtSlot(int)
    def onClicked(self, id_):
        menu = self.menus[id_]
        if not hasattr(menu, "animation"):
            animation = QtCore.QPropertyAnimation(menu, b"pos", duration=1000)
            animation.setStartValue(menu.pos())
            animation.setEndValue(
                QtCore.QPoint(self.label_widget.pos().x() + 5, menu.pos().y())
            )
            animation.start()
            menu.animation = animation

        if self.last_id != -1:
            last_menu = self.menus[self.last_id]
            last_menu.animation.setDirection(QtCore.QAbstractAnimation.Backward)
            last_menu.animation.start()
            last_menu.raise_()
        menu.animation.setDirection(QtCore.QAbstractAnimation.Forward)
        menu.animation.start()
        menu.raise_()
        self.button_widget.raise_()
        self.last_id = id_


if __name__ == "__main__":
    import sys

    app = QtWidgets.QApplication(sys.argv)

    w = MainWindow()
    w.resize(640, 480)
    w.show()
    sys.exit(app.exec_())

这篇关于我可以模糊 qwidget “menu_pos_" 背后的背景吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！