pyqt qtabwidget QtDesigner中的水平制表符和水平文本答案

【问题标题】：pyqt qtabwidget horizontal tab and horizontal text in QtDesignerpyqt qtabwidget QtDesigner中的水平制表符和水平文本
【发布时间】：2018-03-18 08:27:08
【问题描述】：

我在使用 pyqt4 设计器更改文本对齐时遇到问题我通过向西对齐使选项卡水平，但是其中的文本从北到南看起来很糟糕我想将文本的对齐方式更改为水平我该怎么办那...在此先感谢。

这是我的 ui.py 代码

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

from PyQt4 import QtCore, QtGui

try:
    _fromUtf8 = QtCore.QString.fromUtf8
except AttributeError:
    def _fromUtf8(s):
        return s

try:
    _encoding = QtGui.QApplication.UnicodeUTF8
    def _translate(context, text, disambig):
        return QtGui.QApplication.translate(context, text, disambig, _encoding)
except AttributeError:
    def _translate(context, text, disambig):
        return QtGui.QApplication.translate(context, text, disambig)

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName(_fromUtf8("MainWindow"))
        MainWindow.resize(800, 600)
        self.centralwidget = QtGui.QWidget(MainWindow)
        self.centralwidget.setObjectName(_fromUtf8("centralwidget"))
        self.gridLayout = QtGui.QGridLayout(self.centralwidget)
        self.gridLayout.setObjectName(_fromUtf8("gridLayout"))
        self.tabWidget = QtGui.QTabWidget(self.centralwidget)
        self.tabWidget.setTabPosition(QtGui.QTabWidget.West)
        self.tabWidget.setObjectName(_fromUtf8("tabWidget"))
        self.tab = QtGui.QWidget()
        self.tab.setObjectName(_fromUtf8("tab"))
        self.tabWidget.addTab(self.tab, _fromUtf8(""))
        self.tab_2 = QtGui.QWidget()
        self.tab_2.setObjectName(_fromUtf8("tab_2"))
        self.tabWidget.addTab(self.tab_2, _fromUtf8(""))
        self.tab_3 = QtGui.QWidget()
        self.tab_3.setObjectName(_fromUtf8("tab_3"))
        self.tabWidget.addTab(self.tab_3, _fromUtf8(""))
        self.gridLayout.addWidget(self.tabWidget, 0, 0, 1, 1)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtGui.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 31))
        self.menubar.setObjectName(_fromUtf8("menubar"))
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtGui.QStatusBar(MainWindow)
        self.statusbar.setObjectName(_fromUtf8("statusbar"))
        MainWindow.setStatusBar(self.statusbar)

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

    def retranslateUi(self, MainWindow):
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow", None))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab), _translate("MainWindow", "Tab 1", None))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_2), _translate("MainWindow", "Tab 2", None))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_3), _translate("MainWindow", "Page", None))


if __name__ == "__main__":
    import sys
    app = QtGui.QApplication(sys.argv)
    MainWindow = QtGui.QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())

这是我的主文件，我将在其中添加所有功能，并从这里生成我的窗口

from untitled import *
from PyQt4 import QtGui # Import the PyQt4 module we'll need
import sys # We need sys so that we can pass argv to QApplication
import os

from PyQt4.QtGui import *
from PyQt4.QtCore import *


class MainWindow(QMainWindow,Ui_MainWindow):
    def __init__(self, parent=None):
        QMainWindow.__init__(self, parent)
        self.setupUi(self)

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

【问题讨论】：

你可以展示你得到什么和你想得到什么的图像。 :P
@eyllanesc m 得到这个显示，我希望标签中的文本也是水平的
@ekhumoro 你有没有看到painter 在那个问题中解释说那个人已经实现了文本只是在painter 语法上有问题，这里开始是一个sratch
@CodingHub。 other answer 有一个完整的工作示例。我试过了，效果很好。您只需要FingerTabWidget 类。在您的代码中，您只需执行self.tabWidget.setTabBar(FingerTabWidget(width=100,height=25))。（随意调整宽度和高度）。
@ekhumoro 它使标签不可见，我已经按照你说的更新了代码

标签： python pyqt pyqt4 qt-designer qtabwidget

【解决方案1】：

我提出的解决方案可能不是确切的解决方案，但我认为它是最接近的解决方案。我的建议是推广QTabWidget 使用自定义QTabWidget。

在此之前我已经改进了这个answer中提出的解决方案：

tabwidget.py

from PyQt4 import QtGui, QtCore


class HorizontalTabBar(QtGui.QTabBar):
    def paintEvent(self, event):
        painter = QtGui.QStylePainter(self)
        option = QtGui.QStyleOptionTab()
        for index in range(self.count()):
            self.initStyleOption(option, index)
            painter.drawControl(QtGui.QStyle.CE_TabBarTabShape, option)
            painter.drawText(self.tabRect(index),
                             QtCore.Qt.AlignCenter | QtCore.Qt.TextDontClip,
                             self.tabText(index))

    def tabSizeHint(self, index):
        size = QtGui.QTabBar.tabSizeHint(self, index)
        if size.width() < size.height():
            size.transpose()
        return size


class TabWidget(QtGui.QTabWidget):
    def __init__(self, parent=None):
        QtGui.QTabWidget.__init__(self, parent)
        self.setTabBar(HorizontalTabBar())

该文件将存储在 .ui 文件和 .py 文件旁边，如下结构所示：

.
├── main.py        # file of class MainWindow(QMainWindow,Ui_MainWindow):
├── tabwidget.py   # custom QTabWidget
├── untitled.py    
└── untitled.ui    # your design

在有了之前的结构后，我们用 Qt Designer 打开 .ui 文件，然后右键单击 QTabWidget 并选择 promoted to ...：

将打开一个对话框，其中应放置以下内容：

然后按下add按钮，然后按下promote按钮，最后在pyuic的帮助下再次生成.py文件

最后你会得到以下小部件：

【讨论】：

您知道如何在图标被移除后添加它们吗？
以及如何通过给标签自定义大小来更改标签的大小
@SahilJain。这与我最初给您的解决方案基本相同，因此仍然有相同的限制。
@ekhumoro 关于如何构建widget的解决方案是一样的，我的回答主要是为了指导你如果你想在Qt Designer中申请应该通过推广widget来实现。
@eyllanesc。这不是对您的回答的批评-我只是指出other answer 中的代码不是一个完整的解决方案。这就是为什么我决定重新提出这个问题。让现有的标签栏类与 OPs 示例一起使用并不能解决所有问题（例如渲染图标）。

【解决方案2】：

使用上述方法，然后添加一行代码并显示我的图标

from PyQt4 import QtGui, QtCore


class HorizontalTabBar(QtGui.QTabBar):
    def paintEvent(self, event):
        painter = QtGui.QStylePainter(self)
        option = QtGui.QStyleOptionTab()
        for index in range(self.count()):
            self.initStyleOption(option, index)
            painter.drawControl(QtGui.QStyle.CE_TabBarTabShape, option)
            painter.drawText(self.tabRect(index),
                             QtCore.Qt.AlignCenter | QtCore.Qt.TextDontClip,
                             self.tabText(index))
            if index == 0:
                painter.drawImage(QtCore.QRectF(10, 10, 66, 67), QtGui.QImage("ico/HOME.png"))

    def tabSizeHint(self, index):
        size = QtGui.QTabBar.tabSizeHint(self, index)
        size.setHeight=50
        size.setWidth=200
        if size.width() < size.height():
            size.transpose()
        return size


class TabWidget(QtGui.QTabWidget):
    def __init__(self, parent=None):
        QtGui.QTabWidget.__init__(self, parent)
        self.setTabBar(HorizontalTabBar())

您可以根据标签的索引添加图标并相应地设置它们的位置，直到现在这是我可以给出的最佳解决方案。欢呼

【讨论】：

【解决方案3】：

外观和可用性的更好方法：

在 Qt 设计器>

在左侧使用 QToolBox，在右侧使用 QTabWidget。
用信号连接两者 (currentChanged(int) - setCurrentIndex(int))。
使用以下 css 隐藏 QTabWidget 标头。

QTabBar::tab {height: 0px;}

这里是一个例子：

【讨论】：

【解决方案4】：

我知道这已经有一段时间了，但如果有人需要 @Sahil Jain 在 PyQt5 版本中的回答，请参阅以下内容以获取您的 tabwidget.py

from PyQt5 import QtGui, QtCore, QtWidgets


class HorizontalTabBar(QtWidgets.QTabBar):
    def paintEvent(self, event):

        painter = QtWidgets.QStylePainter(self)
        option = QtWidgets.QStyleOptionTab()
        for index in range(self.count()):
            self.initStyleOption(option, index)
            painter.drawControl(QtWidgets.QStyle.CE_TabBarTabShape, option)
            painter.drawText(self.tabRect(index),
                             QtCore.Qt.AlignCenter | QtCore.Qt.TextDontClip,
                             self.tabText(index))

    def tabSizeHint(self, index):
        size = QtWidgets.QTabBar.tabSizeHint(self, index)
        if size.width() < size.height():
            size.transpose()
        return size


class TabWidget(QtWidgets.QTabWidget):
    def __init__(self, parent=None):
        QtWidgets.QTabWidget.__init__(self, parent)
        self.setTabBar(HorizontalTabBar())

【讨论】：