PyQt5如何实现点击按钮显示选中边框及自定义标签栏样式

1. 技能列表按钮单选高亮效果 #

实现逻辑直接，不需要引入额外复杂控件：

• 在setTab2初始化阶段新增一个实例变量记录当前选中的按钮，初始值设为None
• 给所有技能按钮设置默认样式：默认状态下无边框，和背景融合
• 点击按钮触发回调时，先将上一个记录的选中按钮样式重置为默认态，再给当前点击的按钮加上1px实线高亮边框，同时更新当前选中按钮的记录
• 注意原有全局设置的QPushButton{border-color:#65F68C}会导致所有按钮默认显示边框，需要把这段全局样式改成默认无边框，只给选中态加边框。

2. QTabWidget顶部标签栏自定义 #

直接通过Qt样式表（QSS）即可完成自定义，不需要重写控件绘制逻辑，可以根据PipBoy的视觉风格调整标签的尺寸、颜色、选中态、边距、边框效果，可覆盖的QSS子控件包括：

• QTabWidget::pane：标签页下方的内容面板边框/背景
• QTabBar::tab：单个标签的默认样式
• QTabBar::tab:selected：选中标签的高亮样式
• QTabBar::tab:hover：鼠标悬停在标签上的样式

关键修改代码 #

直接替换原有代码中对应部分即可：

# 在StatsTabs的__init__方法里，替换原有的setStyleSheet部分
self.setStyleSheet("""
    QWidget {background:#141A15 ; color:#65F68C;}
    /* 技能按钮默认样式 */
    QPushButton {border: none; background: transparent;}
    /* 标签栏整体样式 */
    QTabWidget::pane {border: none; border-top: 1px solid #65F68C;}
    QTabBar::tab {
        background: transparent;
        border: none;
        padding: 8px 16px;
        margin-right: 4px;
    }
    QTabBar::tab:selected {
        border: 1px solid #65F68C;
        border-bottom: 1px solid #141A15;
        margin-bottom: -1px;
    }
    QTabBar::tab:hover {
        background: rgba(101, 246, 140, 0.1);
    }
""")
self.uni_font = QFont("Monofonto", 14)
QApplication.setFont(self.uni_font)

# 在setTab2方法里，初始化按钮列表前加当前选中按钮的记录
self.current_selected_btn = None
skills_list = ["Barter", "Big Guns", "Energy Weapons", "Explosives", "Lockpick", "Medicine",
               "Melee Weapons", "Repair", "Science", "Small Guns", "Sneak", "Speech", "Unarmed"]
self.button_list = []

# 循环创建按钮时给按钮设置固定高度，不用额外加样式
for i in range(13):
    button = QPushButton(skills_list[i])
    button.setFixedHeight(35)
    self.button_list.append(button)
    self.tab2.layout.addWidget(self.button_list[i], i+1, 0)
    self.button_list[i].clicked.connect(
        lambda checked, c=i: self.show_skills_desc(int(c)))

# 修改show_skills_desc方法
def show_skills_desc(self, index):
    # 重置上一个选中按钮的样式
    if self.current_selected_btn is not None:
        self.current_selected_btn.setStyleSheet("border: none; background: transparent;")
    # 设置当前按钮为选中态
    current_btn = self.button_list[index]
    current_btn.setStyleSheet("border:1px solid #65F68C; background: rgba(101, 246, 140, 0.1);")
    self.current_selected_btn = current_btn

    # 原有逻辑保留
    self.skill_desc.setText(self.lines[index])
    self.skillspic = QPixmap("statsimgs/" + str(index) + ".png")
    self.skillspiclabel.setPixmap(self.skillspic)
    self.skill_desc.setStyleSheet("border:1px solid;border-color:#65F68C")

如果需要默认选中第一个技能按钮，只要在setTab2方法末尾加一行self.show_skills_desc(0)即可，打开标签页就会默认高亮第一个按钮并显示对应内容。

内容的提问来源于stack exchange，提问作者laffytaffy