当前位置: 首页 > 工具软件 > PushButton > 使用案例 >

Qt学习总结之QPushbutton详解

邵弘义
2023-12-01

一、简述

  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
  ui.btn_search->resize(50, 80);
  
  //方法2
  QSize btnSize;
  btnSize.setWidth(100);
  btnSize.setHeight(40);
  pBtnTest->resize(btnSize);

设置显示文本信息的字体

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

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

pBtnTest->setText("我是一个很长很长很长的文本");
    
// adjustSize():自动调整控件的大小,以适应其内容;
pBtnTest->adjustSize();

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

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

边框线设置
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;}");

鼠标悬浮时颜色

  //鼠标移动到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;}");

设置按钮获取焦点

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

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

// 清除控件的焦点
pBtnTest->clearFocus();

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

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

设置按钮的 禁用 和 启用

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

// 启用控件
pBtnTest->setEnabled(true);

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

pBtnTest->setFlat(true);

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

pBtnTest->setDefault(true);

设置按钮上显示的图标

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

// 设置图标的大小
pBtnTest->setIconSize(QSize(24, 24));

设置可选按钮

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);}");

设置不同状态下的通用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);}");

设置按钮样式:前景色,背景色,边框等

// 定义初始样式集合
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(';'));
});

为按钮添加右键菜单

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);
}

为按钮添加左键菜单

// 菜单
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);

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

QPushButton::menu-indicator#btn_room_setting{
	image:none;
}
 类似资料: