Qt6入门教程 13：QPushButton

2024-01-29 07:28
文章标签 qt6 入门教程 13 qpushbutton

本文主要是介绍Qt6入门教程 13：QPushButton，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

一.QPushButton

1.多选

2.互斥

3.设置菜单

4.图标按钮

4.1给按钮添加图标

4.2异形按钮

二.设置Qt样式表

一.QPushButton

QPushButton是与QAbstractButton最接近的完全体按钮，它具备QAbstractButton的所有特性，并且支持设置菜单。

1.多选

#include <QApplication>
#include <QMainWindow>
#include <QPushButton>
#include <QHBoxLayout>
#include <QDebug>int main(int argc, char *argv[])
{QApplication a(argc, argv);QMainWindow w;w.setWindowTitle("https://blog.csdn.net/caoshangpa");QWidget *centralWidget = new QWidget();QHBoxLayout *hLayout = new QHBoxLayout();QPushButton *button1 = new QPushButton();button1->setText("button1");button1->setCheckable(true);button1->setStyleSheet("QPushButton{""background: rgb(128, 128, 128);""border: 1px solid rgb(50, 50, 50);""color: white;""width: 60px;""height: 30px;}""QPushButton:hover{""background: rgb(150, 150, 150);}""QPushButton:pressed{""background: rgb(100, 100, 100);}""QPushButton:checked{""background: blue;}");QPushButton *button2 = new QPushButton();button2->setText("button2");button2->setCheckable(true);button2->setStyleSheet("QPushButton{""background: rgb(128, 128, 128);""border: 1px solid rgb(50, 50, 50);""color: white;""width: 60px;""height: 30px;}""QPushButton:hover{""background: rgb(150, 150, 150);}""QPushButton:pressed{""background: rgb(100, 100, 100);}""QPushButton:checked{""background: blue;}");QPushButton *button3 = new QPushButton();button3->setText("button3");button3->setCheckable(true);button3->setStyleSheet("QPushButton{""background: rgb(128, 128, 128);""border: 1px solid rgb(50, 50, 50);""color: white;""height: 30px;}""QPushButton:hover{""background: rgb(150, 150, 150);}""QPushButton:pressed{""background: rgb(100, 100, 100);}""QPushButton:checked{""background: blue;}");hLayout->addWidget(button1);hLayout->addWidget(button2);hLayout->addWidget(button3);centralWidget->setLayout(hLayout);w.setCentralWidget(centralWidget);w.resize(400, 200);w.show();return a.exec();
}

QSS

QPushButton{background: rgb(128, 128, 128);border: 1px solid rgb(50, 50, 50);color: white;width: 60px;height: 30px;
}
QPushButton:hover{background: rgb(150, 150, 150);
}
QPushButton:pressed{background: rgb(100, 100, 100);
}
QPushButton:checked{background: blue;
}

2.互斥

只需在“多选”的基础上，对每个按钮设置

button->setAutoExclusive(true);

 

3.设置菜单

#include <QApplication>
#include <QMainWindow>
#include <QPushButton>
#include <QPainter>
#include <QHBoxLayout>
#include <QMenu>
#include <QDebug>int main(int argc, char *argv[])
{QApplication a(argc, argv);QMainWindow w;w.setWindowTitle("https://blog.csdn.net/caoshangpa");QWidget *centralWidget = new QWidget();QHBoxLayout *hLayout = new QHBoxLayout();QPushButton *button1 = new QPushButton();button1->setText("button1");button1->setStyleSheet("QPushButton{""background: rgb(128, 128, 128);""border: 1px solid rgb(50, 50, 50);""color: white;""width: 100px;""height: 30px;""text-align: left center;""padding-left: 10px;}""QPushButton:hover{""background: rgb(150, 150, 150);}""QPushButton:pressed{""background: rgb(100, 100, 100);}""QPushButton:checked{""background: blue;}""QPushButton::menu-indicator{""subcontrol-position: right center;""subcontrol-origin: padding;""right: 10px;}");QMenu *menu = new QMenu();menu->addAction(QString::fromLocal8Bit("Open"));menu->addAction(QString::fromLocal8Bit("Create"));menu->addSeparator();menu->addAction(QString::fromLocal8Bit("Quit"));button1->setMenu(menu);hLayout->addStretch();hLayout->addWidget(button1);hLayout->addStretch();centralWidget->setLayout(hLayout);w.setCentralWidget(centralWidget);w.resize(400, 200);w.show();return a.exec();
}

QSS

QPushButton{background: rgb(128, 128, 128);border: 1px solid rgb(50, 50, 50);color: white;width: 100px;height: 30px;text-align: left center;padding-left: 10px;
}
QPushButton:hover{background: rgb(150, 150, 150);
}
QPushButton:pressed{background: rgb(100, 100, 100);
}
QPushButton:checked{background: blue;
}
QPushButton::menu-indicator{subcontrol-position: right center;subcontrol-origin: padding;right: 10px;
}

如果要使用自定义图标取代默认三角形，QSS如下：

QPushButton::menu-indicator{image: url(:/icons/arrow.png);"subcontrol-position: right center;subcontrol-origin: padding;right: 10px;
}

如果要去掉三角形，QSS如下：

QPushButton::menu-indicator{image: none;"subcontrol-position: right center;subcontrol-origin: padding;right: 10px;
}

4.图标按钮

4.1给按钮添加图标

#include <QApplication>
#include <QMainWindow>
#include <QPushButton>
#include <QPainter>
#include <QHBoxLayout>
#include <QIcon>
#include <QDebug>int main(int argc, char *argv[])
{QApplication a(argc, argv);QMainWindow w;w.setWindowTitle("https://blog.csdn.net/caoshangpa");QWidget *centralWidget = new QWidget();QHBoxLayout *hLayout = new QHBoxLayout();QPushButton *button1 = new QPushButton();button1->setText("button1");button1->setIcon(QIcon(":/icons/AppIcon.png"));button1->setIconSize(QSize(24, 24));button1->setStyleSheet("QPushButton{""background: rgb(128, 128, 128);""border: 1px solid rgb(50, 50, 50);""color: white;""width: 100px;""height: 30px;}""QPushButton:hover{""background: rgb(150, 150, 150);}""QPushButton:pressed{""background: rgb(100, 100, 100);}""QPushButton:checked{""background: blue;}");hLayout->addStretch();hLayout->addWidget(button1);hLayout->addStretch();centralWidget->setLayout(hLayout);w.setCentralWidget(centralWidget);w.resize(400, 200);w.show();return a.exec();
}

QSS

QPushButton{background: rgb(128, 128, 128);border: 1px solid rgb(50, 50, 50);color: white;width: 100px;height: 30px;
}
QPushButton:hover{background: rgb(150, 150, 150);
}
QPushButton:pressed{background: rgb(100, 100, 100);
}
QPushButton:checked{background: blue;
}

4.2异形按钮

#include <QApplication>
#include <QMainWindow>
#include <QPushButton>
#include <QPainter>
#include <QHBoxLayout>
#include <QIcon>
#include <QDebug>int main(int argc, char *argv[])
{QApplication a(argc, argv);QMainWindow w;w.setWindowTitle("https://blog.csdn.net/caoshangpa");QWidget *centralWidget = new QWidget();QHBoxLayout *hLayout = new QHBoxLayout();QPushButton *button1 = new QPushButton();button1->setStyleSheet("QPushButton{""border: none;""width: 100px;""height: 100px;""image: url(:/icons/dragon.png);}""QPushButton:pressed{""padding-top: 3px;""padding-left: 3px;""padding-bottom: -3px;""padding-right: -3px}");hLayout->addStretch();hLayout->addWidget(button1);hLayout->addStretch();centralWidget->setLayout(hLayout);w.setCentralWidget(centralWidget);w.resize(400, 200);w.show();return a.exec();
}

QSS

QPushButton{border: none;width: 100px;height: 100px;image: url(:/icons/dragon.png);
}
QPushButton:pressed{padding-top: 3px;padding-left: 3px;padding-bottom: -3px;padding-right: -3px
}

龙头是背景透明的png图片，在QSS中通过设置padding参数实现点击效果。需要注意的是，这种异形按钮并不是真*异形（只有龙头区域能点击）的，因为点击龙头边上的按钮区域，也能产生点击效果。

二.设置Qt样式表

在上面的例子中，我们用了Qt样式表，即QSS（Qt StyleSheet），除了调用控件的setStyleSheet函数来设置Qt样式表，还能在Qt Designer中编辑控件的styleSheet属性，如下图所示：

但是这两种做法都是不推荐的，只能在自己写Demo或做测试的时候使用。正确的做法是把QSS写在后缀为qss的文本文件中。下面是两种加载qss文件的方法：

方法1

QFile file(":/qss/dark.qss");
if (file.open(QFile::ReadOnly)) {QString qss = QLatin1String(file.readAll());qApp->setStyleSheet(qss);file.close();
}

方法2

qApp->setStyleSheet("file:///:/qss/dark.qss");

方法2中这种直接读取qss文件的方式只支持qApp的setStyleSheet函数。
qApp是一个指向QApplication对象的全局指针，因此，别忘了#include <QApplication>

原文链接：Qt6入门教程 13：QPushButton-CSDN博客

这篇关于Qt6入门教程 13：QPushButton的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/656167。

相关文章

Java进阶13讲__第12讲_1/2

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory
阅读更多...
Weex入门教程之4，获取当前全局环境变量和配置信息(屏幕高度、宽度等)

Weex入门教程之4，获取当前全局环境变量和配置信息(屏幕高度、宽度等)

$getConfig() 获取当前全局环境变量和配置信息。 Returns: config (object): 配置对象；bundleUrl (string): bundle 的 url；debug (boolean): 是否是调试模式；env (object): 环境对象； weexVersion (string): Weex sdk 版本；appName (string): 应用名字；
阅读更多...
Weex入门教程之3，使用 Vue 开发 Weex 页面

Weex入门教程之3，使用 Vue 开发 Weex 页面

环境安装 在这里简略地介绍下，详细看官方教程 Node.js 环境 Node.js官网 通常，安装了 Node.js 环境，npm 包管理工具也随之安装了。因此，直接使用 npm 来安装 weex-toolkit。 npm 是一个 JavaScript 包管理工具，它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区，同样，Weex 也将很多工具发布到社区方便开发者使用。
阅读更多...
Weex入门教程之2，Android Studio安装Weex插件

Weex入门教程之2，Android Studio安装Weex插件

插件位置及描述 https://plugins.jetbrains.com/idea/plugin/8460-weex 貌似对windows还不是很支持，先放着吧。 安装 插件功能 先预览下都有什么功能 安装完成Weex插件后，如果在main toolbar找不到这些功能图标，那么就需要手动添加到main toolbar 添加到main toolbar 红框内就是
阅读更多...
Weex入门教程之1，了解Weex

Weex入门教程之1，了解Weex

【资料合集】Weex Conf回顾集锦：讲义PDF+活动视频！ PDF分享：链接：http://pan.baidu.com/s/1hr8RniG 密码：fa3j 官方教程：https://weex-project.io/cn/v-0.10/guide/index.html 用意 主要是介绍Weex，并未涉及开发方面，好让我们开始开发之前充分地了解Weex到底是个什么。 以下描述主要摘取于
阅读更多...
13 transition数组的动画使用

13 transition数组的动画使用

划重点 动画：transitiontransition-group ：数组动画数组的 添加 / 删除 豆腐粉丝汤 清淡又健康 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><me
阅读更多...
【CTF Web】BUUCTF Upload-Labs-Linux Pass-13 Writeup（文件上传+PHP+文件包含漏洞+PNG图片马）

【CTF Web】BUUCTF Upload-Labs-Linux Pass-13 Writeup（文件上传+PHP+文件包含漏洞+PNG图片马）

Upload-Labs-Linux 1 点击部署靶机。 简介 upload-labs是一个使用php语言编写的，专门收集渗透测试和CTF中遇到的各种上传漏洞的靶场。旨在帮助大家对上传漏洞有一个全面的了解。目前一共20关，每一关都包含着不同上传方式。 注意 1.每一关没有固定的通关方法，大家不要自限思维！ 2.本项目提供的writeup只是起一个参考作用，希望大家可以分享出自己的通关思路
阅读更多...
Chapter 13 普通组件的注册使用

Chapter 13 普通组件的注册使用

欢迎大家订阅【Vue2+Vue3】入门到实践 专栏，开启你的 Vue 学习之旅！ 文章目录 前言一、组件创建二、局部注册三、全局注册 前言 在 Vue.js 中，组件是构建应用程序的基本单元。本章详细讲解了注册和使用 Vue 的普通组件的两种方式：局部注册和全局注册。 本篇文章参考黑马程序员 一、组件创建 ①定义 Vue 组件是一种具有特定功能的 Vue 实
阅读更多...
VMware Fusion Pro 13 Mac版虚拟机 安装Win11系统教程

VMware Fusion Pro 13 Mac版虚拟机 安装Win11系统教程

Mac分享吧 文章目录 Win11安装完成，软件打开效果一、VMware安装Windows11虚拟机1️⃣：准备镜像2️⃣：创建虚拟机3️⃣：虚拟机设置4️⃣：安装虚拟机5️⃣：解决连不上网问题 安装完成！！！ Win11安装完成，软件打开效果 一、VMware安装Windows11虚拟机 首先确保自己的mac开启了网络共享。不然虚拟机连不上👀的 1️⃣：准备镜像
阅读更多...
Python简单入门教程helloworld

Python简单入门教程helloworld

Python 学习资源 推荐书籍： Python核心编程（第二版） （强烈推荐，建议有一定基础的看，或者看完简明Python教程再看） Python 基础教程 第二版 （入门，没有核心编程好，但也不错） 编写高质量代码：改善Python程序的91个建议 （进阶，有一定基础再看） 书籍下载： Python 教程（部分内容来源于网络, 历时一年多总结整理的，给刚刚入门的
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2