Qt学习总结之QPushbutton详解

一、简述

1. 按钮，界面中常用的控件，默认矩形。
2. QPushButton的子类：QCommandLinkButton
3. 父类：QAbstractButton。QAbstractButton的父类是QWidget
4. 同样继承自QAbstractButton的还有QCheckBox, QPushButton, QRadioButton, and
   QToolButton
5. 常用信号：左键点击(clicked)

二、构造函数

QPushButton ( QWidget * parent = 0 ) QPushButton ( const QString &
text, QWidget * parent = 0 ) QPushButton ( const QIcon & icon, const
QString & text, QWidget * parent = 0 )

三、常用属性和方法

(1) QString text () const：返回按键上的文字；

(2) void setText ( const QString & text )：设置按键上的文字；

(3) bool autoDefault() const;：autoDefault属性，它会影响按键的外观；
(4) void setAutoDefault(bool);：设置autoDefault属性；
(5) bool isDefault() const;：default属性，仅在Dialog中此属性有效；
(6) void setDefault(bool);：设置default属性；
(7) void setFlat(bool);：设置FLAT属性
(8) bool isFlat() const;：设置按键的外观是否有突起。

二、常用功能

设置位置和大小

// 重新设定按钮的位置
pBtnTest->move(100, 50);

// 重新设定按钮的大小
pBtnTest->resize(80, 50);

// 设置按钮的位置和大小
pBtnTest->setGeometry(100, 50, 80, 50);
1
2
3
4
5
6
7
8

设置按钮长宽两种方法，具体方法如下代码示例

  //方法1
  ui.btn_search->resize(50, 80);
  
  //方法2
  QSize btnSize;
  btnSize.setWidth(100);
  btnSize.setHeight(40);
  pBtnTest->resize(btnSize);
1
2
3
4
5
6
7
8

设置显示文本信息的字体

pBtnTest->setFont(QFont("宋体", 18));
1

根据文本长度自动调整大小

pBtnTest->setText("我是一个很长很长很长的文本");
    
// adjustSize()：自动调整控件的大小，以适应其内容；
pBtnTest->adjustSize();
1
2
3
4

矩形直角弧度(设置成为圆形/椭圆)

 //border-radius:11px
 //border-radius:角弧度
 //11px：半径11px
  pBtnTest->setStyleSheet("QPushButton{background:rgb(225,226,226);border-radius:11px;}");
1
2
3
4

边框线设置
dashed | dot-dash | dot-dot-dash | dotted | double| groove| inset| outset| ridge| solid| none

  //border：边框线
   //2px:粗2px
  //线类型：slid
   //线颜色：#000000
   pBtnTest->setStyleSheet("QPushButton{background:grey;border-radius:11px;border:2px solid #000000;}");
   pBtnTest->setStyleSheet("QPushButton{background:rgb(50,20,50,20);border-radius:11px;border:5px double #000000;}");
1
2
3
4
5
6

鼠标悬浮时颜色

  //鼠标移动到button上变化：QPushButton:hover
   //背景：background-color
   pBtnTest->setStyleSheet("QPushButton{background:grey;border-radius:11px;border:2px solid #000000;}""QPushButton:hover{background-color: #FFFF0000;}"); 
   pBtnTest->setStyleSheet("QPushButton{background:rgb(50,20,50,20);border-radius:11px;border:5px double #000000;}QPushButton:hover{background-color: #19a91c;}");
1
2
3
4

设置按钮获取焦点

// 设置控件获取焦点
pBtnTest->setFocus();

// 获取控件是否具有焦点；如果控件有焦点，返回 true；
bool b = pBtnTest->hasFocus();
qDebug() << b;

// 清除控件的焦点
pBtnTest->clearFocus();
1
2
3
4
5
6
7
8
9

设置鼠标位于按钮区域时，光标的类型

pBtnTest->setCursor(QCursor(Qt::BusyCursor));
1

设置按钮的 禁用 和 启用

// 禁用控件
pBtnTest->setDisabled(true);

// 启用控件
pBtnTest->setEnabled(true);
1
2
3
4
5

设置按钮背景透明：即将按钮外观设为平铺

pBtnTest->setFlat(true);
1

设置在控件上按下 回车键 时，响应控件的 click 事件

pBtnTest->setDefault(true);
1

设置按钮上显示的图标

// 设置按钮上显示的图标
pBtnTest->setIcon(QIcon(":/Image/Luffy.png"));

// 设置图标的大小
pBtnTest->setIconSize(QSize(24, 24));
1
2
3
4
5

设置可选按钮

auto earMonitorSwitch = new QPushButton(this);
earMonitorSwitch->setCheckable(true);
earMonitorSwitch->setStyleSheet("QPushButton{border-image:url(./resource/audio/audio_setting/btn_earmonitor_close.png);}"
"QPushButton:checked{border-image:url(./resource/audio/audio_setting/btn_earmonitor_open.png);}");
1
2
3
4

设置不同状态下的通用CSS

pBtnTest->setStyleSheet("QPushButton{border-image:url(./resource/audio/audio_setting/close_normal.png);border:none;}"
		"QPushButton:hover{border-image:url(./resource/audio/audio_setting/close_hover.png);}"
		"QPushButton:pressed{border-image:url(./resource/audio/audio_setting/close_press.png);}");
1
2
3

设置按钮样式：前景色，背景色，边框等

// 定义初始样式集合
QStringList list;
list.append("color:white");                         // 前景色
list.append("background-color:rgb(85,170,255)");    // 背景色
list.append("border-style:outset");                 // 边框风格
list.append("border-width:5px");                    // 边框宽度
list.append("border-color:rgb(10,45,110)");         // 边框颜色
list.append("border-radius:20px");                  // 边框倒角
list.append("font:bold 30px");                      // 字体
list.append("padding:4px");                         // 内边距

// 设置按钮初始样式
pBtnTest->setStyleSheet(list.join(';'));                      
 
// 按钮按下时修改样式
list.replace(6, "font:bold 35px");
connect(pBtnTest, &QPushButton::pressed, [=](){
       pBtnTest->setStyleSheet(list.join(';'));
});

// 按钮弹起时恢复样式
list.replace(6, "font:bold 30px");
connect(pBtnTest, &QPushButton::released, [=](){
       pBtnTest->setStyleSheet(list.join(';'));
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

为按钮添加右键菜单

auto button = new QPushButton(u8"按钮");
button->setContextMenuPolicy(Qt::ActionsContextMenu);
if (type == AccomSoundType::mySound)
{
	auto deleteAction = new QAction(left);
	deleteAction->setText(u8"删除");
	connect(deleteAction, &QAction::triggered, this, [=]() {
		trace("删除");
	});
	button->addAction(deleteAction);
}
1
2
3
4
5
6
7
8
9
10
11

为按钮添加左键菜单

// 菜单
QMenu *pMenu = new QMenu(this);
pMenu->addAction(QString::fromLocal8Bit("设置"));
pMenu->addAction(QString::fromLocal8Bit("版本检测"));
pMenu->addSeparator();
pMenu->addAction(QString::fromLocal8Bit("关于我们"));
pMenu->addAction(QString::fromLocal8Bit("退出"));

// 按钮
QPushButton *pButton = new QPushButton(this);
pButton->setText(QString::fromLocal8Bit("主菜单"));

// 设置菜单
pButton->setMenu(pMenu);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

上面的方法会让按钮显示一个下拉的三角形图标，如果想取消这个图片可以用 qss 去除：

QPushButton::menu-indicator#btn_room_setting{
	image:none;
}
1
2
3