БЛОГ НА HUSL


Как убрать лишние края области заголовка вкладки виджета QTabWidget?(PyQt 5, Python 3)

Автор вопроса: MAXIM045

Код ниже создает виджет QTabWidget с определенными характеристиками. В область заголовка первой вкладки добавляется квадратное изображение(80px*80px).

Почему-то вокруг картинки образуются лишние края, что очень сильно портит внешний вид:

введите сюда описание изображения

Я бы хотел в области заголовка вкладки оставить место только для изображения, как-то удалив лишние края. Пытался сделать это, добавив в таблицу стиля следующие строки:

 border: none;
 margin: 0px;
 padding: 0px;

Но, как это у меня обычно случается, стало только хуже. Пожалуйста, подскажите, как сделать задуманное?

Не знаю, как правильно оставить картинку из кода, поэтому просто прикреплю ее здесь:)

введите сюда описание изображения

from PyQt5 import QtWidgets, QtCore, QtGui

class Color(QtWidgets.QWidget):
    def __init__(self, color, *args, **kwargs):
        super(Color, self).__init__(*args, **kwargs)
        self.setAutoFillBackground(True)
        palette = self.palette()
        palette.setColor(QtGui.QPalette.Window, QtGui.QColor(color))
        self.setPalette(palette)

class TabBar(QtWidgets.QTabBar):
    def tabSizeHint(self, index):
        s = QtWidgets.QTabBar.tabSizeHint(self, index)
        s.transpose()
        return s

    def paintEvent(self, event):
        painter = QtWidgets.QStylePainter(self)
        opt = QtWidgets.QStyleOptionTab()

        for i in range(self.count()):
            self.initStyleOption(opt, i)
            painter.drawControl(QtWidgets.QStyle.CE_TabBarTabShape, opt)
            painter.save()

            s = opt.rect.size()
            s.transpose()
            r = QtCore.QRect(QtCore.QPoint(), s)
            r.moveCenter(opt.rect.center())
            opt.rect = r

            c = self.tabRect(i).center()
            painter.translate(c)
            painter.rotate(90)
            painter.translate(-c)
            painter.drawControl(QtWidgets.QStyle.CE_TabBarTabLabel, opt)
            painter.restore()

class TabWidget(QtWidgets.QTabWidget):
    def __init__(self, *args, **kwargs):
        QtWidgets.QTabWidget.__init__(self, *args, **kwargs)
        self.setTabBar(TabBar(self))
        self.setTabPosition(QtWidgets.QTabWidget.West)

class MyWindow(QtWidgets.QWidget):
    def __init__(self, parent = None):
        super().__init__(parent)

        self.resize(250, 300)

        self.tabs = TabWidget()
        self.tabs.setTabPosition(QtWidgets.QTabWidget.West)
        self.tabs.setDocumentMode(True)
        self.tabs.addTab(Color('#7189DB'), QtGui.QIcon('play.png'), '')
        self.tabs.addTab(Color('#7189DB'), 'Вкладка 2')
        self.tabs.setIconSize(QtCore.QSize(40, 40))

        qss = '''QTabBar::tab:selected {
                     background-color: #7189DB;
                     border: none;
                     margin: 0px;
                     padding: 0px;
                 }

                 QTabBar::tab {
                     background: #45507E;
                     border: none;
                     margin: 0px;
                     padding: 0px;
                 }'''

        self.tabs.setStyleSheet(qss)

        self.tabs.setCurrentIndex(0)

        box = QtWidgets.QVBoxLayout(self)
        box.addWidget(self.tabs)

    def closeTab(self, index):
        tab = self.tabs.widget(index)
        tab.deleteLater()
        self.tabs.removeTab(index)

if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    window = MyWindow()
    window.setWindowTitle(' ')
    window.show()
    sys.exit(app.exec_())

Источник

Ответы (1 шт):

Автор решения: S. Nick

Вы устанавливаете размер иконки здесь:

self.tabs.setIconSize(QtCore.QSize(40, 40))

Но я не могу получить, то что вы изобразили. У меня получается так:

from PyQt5 import QtWidgets, QtCore, QtGui

class Color(QtWidgets.QWidget):
    def __init__(self, color, *args, **kwargs):
        super(Color, self).__init__(*args, **kwargs)
        self.setAutoFillBackground(True)
        palette = self.palette()
        palette.setColor(QtGui.QPalette.Window, QtGui.QColor(color))
        self.setPalette(palette)

class TabBar(QtWidgets.QTabBar):
    def tabSizeHint(self, index):
        s = QtWidgets.QTabBar.tabSizeHint(self, index)
        s.transpose()
        return s

    def paintEvent(self, event):
        painter = QtWidgets.QStylePainter(self)
        opt = QtWidgets.QStyleOptionTab()

        for i in range(self.count()):
            self.initStyleOption(opt, i)
            painter.drawControl(QtWidgets.QStyle.CE_TabBarTabShape, opt)
            painter.save()

            s = opt.rect.size()
            s.transpose()
            r = QtCore.QRect(QtCore.QPoint(), s)
            r.moveCenter(opt.rect.center())
            opt.rect = r

            c = self.tabRect(i).center()
            painter.translate(c)
            painter.rotate(90)
            painter.translate(-c)
            painter.drawControl(QtWidgets.QStyle.CE_TabBarTabLabel, opt)
            painter.restore()

class TabWidget(QtWidgets.QTabWidget):
    def __init__(self, *args, **kwargs):
        QtWidgets.QTabWidget.__init__(self, *args, **kwargs)
        self.setTabBar(TabBar(self))
        self.setTabPosition(QtWidgets.QTabWidget.West)

class MyWindow(QtWidgets.QWidget):
    def __init__(self, parent = None):
        super().__init__(parent)

        self.resize(250, 300)

        self.tabs = TabWidget()
        self.tabs.setTabPosition(QtWidgets.QTabWidget.West)
        self.tabs.setDocumentMode(True)
        self.tabs.addTab(Color('#7189DB'), QtGui.QIcon('play.png'), '')
        self.tabs.addTab(Color('#7189DB'), QtGui.QIcon('head3.png'), '')  #'Вкладка 2')
        self.tabs.setIconSize(QtCore.QSize(40, 40))

#        self.tabs.setStyleSheet(qss)

        self.tabs.setCurrentIndex(0)

        box = QtWidgets.QVBoxLayout(self)
        box.addWidget(self.tabs)
        box.setContentsMargins(0, 0, 0, 0)                                  # +++

    def closeTab(self, index):
        tab = self.tabs.widget(index)
        tab.deleteLater()
        self.tabs.removeTab(index)


qss = '''
QTabBar::tab:selected {
    background-color: #7189DB;
    border: none;
    margin: 0px;
    padding: 0px;
}

QTabBar::tab {
    background: #45507E;
    border: none;
    margin: 0px;
    padding: 0px;
}
'''


if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
#    app.setStyle('fusion')                                               # попробуйте
    app.setStyleSheet(qss)

    window = MyWindow()
    window.setWindowTitle(' ')
    window.show()
    sys.exit(app.exec_())

введите сюда описание изображения

Update

Я немного обновил таблицу стилей, поиграйтесь с ней если что-то не нравится. 

from PyQt5 import QtWidgets, QtCore, QtGui

class Color(QtWidgets.QWidget):
    def __init__(self, color, *args, **kwargs):
        super(Color, self).__init__(*args, **kwargs)
        self.setAutoFillBackground(True)
        palette = self.palette()
        palette.setColor(QtGui.QPalette.Window, QtGui.QColor(color))
        self.setPalette(palette)

class TabBar(QtWidgets.QTabBar):
    def tabSizeHint(self, index):
        s = QtWidgets.QTabBar.tabSizeHint(self, index)
        s.transpose()
        return s

    def paintEvent(self, event):
        painter = QtWidgets.QStylePainter(self)
        opt = QtWidgets.QStyleOptionTab()

        for i in range(self.count()):
            self.initStyleOption(opt, i)
            painter.drawControl(QtWidgets.QStyle.CE_TabBarTabShape, opt)
            painter.save()

            s = opt.rect.size()
            s.transpose()
            r = QtCore.QRect(QtCore.QPoint(), s)
            r.moveCenter(opt.rect.center())
            opt.rect = r

            c = self.tabRect(i).center()
            painter.translate(c)
            painter.rotate(90)
            painter.translate(-c)
            painter.drawControl(QtWidgets.QStyle.CE_TabBarTabLabel, opt)
            painter.restore()

class TabWidget(QtWidgets.QTabWidget):
    def __init__(self, *args, **kwargs):
        QtWidgets.QTabWidget.__init__(self, *args, **kwargs)
        self.setTabBar(TabBar(self))
        self.setTabPosition(QtWidgets.QTabWidget.West)

class MyWindow(QtWidgets.QWidget):
    def __init__(self, parent = None):
        super().__init__(parent)
        self.resize(500, 450)

        self.tabs = TabWidget()
        self.tabs.setTabPosition(QtWidgets.QTabWidget.West)
        self.tabs.setDocumentMode(True)
        self.tabs.addTab(Color('#7189DB'), QtGui.QIcon('play.png'), '')
        self.tabs.addTab(Color('#7189DB'), QtGui.QIcon('play_.png'), '')        
        self.tabs.addTab(Color('#7189DB'), QtGui.QIcon('music.ico'), '')
        self.tabs.addTab(Color('#7189DB'), QtGui.QIcon('myicon.ico'), '')
        self.tabs.addTab(Color('#7189DB'), QtGui.QIcon('images/music.png'), '')
        self.tabs.setIconSize(QtCore.QSize(40, 40))
#        self.tabs.setStyleSheet(qss)
        self.tabs.setCurrentIndex(0)

        box = QtWidgets.QVBoxLayout(self)
        box.addWidget(self.tabs)
        box.setContentsMargins(0, 0, 0, 0)                                  # +++


qss = '''
QTabBar {
    qproperty-drawBase: 0;  
    left: 0.5ex;            
    border-radius: 0.3ex;  
}
QTabBar:focus {
    border: 0ex transparent black;  
}

/* LEFT TABS   ***************** */
QTabBar::tab:left {
    color: #eff0f1;
    border: 0.1ex transparent black;
    border-top: 0.1ex solid #76797c;
    border-right: 0.1ex solid #76797c; 
    background-color: #7189DB;        
    padding: 2.5ex;                   
    border-top-right-radius: 0.2ex;   
    border-bottom-right-radius: 0.2ex;
    min-height: 40px;                 
    max-width: 40px;                  
    max-height: 40px;
    margin: 0.2ex;                  
}

QTabBar::tab:left:last,
QTabBar::tab:left:only-one {
    color: #eff0f1;
    border: 0.1ex transparent black;    
    border-top: 0.1ex solid #76797c;    
    border-bottom: 0.1ex solid #76797c; 
    border-right: 0.1ex solid #76797c; 
    background-color: #7189DB;         
    padding: 2.5ex;                    
    border-top-right-radius: 0.2ex;    
    border-bottom-right-radius: 0.2ex; 
    min-height: 40px;                  
}

QTabBar::tab:left:!selected {
    color: #eff0f1;
    background-color: #54575B;
    border: 0.1ex transparent black;
    border-top: 0.1ex solid #76797c;
    border-top-right-radius: 0.2ex;
    border-bottom-right-radius: 0.2ex;
}

QTabBar::tab:left:!selected:hover {
    background-color: rgba(61, 173, 232, 0.2);
    border: 0.1ex rgba(61, 173, 232, 0.2);
    border-top: 0.1ex solid #76797c;
}

QTabBar::tab:left:!selected:first:hover {
    background-color: rgba(61, 173, 232, 0.2);
    border: 0.1ex rgba(61, 173, 232, 0.2);
}

'''


if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
#    app.setStyle('fusion')                                               # попробуйте
    app.setStyleSheet(qss)

    window = MyWindow()
    window.setWindowTitle(' ')
    window.show()
    sys.exit(app.exec_())

введите сюда описание изображения

введите сюда описание изображения

→ Ссылка

licensed under cc by-sa 3.0 with attribution.