Qt实现自定义按钮的三态效果

合集下载

qt特效按钮

查看文章qt特效按鈕QPushButton[轉載]2010-01-29 13:22Reprintedfrom /index.php?title=AeroButton//Declaration#include <QtCore>#include <QtGui>class AeroButton : public QPushButton{Q_OBJECTpublic:AeroButton(QWidget * parent = 0);AeroButton(const QString & text, QWidget * parent = 0);AeroButton(const QIcon & icon, const QString & text, QWidget * parent = 0);virtual ~AeroButton();void setColor(QColor color) { m_color = color; }void setHighlight(QColor highlight) { m_highlight = highlight; }void setShadow(QColor shadow) { m_shadow = shadow; }//Range: 0.0 [invisible] - 1.0 [opaque]void setOpacity(qreal opacity) { m_opacity = opacity; }//Range: 0 [rectangle] - 99 [oval]void setRoundness(int roundness) { m_roundness = roundness; }protected:void paintEvent(QPaintEvent * pe);void enterEvent(QEvent * e);void leaveEvent(QEvent * e);void mousePressEvent(QMouseEvent * e);void mouseReleaseEvent(QMouseEvent * e);private:QRect calculateIconPosition(QRect button_rect, QSize icon_size);private:bool m_hovered;bool m_pressed;QColor m_color;QColor m_highlight;QColor m_shadow;qreal m_opacity;int m_roundness;};//Implementation#include "AeroButton.h"AeroButton::AeroButton(QWidget * parent): QPushButton(parent),m_hovered(false),m_pressed(false),m_color(Qt::gray),m_highlight(Qt::lightGray),m_shadow(Qt::black),m_opacity(1.0),m_roundness(0){}AeroButton::AeroButton(const QString & text, QWidget * parent) : QPushButton(text, parent),m_hovered(false),m_pressed(false),m_color(Qt::gray),m_highlight(Qt::lightGray),m_shadow(Qt::black),m_opacity(1.0),m_roundness(0){}AeroButton::AeroButton(const QIcon & icon, const QString & text, QWidget * parent): QPushButton(icon, text, parent),m_hovered(false),m_pressed(false),m_color(Qt::gray),m_highlight(Qt::lightGray),m_shadow(Qt::black),m_opacity(1.0),m_roundness(0){}AeroButton::~AeroButton(){}void AeroButton::paintEvent(QPaintEvent * pe){Q_UNUSED(pe);QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);//test for state changesQColor button_color;if(this->isEnabled()){m_hovered ? button_color = m_highlight : button_color = m_color;if(m_pressed){button_color = m_highlight.darker(50);}}else{button_color = QColor(50, 50, 50);}QRect button_rect = this->geometry();//outlinepainter.setPen(QPen(QBrush(Qt::black), 2.0));QPainterPath outline;outline.addRoundedRect(0, 0, button_rect.width(),button_rect.height(), m_roundness, m_roundness);painter.setOpacity(m_opacity);painter.drawPath(outline);//gradientQLinearGradient gradient(0, 0, 0, button_rect.height());gradient.setSpread(QGradient::ReflectSpread);gradient.setColorAt(0.0, button_color);gradient.setColorAt(0.4, m_shadow);gradient.setColorAt(0.6, m_shadow);gradient.setColorAt(1.0, button_color);QBrush brush(gradient);painter.setBrush(brush);painter.setPen(QPen(QBrush(button_color), 2.0));//main buttonQPainterPath painter_path;painter_path.addRoundedRect(1, 1, button_rect.width() - 2, button_rect.height() - 2, m_roundness, m_roundness);painter.setClipPath(painter_path);painter.setOpacity(m_opacity);painter.drawRoundedRect(1, 1, button_rect.width() - 2, button_rect.height() - 2, m_roundness, m_roundness);//glass highlightpainter.setBrush(QBrush(Qt::white));painter.setPen(QPen(QBrush(Qt::white), 0.01)); painter.setOpacity(0.30);painter.drawRect(1, 1, button_rect.width() - 2, (button_rect.height() / 2) - 2);//textQString text = this->text();if(!text.isNull()){QFont font = this->font();painter.setFont(font);painter.setPen(Qt::white);painter.setOpacity(1.0);painter.drawText(0, 0, button_rect.width(), button_rect.height(), Qt::AlignCenter, text);}//iconQIcon icon = this->icon();if(!icon.isNull()){QSize icon_size = this->iconSize();QRect icon_position =this->calculateIconPosition(button_rect, icon_size); painter.setOpacity(1.0);painter.drawPixmap(icon_position,QPixmap(icon.pixmap(icon_size)));}}void AeroButton::enterEvent(QEvent * e){m_hovered = true;this->repaint();QPushButton::enterEvent(e);}void AeroButton::leaveEvent(QEvent * e){m_hovered = false;this->repaint();QPushButton::leaveEvent(e);}void AeroButton::mousePressEvent(QMouseEvent * e){m_pressed = true;this->repaint();QPushButton::mousePressEvent(e);}void AeroButton::mouseReleaseEvent(QMouseEvent * e){m_pressed = false;this->repaint();QPushButton::mouseReleaseEvent(e);}QRect AeroButton::calculateIconPosition(QRect button_rect, QSize icon_size){int x = (button_rect.width() - icon_size.width()) / 2;int y = (button_rect.height() - icon_size.height()) / 2; int width = icon_size.width();int height = icon_size.height();QRect icon_position;icon_position.setX(x);icon_position.setY(y);icon_position.setWidth(width);icon_position.setHeight(height);return icon_position;}//Usage#include "AeroButton.h"AeroButton * button = new AeroButton("Test", this);button->setColor(QColor(Qt::darkRed));button->setShadow(QColor(Qt::black));button->setHighlight(QColor(Qt::red));button->setRoundness(20);button->setOpacity(0.65);connect(button, SIGNAL(clicked()), myWidget, SLOT(handleClick()));。

QT新建一个窗口控制程序以实现添加按钮点击弹出信息提示框为例

QT新建一个窗口控制程序以实现添加按钮点击弹出信息提示框为例为了实现添加按钮点击弹出信息提示框的功能，我们可以使用Qt来创建一个窗口控制程序。

首先，我们需要创建一个Qt窗口应用程序项目。

在Qt Creator中选择"新建项目"，然后选择"C++"和"Qt Widgets应用"，填写项目名称和路径，然后点击"下一步"。

在下一个界面，可以选择使用预设的窗口模板。

选择一个适合的窗口模板，例如"MainWindow"，然后点击"下一步"。

接下来，在"项目管理器"中，展开源文件夹，找到"mainwindow.cpp"文件。

双击打开该文件。

在"mainwindow.cpp"文件中，我们需要添加按钮和相应的点击事件。

如果不存在"MainWindow"类的构造函数，则需要手动创建构造函数。

我们可以在构造函数中添加按钮。

```cpp#include "mainwindow.h"#include "ui_mainwindow.h"#include <QMessageBox>MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)ui->setupUi(this);//创建按钮QPushButton *btn = new QPushButton("添加按钮", this);btn->setGeometry(100, 100, 100, 30);//连接按钮的点击事件到槽函数connect(btn, SIGNAL(clicked(), this, SLOT(showMessageBox());MainWindow::~MainWindowdelete ui;//槽函数：点击按钮弹出信息提示框void MainWindow::showMessageBoxQMessageBox::information(this, "提示", "按钮已点击");```在上面的代码中，我们首先在构造函数中创建了一个按钮，并设置了按钮的位置和尺寸。

QtQSS样式化菜单QmenuQAction

QtQSS样式化菜单QmenuQAction项⽬是⼀款平板上的软件，菜单放在了右下⾓，没有⽤qss设置样式之前，菜单⾮常的⼩，菜单项也都挤在了⼀块，设置样式后效果⾮常好。

先上⼀张效果图吧，可以看到QSS样式化后的菜单的特点：上下左右间距增⼤了，调整到很是的⼤⼩，菜单项⽬中间有⼀条间隔的横线区分各个菜单项，菜单中的QAction⿏标经过时菜单背景会变成蓝⾊等。

实现这种效果如果在Qt中⽤C++语句实现可能有些困难，我也没有这么做过，后来参考了Qt帮助⽂档的⼀些QSS的例⼦做出了这种效果。

具体实现做法将⼀下样式添加到Qt的QSS样式表⽂件中，要根据你的实际情况调整相应的长宽等值，具体的参数说明下⾯代码注释中已经说明。

如果你想对QSS有个好的了解建议学习⼀些简单的CSS语法，QSS就是借鉴了CSS，但是⽐它简单多了，之后你会发现QSS⾮常简单，⽽且⾮常便捷好⽤，为程序美化开发省下很多时间。

1/*Qmenu Style Sheets*/2 QMenu {3 background-color: white; /* sets background of the menu 设置整个菜单区域的背景⾊，我⽤的是⽩⾊：white*/4 border: 1px solid white;/*整个菜单区域的边框粗细、样式、颜⾊*/5 }67 QMenu::item {8/* sets background of menu item. set this to something non-transparent9 if you want menu color and menu item color to be different */10 background-color: transparent;11 padding:8px 32px;/*设置菜单项⽂字上下和左右的内边距，效果就是菜单中的条⽬左右上下有了间隔*/12 margin:0px 8px;/*设置菜单项的外边距*/13 border-bottom:1px solid #DBDBDB;/*为菜单项之间添加横线间隔*/14 }1516 QMenu::item:selected { /* when user selects item using mouse or keyboard */17 background-color: #2dabf9;/*这⼀句是设置菜单项⿏标经过选中的样式*/18 }。

QT关于控件的教程

QT关于控件的教程本文将介绍QT控件的基本用法和常见功能。

1. 按钮（QPushButton）是最常用的控件之一，它可以用于触发特定的操作。

使用QT的QPushButton类创建按钮对象，并将其添加到窗口中，通过connect函数将按钮的clicked信号与特定的槽函数关联起来，当按钮被点击时，槽函数会被调用。

3. 文本框（QLineEdit）用于获取用户输入的文本信息。

使用QT的QLineEdit类创建文本框对象，并将其添加到窗口中，通过textChanged信号可以获取到用户输入的文本内容。

4. 列表（QListWidget）用于显示一组可选项，并允许用户从中选择一个或多个选项。

使用QT的QListWidget类创建列表对象，并向其中添加项，通过itemClicked和itemDoubleClicked信号可以捕获用户的点击事件。

5. 菜单（QMenu）用于创建应用程序的菜单栏和上下文菜单。

使用QT的QMenu类创建菜单对象，并添加菜单项，通过addAction函数将动作与菜单项关联，当用户点击菜单项时，动作中的槽函数会被调用。

6. 复选框（QCheckBox）用于允许用户从一组选项中选择一个或多个选项。

使用QT的QCheckBox类创建复选框对象，并将其添加到窗口中，通过isChecked函数可以获取复选框的选中状态。

7. 滑块（QSlider）用于允许用户通过拖动滑块来选择一个范围内的数值。

使用QT的QSlider类创建滑块对象，并将其添加到窗口中，通过valueChanged信号可以获取滑块的当前值。

8. 进度条（QProgressBar）用于显示任务的进度。

使用QT的QProgressBar类创建进度条对象，并在任务进行过程中更新进度，通过setValue函数设置进度条的当前值。

9. 树状视图（QTreeView）用于显示层级结构数据，如文件系统或数据库表。

使用QT的QTreeView类创建树状视图对象，并通过QStandardItemModel类设置数据模型，通过setItem函数向视图中添加数据项。

qt 按钮的用法

Qt按钮的用法Qt是一个跨平台的C++应用程序开发框架，提供了丰富的GUI（图形用户界面）组件和工具。

其中，按钮是Qt中最常用和重要的控件之一。

在本文中，我们将详细介绍Qt按钮的用法，包括创建按钮、设置按钮属性、处理按钮点击事件等。

1. 创建按钮在Qt中创建一个按钮非常简单。

可以通过以下步骤来实现：#include <QPushButton>// 创建一个父级窗口QWidget *parent = new QWidget;// 创建一个按钮QPushButton *button = new QPushButton("Click me", parent);// 设置按钮位置和大小button->setGeometry(100, 100, 200, 50);// 显示窗口和按钮parent->show();button->show();上述代码首先包含了QPushButton头文件，然后创建了一个父级窗口对象parent和一个按钮对象button。

接下来，使用setGeometry()方法设置了按钮的位置和大小，并使用show()方法显示了窗口和按钮。

2. 设置按钮属性除了基本的位置和大小设置外，我们还可以为按钮设置其他属性，如文本、图标、样式等。

下面是一些常用的设置方法：2.1 设置文本可以使用setText()方法为按钮设置文本内容：button->setText("Click me");2.2 设置图标可以使用setIcon()方法为按钮设置图标：button->setIcon(QIcon(":/icons/button_icon.png"));其中:icons/button_icon.png是按钮图标的路径。

2.3 设置样式可以使用setStyleSheet()方法为按钮设置样式：button->setStyleSheet("background-color: blue; color: white;");上述代码将按钮的背景色设置为蓝色，文本颜色设置为白色。

Qt数字键盘实现

Qt实现数字键盘要在多个控件中输入内容，难点在于区分控件。

每个人的思路不同实现方式也不同，这是我的两种实现方式：1、重写焦点事件void focusInEvent(QFocusEvent *);鼠标点击控件时会进入控件的焦点事件，重写此事件可以知道用户点击了那个控件，来区分输入的对象。

2、添加事件过滤器bool eventFilter(QObject *obj, QEvent *ev);过滤出需要的事件信息，来区分要在那个控件中输入信息。

下面以QlineEdit为例来实现数字键盘，下图是UI界面，使用Qt Designer 进行界面设计。

左侧是输入栏，当点击数字键盘时，在里面输入内容。

数字键盘下面的输入栏在程序中加载显示的。

当点击确认按钮时，右侧显示栏输入的内容。

下面是代码实现的内容1、重写焦点事件void MyLineEdit::focusInEvent( QFocusEvent *ev ){emit EditinEvent();//发送自定义信号__super::focusInEvent(ev);}2、事件过滤器//把需要按键输入的QLineEdit加入事件过滤器ui.lineEdit_1->installEventFilter(this);ui.lineEdit_2->installEventFilter(this);ui.lineEdit_3->installEventFilter(this);//事件过滤器bool Qtkeyboard::eventFilter( QObject *obj, QEvent * ev){//判断是否为焦点进入属性if (ev->type() !=QEvent::FocusIn){return__super::eventFilter(obj,ev);}QString str = obj->objectName();if(str == "lineEdit_1"){lineEdit = dynamic_cast<QLineEdit*> (obj);}elseif (str == "lineEdit_2"){lineEdit = dynamic_cast<QLineEdit*> (obj);}elseif (str == "lineEdit_3"){lineEdit = dynamic_cast<QLineEdit*> (obj);}else{}return__super::eventFilter(obj,ev);}按键部分的实现，首先为了减少代码中的信号和槽的链接，使用QbuttonGroup然后发送按键事件消息来，实现按键的功能。

QT入门-在窗体中添加按钮以及对窗体进行设置

QT⼊门-在窗体中添加按钮以及对窗体进⾏设置1） QT中，按钮类叫做QPushButton。

在mywidget.h的MyWidget类的私有变量中：QPushButton b1; 或者QPushButton* b2;按住F4可以直接跳到.cpp⽂件。

2）按钮初始化：在窗⼝类的构造函数⾥初始化即可。

b2=new QPushButton(…)选中按F1可以查看构造函数以及其参数。

(const QIcon &icon, const QString &text, QWidget *parent = nullptr)//图标以及……(const QString &text, QWidget *parent = nullptr)//按钮上显⽰的内容以及…(QWidget *parent = nullptr)//⽗窗⼝⾄于修改内容的函数，需要从⽗类（QAbstractButton）⾥找。

即void setText(const QString& text);因此找不到相应的成员函数实现其功能的时候，可以从⽗类⾥找⼀下。

b2->setText(“Hello QT”);b2=new QPushButton(“Hello QT”);b2->show();想要的效果是把按钮显⽰到窗⼝⾥（按钮实际上也是窗⼝？），但这时候按钮是独⽴显⽰出来的。

如果窗⼝需要依附于另⼀个窗⼝，就应该给该窗⼝指定⽗类，这可以在构造函数内实现。

因为此处实例化按钮是在MyWidget构造函数内实现的，所以⽗类指针是this，即b2=new QPushButton(“Hello QT”,this);或者：QPushButton b1; b1.setParent(this);注意，如果指定了⽗亲的话，就不⽤调⽤show函数了，因为直接在⽗类窗⼝显⽰了。

3）两个按钮默认在同⼀个位置的话会发⽣覆盖，需要改变按钮的位置，相当于移动。

Qt精美的button合集

Qt精美的button合集常⽤精美buttonqss样式如下：QPushButton#pushButton{background-color:rgb(134,183,200);border:2px solid #5F92B2;border-radius:5px;color:white}QPushButton#pushButton:hover{background-color:rgb(0,130,150);border:2px solid #5F92B2;border-radius:5px;color:white;}QPushButton#pushButton:hover:pressed{background-color:rgb(85,170,255);border:2px solid #3C80B1;border-radius:5px;color:white;}QPushButton#pushButton_2{border: 1px solid #333333;padding: 4px;min-width: 65px;min-height: 12px;}QPushButton#pushButton_2:hover {background-color: #333333;border-color: #444444;}QPushButton#pushButton_2:pressed {background-color: #111111;border-color: #333333;color: yellow;}QPushButton#pushButton_2:disabled {color: #333333;}QPushButton#pushButton_3{color:white;background-color:rgb(14 , 150 , 254);border-radius:5px;}QPushButton#pushButton_3:hover{color:white;background-color:rgb(44 , 137 , 255);}QPushButton#pushButton_3:pressed{color:white;background-color:rgb(14 , 135 , 228);padding-left:3px;padding-top:3px;}QPushButton#pushButton_4{border: 1px solid #C0C0C0;background-color:#C0C0C0;border-style: solid;border-radius:0px;width: 40px;height:20px;padding:0 0px;margin:0 0px;}QPushButton#pushButton_4:pressed{ border: 1px solid black;background-color:#C0C0C0;border-style: solid;border-radius:0px;width: 40px;height:20px;padding:0 0px;margin:0 0px;}QPushButton#pushButton_5{border: 1px solid #C0C0C0;background-color:#FFFFFF;border-style: solid;border-radius:0px;width: 100px;height:20px;padding:0 0px;}QPushButton#pushButton_5:hover{ border: 1px solid #E3C46F;background-color:#FEF4BF;border-style: solid;border-radius:2px;width: 40px;height:20px;padding:0 0px;}QPushButton#pushButton_5:pressed{ background-color:#EAF0FF;border: 1px solid #AAB4C4;width: 40px;height:20px;padding:0 0px;border-radius:1px;}QPushButton#pushButton_6{color:red;background-color:rgb(30,75,10);border-style:outset;border-width:2px;border-color:rgb(10,45,110);border-radius:10px;font:bold 14px;min-width:100px;min-height:20px;padding:4px;}QPushButton#pushButton_6:pressed { background-color:rgb(40,85,20);border-style:inset;padding-left:6px;padding-top:6px;}QPushButton#pushButton_7{border:2px solid red;}QPushButton#pushButton_7:pressed { border:2px solid black;}Qt添加渐变⾊：右键控件渐变⾊的样式。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Qt实现自定义按钮的三态效果
好久之前做的一个小软件，好长时间没动过了，在不记录下有些细节可能都忘了，这里整理下部分功能的实现。

按钮的三态，指的是普通态、鼠标的停留态、点击态，三态是界面交互非常基本的一项功能，Qt中如果使用的是原始的按钮，三态的效果是有的，鼠标放上去会变色，点击的时候有凹陷的效果，工具栏中的图标也具备三态效果，但是如果自定义的图标这个效果就没有了。

下面整理下自定义按钮图标的方法，先看下我做的效果图：图中表示了鼠标放在按钮上和按下的效果，完成了基本的三态，下面说下我的具体实现过程。

资源准备首先要准备好对应状态的按钮图标，按钮图标可以从网上搜集，图标需要找png格式的，ico格式的可以使用工具转换为png格式的，而且是背景透明的png格式，要想实现不同状态对应不同的效果还需要处理出其他状态，这就得靠PS来完成了，使用PS也非常简单，我这里使用PS的内阴影来实现按下的效果，用斜面和浮雕来实现鼠标停留效果。

具体设置如下面两幅图所示：图：使用内阴影实现的按下效果图：使用斜面和浮雕实现的鼠标停留效果处理好后的图标如下图。

加入工程将处理好的图标文件放入工程文件夹下，新建Qt-Qt资源文件。

输入文件名保存并加入工程。

依次添加前缀，添加文件将文件
加入工程，如下图所示。

这些文件添加到工程后就可以在界面设计中使用，很多人在界面设计中改变按钮的样式会直接选择按钮图标，如下图所示。

通过选择按钮的icon设置对应大小来实现，然而这样的一个效果就是按钮仍然是有背景和边框的，效果如下图所示。

因此很多人的实现方法是通过继承QToolButton或者重绘按钮来实现，然而这些操作仍然相对麻烦，经过对比和查找，这里使用StyleSheet来实现。

找到对应的按钮，先在界面编辑中编辑对应的样式表，这里添加border-image，对应普通情况下的按钮图标。

然后在主程序中在按钮使用之前指定其他两种状态所对应的图标，代码非常直接，就是指定每种状态对应的文件，QPushButton：hover标示鼠标悬停所对应的状态，QPushButton：pressed则对应鼠标点击的状态，代码如下，注意包含的头文件。

#include
ui->play_button->setStyleSheet("QPushButton{border-ima ge: url(:/new/icons/icons/play-pause.png);}"
"QPushButton:hover{border-image:
url(:/new/icons/icons/play-pause-hover.png);}"
"QPushButton:pressed{border-image:
url(:/new/icons/icons/play-pause-pressed.png);}");
void MainWindow::button_init()
{
ui->play_button->setStyleSheet("QPushButton{border-ima ge: url(:/new/icons/icons/play.png);}"
"QPushButton:hover{border-image:
url(:/new/icons/icons/play-hover.png);}"
"QPushButton:pressed{border-image:
url(:/new/icons/icons/play-pressed.png);}");
ui->rec_button->setStyleSheet("QPushButton{border-imag e: url(:/new/icons/icons/play-rec.png);}"
"QPushButton:hover{border-image:
url(:/new/icons/icons/play-rec-hover.png);}"
"QPushButton:pressed{border-image:
url(:/new/icons/icons/play-rec-pressed.png);}");
ui->stop_button->setStyleSheet("QPushButton{border-ima ge: url(:/new/icons/icons/play-stop.png);}"
"QPushButton:hover{border-image:
url(:/new/icons/icons/play-stop-hover.png);}"
"QPushButton:pressed{border-image:
url(:/new/icons/icons/play-stop-pressed.png);}");
ui->options_button->setStyleSheet("QPushButton{border-i mage: url(:/new/icons/icons/play-options.png);}"
"QPushButton:hover{border-image:
url(:/new/icons/icons/play-options-hover.png);}"
"QPushButton:pressed{border-image:
url(:/new/icons/icons/play-options-pressed.png);}");
ui->save_button->setStyleSheet("QPushButton{border-im age: url(:/new/icons/icons/play-star.png);}"
"QPushButton:hover{border-image:
url(:/new/icons/icons/play-star-hover.png);}"
"QPushButton:pressed{border-image:
url(:/new/icons/icons/play-star-pressed.png);}");
}
同样，按钮可以根据当前状态来进行变化，如下图中设计软件界面的最左边的按钮，会根据图像采集状态显示为播放或者暂停按钮，而右侧的一个按钮则用来模拟一个LED，根据采集状态来显示对应的颜色。

最后在运行的时候即可实现对应的效果。