QT(C#)-QTabWidget修改字体后Tab页显示不完整的解决方法

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


1、 前言

最近一段时间学习QT的程序开发,遇到了如标题所说的问题,经过查询和摸索找到了解决方法,为了防止后续忘记,就记录了下来。


2、问题示例

我们在VS中创建一个Qt的窗体应用,并在中心QWidget中添加一个QTabWidget,如下图所示:
在这里插入图片描述
tab页的标题字体比较小,为了能更好的显示,修改了QTabWidget的样式,即:

 QTabWidget* centralTabWidget = new QTabWidget(this);
    centralTabWidget->setStyleSheet(
        "QTabBar::tab{background-color: #FFFFFF;font: 75 10pt;height : 50px;margin - top:1px; margin - right:1px;	margin - left:1px;margin - bottom:1px;}"
        "QTabWidget::pane{border-top: 2px solid  #3368b8;}"
        "QTabBar::tab:hover{font: 75 10pt;color : #000000; background-color:  #ebffff;}"
        "QTabBar::tab:selected{font: 75 10pt;color:#ffffff;background-color: #3368b8;}"      
    );
    setCentralWidget(centralTabWidget);
    QWidget* firstTabWidget = new QTabWidget(centralTabWidget);
    centralTabWidget->insertTab(0,firstTabWidget,QStringLiteral( "测试宽度值"));

在这里插入图片描述
此时出现了遮挡。

3、解决方法

在样式设置中修改QTabBar的样式,其字体与QTabBar::tab的字体保持一致即可,即:

  //在中心Widget中添加Tabwidget
    QTabWidget* centralTabWidget = new QTabWidget(this);
    centralTabWidget->setStyleSheet(
        "QTabBar::tab{background-color: #FFFFFF;font: 75 10pt;height : 50px;margin - top:1px; margin - right:1px;	margin - left:1px;margin - bottom:1px;}"
        "QTabWidget::pane{border-top: 2px solid  #3368b8;}"
        "QTabBar::tab:hover{font: 75 10pt;color : #000000; background-color:  #ebffff;}"
        "QTabBar::tab:selected{font: 75 10pt;color:#ffffff;background-color: #3368b8;}"
        "QTabBar{font: 75 10pt;color:#ffffff;background-color: #3368b8;}"
         
    );
    setCentralWidget(centralTabWidget);
    QWidget* firstTabWidget = new QTabWidget(centralTabWidget);
    centralTabWidget->insertTab(0,firstTabWidget,QStringLiteral( "测试宽度值"));

在这里插入图片描述

可以通过以下步骤实现: 1. 继承QTabWidget类,重写mouseDoubleClickEvent事件,当双击tab时触发事件。 2. 在事件处理函数中创建一个QLineEdit输入框,并将其添加到tab上。 3. 连接QLineEdit的editingFinished()信号和槽函数,当编辑完成后触发槽函数。 4. 在槽函数中获取QLineEdit的文本内容,并将其设置为当前tab的标题。 示例代码如下: ```python from PyQt5.QtWidgets import QApplication, QTabWidget, QWidget, QLineEdit from PyQt5.QtCore import Qt class MyTabWidget(QTabWidget): def __init__(self): super().__init__() self.setTabPosition(QTabWidget.South) # 设置tab位置为底部 self.tabBar().setMovable(True) # 允许tab可移动 self.tabBar().setTabsClosable(True) # 允许关闭tab self.tabBar().setContextMenuPolicy(Qt.CustomContextMenu) # 允许右键菜单 self.tabBar().customContextMenuRequested.connect(self.showContextMenu) # 连接右键菜单信号和槽函数 def mouseDoubleClickEvent(self, event): if event.button() == Qt.LeftButton: # 判断是否是左键双击 index = self.tabBar().tabAt(event.pos()) # 获取双击的tab if index != -1: self.editTabText(index) # 调用编辑tab标题的函数 super().mouseDoubleClickEvent(event) def editTabText(self, index): edit = QLineEdit(self.tabText(index)) # 创建QLineEdit输入框 self.setTabText(index, '') # 将tab标题设置为空 self.tabBar().setTabButton(index, QTabWidget.RightSide, edit) # 将QLineEdit添加到tab上 edit.selectAll() # 选中所有文本 edit.setFocus() # 获取焦点 edit.editingFinished.connect(lambda: self.finishEditTabText(edit, index)) # 连接editingFinished信号和槽函数 def finishEditTabText(self, edit, index): title = edit.text() # 获取QLineEdit的文本内容 self.setTabText(index, title) # 将文本内容设置为tab标题 self.tabBar().setTabButton(index, QTabWidget.RightSide, None) # 移除QLineEdit def showContextMenu(self, pos): index = self.tabBar().tabAt(pos) # 获取右键菜单的tab if index != -1: self.tabBar().setTabButton(index, QTabWidget.RightSide, None) # 移除QLineEdit menu = self.tabBar().createContextMenu() # 创建右键菜单 menu.exec_(self.tabBar().mapToGlobal(pos)) # 在鼠标位置显示右键菜单 if __name__ == '__main__': app = QApplication([]) tabWidget = MyTabWidget() for i in range(5): widget = QWidget() tabWidget.addTab(widget, 'Tab %d' % i) tabWidget.resize(400, 300) tabWidget.show() app.exec_() ``` 运行以上代码,可以看到一个带有多个可编辑的tab的窗口。双击tab标题,会在标题位置弹出一个QLineEdit输入框,键入标题后按Enter键即可修改标题。右键tab标题,会弹出一个右键菜单,其中包含移除当前tab和移除其他tab的选项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GimiGimmy

感谢打赏,需要交流学习的,私信

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值