关于QPushButton的问题 hover press

本文介绍如何使用Qt为QPushButton设置背景图片并去除默认边框及聚焦时的虚线框,通过设置flat属性和应用特定的样式表实现按钮不同状态下的外观变化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

2011-09-26 00:18:38| 分类: QT| 标签: |字号 订阅

我用setStyleSheet为一个QPushButton贴了一个背景图片

关于QPushButton的问题 hover press - Jesse Rei - Jesse Rei 的博客(优柔寡断)
但是,当点了按钮之后,会出现虚线框~~~ 这样看起来就很丑,不逼真了,我不希望这个虚线框出现,
有什么好的解决方法吗?
————————————————————————————
这一组按钮(6个按钮,垂直排列),实现如下效果以及解决方案:
程序启动后按钮的形状:

关于QPushButton的问题 hover press - Jesse Rei - Jesse Rei 的博客(优柔寡断)
__________________________
当鼠标指向按钮时的形状:

关于QPushButton的问题 hover press - Jesse Rei - Jesse Rei 的博客(优柔寡断)
__________________________
当选中了按钮时的形状:

关于QPushButton的问题 hover press - Jesse Rei - Jesse Rei 的博客(优柔寡断)

实现效果的代码:
ui.colorButton->setFocusPolicy(Qt::NoFocus);//设置无聚焦~避免出现虚线框~


//需要注意的是,尝试过CSS语法 border-style:none不能满足对应的要求。
//border-image为程序启动后默认的背景
//pressed为按下后的图片
//hover为鼠标指向时的按钮图片
//当然,还有选中后的图片~这个就自行处理了
ui.colorButton->setStyleSheet("QPushButton {border-image:url(pic/border-image.jpg); font-size:24px;} \
QPushButton:hover:pressed {border-image:url(pic/pressed.jpg);font-size:24px;} \
QPushButton:hover:!pressed {border-image:url(pic/hover.jpg);font-size:24px;} ");
附加:
QT中去掉QPushButton添加图片后的边框

直接在QPushButton上添加背景图片,即使图片与主窗体的背景一致,也会始终有一个边框。

昨天鼓捣了好长时间,终于在曾同学的帮忙下搞出来了,下面记录下^_^

QPushButton定义有个属性flat()

观察QPushButton可以看到是实际是凸出来的,所以呢,只要把QPushButton.setFlat(true)就行了。

另外,采用QStyleSheet设置QPushButton{border:0px;}解决不了这个问题。

import sys from PySide6.QtWidgets import (QApplication, QMainWindow, QWidget, QPushButton, QVBoxLayout, QStackedWidget, QLabel, QFormLayout, QLineEdit) from PySide6.QtCore import Qt class MainWindow(QMainWindow): def __init__(self): super().__init__() self.setWindowTitle("多页面应用示例") self.resize(600, 400) # 创建中心部件布局 self.central_widget = QWidget() self.setCentralWidget(self.central_widget) self.main_layout = QVBoxLayout(self.central_widget) # 创建导航栏 self.setup_navigation() # 创建堆叠窗口来管理多个页面 self.stacked_widget = QStackedWidget() self.main_layout.addWidget(self.stacked_widget) # 创建各个页面 self.create_pages() # 默认显示首页 self.stacked_widget.setCurrentIndex(0) def setup_navigation(self): """创建顶部导航栏""" nav_layout = QVBoxLayout() # 标题 title_label = QLabel("PySide6 多页面应用") title_label.setAlignment(Qt.AlignCenter) title_label.setStyleSheet("font-size: 20px; font-weight: bold; margin: 10px 0;") nav_layout.addWidget(title_label) # 导航按钮 btn_layout = QVBoxLayout() self.btn_home = QPushButton("首页") self.btn_form = QPushButton("表单页") self.btn_about = QPushButton("关于页") self.btn_home.clicked.connect(lambda: self.stacked_widget.setCurrentIndex(0)) self.btn_form.clicked.connect(lambda: self.stacked_widget.setCurrentIndex(1)) self.btn_about.clicked.connect(lambda: self.stacked_widget.setCurrentIndex(2)) # 设置按钮样式 for btn in [self.btn_home, self.btn_form, self.btn_about]: btn.setFixedHeight(40) btn.setStyleSheet(""" QPushButton { background-color: #4CAF50; color: white; border: none; border-radius: 5px; font-size: 14px; } QPushButton:hover { background-color: #45a049; } QPushButton:pressed { background-color: #3d8b40; } """) btn_layout.addWidget(btn) nav_layout.addLayout(btn_layout) self.main_layout.addLayout(nav_layout) def create_pages(self): """创建应用的各个页面""" # 首页 home_page = QWidget() home_layout = QVBoxLayout(home_page) home_title = QLabel("欢迎使用多页面应用") home_title.setAlignment(Qt.AlignCenter) home_title.setStyleSheet("font-size: 24px; margin: 20px 0;") home_content = QLabel("这是一个使用PySide6实现的多页面应用示例。\n" "通过顶部导航栏可以在不同页面之间切换。") home_content.setAlignment(Qt.AlignCenter) home_content.setStyleSheet("font-size: 16px;") home_layout.addWidget(home_title) home_layout.addWidget(home_content) home_layout.addStretch() self.stacked_widget.addWidget(home_page) # 表单页 form_page = QWidget() form_layout = QVBoxLayout(form_page) form_title = QLabel("用户信息表单") form_title.setAlignment(Qt.AlignCenter) form_title.setStyleSheet("font-size: 20px; margin: 15px 0;") # 创建表单 input_form = QFormLayout() self.name_input = QLineEdit() self.email_input = QLineEdit() self.age_input = QLineEdit() input_form.addRow("姓名:", self.name_input) input_form.addRow("邮箱:", self.email_input) input_form.addRow("年龄:", self.age_input) # 提交按钮 submit_btn = QPushButton("提交") submit_btn.setFixedHeight(40) submit_btn.setStyleSheet(""" QPushButton { background-color: #2196F3; color: white; border: none; border-radius: 5px; font-size: 14px; } QPushButton:hover { background-color: #0b7dda; } QPushButton:pressed { background-color: #0a69b7; } """) submit_btn.clicked.connect(self.submit_form) form_layout.addWidget(form_title) form_layout.addLayout(input_form) form_layout.addWidget(submit_btn) form_layout.addStretch() self.stacked_widget.addWidget(form_page) # 关于页 about_page = QWidget() about_layout = QVBoxLayout(about_page) about_title = QLabel("关于本应用") about_title.setAlignment(Qt.AlignCenter) about_title.setStyleSheet("font-size: 20px; margin: 15px 0;") about_content = QLabel(""" <h3>PySide6 多页面应用示例</h3> <p>本应用展示了如何使用PySide6创建具有多个页面的应用程序。</p> <p>主要功能:</p> <ul> <li>使用QStackedWidget实现页面切换</li> <li>自定义导航栏设计</li> <li>表单数据收集</li> <li>页面间数据传递</li> </ul> <p>版本: 1.0.0</p> """) about_content.setAlignment(Qt.AlignLeft) about_content.setWordWrap(True) about_layout.addWidget(about_title) about_layout.addWidget(about_content) about_layout.addStretch() self.stacked_widget.addWidget(about_page) def submit_form(self): """处理表单提交""" name = self.name_input.text() email = self.email_input.text() age = self.age_input.text() print(f"表单提交: 姓名={name}, 邮箱={email}, 年龄={age}") # 这里可以添加表单验证数据处理逻辑 # 提交后可以跳转到结果页面或其他页面 # self.stacked_widget.setCurrentIndex(2) # 跳转到关于页作为示例 if __name__ == "__main__": app = QApplication(sys.argv) # 设置全局样式 app.setStyleSheet(""" QMainWindow { background-color: #f5f5f5; } QWidget { font-family: 'Microsoft YaHei', sans-serif; } """) window = MainWindow() window.show() sys.exit(app.exec()) 教我学会写这个代码
最新发布
07-23
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值