pyqt5 tabwidget垂直选项卡水平文本左对齐

时间:2018-07-18 14:03:50

标签: python python-3.x pyqt5 qtabwidget qtabbar

由于pyqt在“垂直”选项卡中没有水平文本,因此我遵循了此link来实现它。 我想在左侧放置图标,然后在图标之后输入文本,并为选定的标签文本(不活动的标签文本)使用不同的颜色。下面的代码几乎完成了它。唯一的问题是文本居中对齐。我尝试更改tabRect.center(),但用left和top或right等更改它会使其崩溃。

我从this link获得的注释代码使我左对齐,但是没有添加图标。但是我无法更改非活动标签的文本颜色。

我是python的新手,因此无法找到解决方案。我也尝试过link,但这只能设置背景色。也尝试过使用此选项setTabTextColor link,但由于某种原因它没有起作用。从2天开始尝试。

每当我尝试使用带有注释代码的样式表设置文本颜色时,“颜色”选项在样式表中将不起作用。关于如何完成这项工作的任何想法?谢谢

using System.ComponentModel.DataAnnotations.Schema;

namespace MvcDemo.Models
{
    [Table("tblEmployees")] //Exact name of the table should be put in here
    public class Employee
    {
        public int Eid { get; set; }
        public string   Name    { get; set; }
        public string Gender { get; set; }
        public int Did { get; set; }
    }
}

2 个答案:

答案 0 :(得分:1)

解决方案是使用QProxyStyle重定向文本绘画:

from PyQt5 import QtCore, QtGui, QtWidgets


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 ProxyStyle(QtWidgets.QProxyStyle):
    def drawControl(self, element, opt, painter, widget):
        if element == QtWidgets.QStyle.CE_TabBarTabLabel:
            ic = self.pixelMetric(QtWidgets.QStyle.PM_TabBarIconSize)
            r = QtCore.QRect(opt.rect)
            w =  0 if opt.icon.isNull() else opt.rect.width() + self.pixelMetric(QtWidgets.QStyle.PM_TabBarIconSize)
            r.setHeight(opt.fontMetrics.width(opt.text) + w)
            r.moveBottom(opt.rect.bottom())
            opt.rect = r
        QtWidgets.QProxyStyle.drawControl(self, element, opt, painter, widget)

if __name__ == '__main__':
    import sys

    app = QtWidgets.QApplication(sys.argv)
    QtWidgets.QApplication.setStyle(ProxyStyle())
    w = TabWidget()
    w.addTab(QtWidgets.QWidget(), QtGui.QIcon("zoom.png"), "ABC")
    w.addTab(QtWidgets.QWidget(), QtGui.QIcon("zoom-in.png"), "ABCDEFGH")
    w.addTab(QtWidgets.QWidget(), QtGui.QIcon("zoom-out.png"), "XYZ")

    w.resize(640, 480)
    w.show()

    sys.exit(app.exec_())

enter image description here

答案 1 :(得分:0)

如果您先前已经在QtDesigner中设计了任何选项卡。 例如,我已经在QtDesigner中设计了此选项卡: enter image description here

现在我已经从ui文件生成了py文件,UI文件如下所示:

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'tabwidget.ui'
#
# Created by: PyQt5 UI code generator 5.13.2
#
# WARNING! All changes made in this file will be lost!


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.gridLayout = QtWidgets.QGridLayout(self.centralwidget)
        self.gridLayout.setObjectName("gridLayout")
        self.tabWidget = QtWidgets.QTabWidget(self.centralwidget)
        self.tabWidget.setObjectName("tabWidget")
        self.tab = QtWidgets.QWidget()
        self.tab.setObjectName("tab")
        self.gridLayout_2 = QtWidgets.QGridLayout(self.tab)
        self.gridLayout_2.setObjectName("gridLayout_2")
        self.pushButton_reach = QtWidgets.QPushButton(self.tab)
        self.pushButton_reach.setObjectName("pushButton_reach")
        self.gridLayout_2.addWidget(self.pushButton_reach, 1, 1, 1, 1)
        self.label = QtWidgets.QLabel(self.tab)
        self.label.setAlignment(QtCore.Qt.AlignCenter)
        self.label.setObjectName("label")
        self.gridLayout_2.addWidget(self.label, 0, 1, 1, 1)
        self.tabWidget.addTab(self.tab, "")
        self.tab_2 = QtWidgets.QWidget()
        self.tab_2.setObjectName("tab_2")
        self.tabWidget.addTab(self.tab_2, "")
        self.gridLayout.addWidget(self.tabWidget, 0, 0, 1, 1)
        self.pushButton_addoptions = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_addoptions.setObjectName("pushButton_addoptions")
        self.gridLayout.addWidget(self.pushButton_addoptions, 1, 0, 1, 1)
        MainWindow.setCentralWidget(self.centralwidget)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        self.tabWidget.setCurrentIndex(0)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.pushButton_reach.setText(_translate("MainWindow", "I am here"))
        self.label.setText(_translate("MainWindow", "Gotcha!"))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab), _translate("MainWindow", "First Tab"))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_2), _translate("MainWindow", "Second Tab"))
        self.pushButton_addoptions.setText(_translate("MainWindow", "ADD options"))

从eyllanesc的答案中,我弄清楚了如何垂直添加标签,并按如下所示将预先存在的First-Tab添加到修改后的tabwidget中:

import sys
from PyQt5.QtWidgets import QMainWindow, QApplication
from PyQt5 import QtGui, QtWidgets, QtCore
import tabwidget


# new additions
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)

# new additions


class app_window(QMainWindow):
    def __init__(self):
        super().__init__()
        self.ui = tabwidget.Ui_MainWindow()
        self.ui.setupUi(self)
        # self.ui.tabWidget = TabWidget()
        self.ui.tabWidget.setTabBar(TabBar(self.ui.tabWidget))
        self.ui.tabWidget.setTabPosition(self.ui.tabWidget.West)
        self.ui.tabWidget.insertTab(0, self.ui.tab, "My tab")
        self.ui.pushButton_reach.clicked.connect(self.display)
        self.show()

    def display(self):
        print("reached")
        self.close()


if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = app_window()
    w.show()
    sys.exit(app.exec_())

现在我的窗户看起来像这样: enter image description here

我希望这能解决许多人的问题,他们直接只是想垂直重新创建其Tabwidget!