【Qt-Button】 - 技术栈

Qt编程指南

[■ QPushButton](#■ QPushButton)
- 去除虚线边框：
- [QPushButton 中添加 buttonGroup组合互斥按钮](#QPushButton 中添加 buttonGroup组合互斥按钮)
- [QPushButton *bt = static_cast<QPushButton *>(sender())](#QPushButton *bt = static_cast<QPushButton *>(sender()))
[■ QToolButton](#■ QToolButton)
[■ QRadioButton](#■ QRadioButton)
[■ QCommandLinkButton](#■ QCommandLinkButton)
[■ QDialogButtonBox](#■ QDialogButtonBox)
[■ QButtonGroup](#■ QButtonGroup)
■
■
■
■

■ QPushButton

c 复制代码

/* 设置主窗口的样式1 */
this->setStyleSheet(QMainWindow { background-color: rgba(255, 245, 238, 100%); });
/* 设定两个QPushButton对象的位置 */
pushButton1->setGeometry(300,200,80,40);
pushButton1->setStyleSheet(
            "QPushButton{"                                       // 正常状态样式
            "background-color: rgb(50, 50, 50);"       // 背景色（也可以设置图片）
            "color: white;"                              // 字体颜色
            "font: bold 13px;"                         // 字体: 加粗 大小
            "border-radius: 5px;"                    // 边框圆角半径像素
            "border: 2px solid rgb(50, 50, 50);"       // 边框样式：border-width border-style border-color
            "border-style:outset;"                            // 定义一个3D突出边框，inset与之相反
            "text-align: left;"                 // 文本：左对齐
            "}"

            "QPushButton:hover{"       // 聚焦样式 hover focus
            "background-color:rgb(255, 128, 64);"
            "color: white;"
            "border-radius: 5px;"
            "border: 2px solid white;"
            "border-style:outset;"
            "font:bold 13px;"
            "text-align: left;"
        "}");

	QPushButton{
	border: 1px solid gray;
	color: rgb(255, 255, 255);
	background-color: rgb(250, 140, 50);
	border-radius:5px;
	}
	QPushButton:hover{
	background-color: rgb(32, 175, 168);
	}
	QPushButton:pressed{
	background-color: rgb(32, 175, 168);
	}
	QPushButton:disabled{
	background-color: rgb(32, 175, 168);
	}

	style.qss
	QPushButton#addAlarm {
	border-image:url(:/icons/addalarm1.png);
	background:transparent;
	outline: none;
	}
	
	QPushButton#addAlarm:hover {
	border-image:url(:/icons/addalarm2.png);
	}
	
	QPushButton#yesButton {
	border: 1px solid #22222222;
	border-radius: 25px;
	background:#22222222;
	outline:none;
	}
	
	QPushButton#yesButton:pressed {
	background:#44222222;
	color:white;
	}

	QPushButton#cancelButton {
	border: 1px solid #22222222;
	border-radius: 25px;
	background:#22222222;
	outline:none;
	}
	QPushButton#cancelButton:pressed {
	background:#44222222;
	color:white;
	}

去除虚线边框：

c 复制代码

方法一：
方法二：ui->pushButton->setFocusPolicy(Qt::NoFocus)；
方法三：也是通过qss样式表来实现，代码如下所示。
ui->pushButton->setStyleSheet("padding: -1");  

QPushButton 中添加 buttonGroup组合互斥按钮

ui->buttonGroup->setExclusive(true);//启用互斥

QPushButton{
border: 1px solid gray;
color: rgb(255, 255, 255);
background-color: rgb(38, 42, 53);
border-radius:5px;
}

QPushButton:pressed{
background-color: rgb(32, 175, 168);
}

QPushButton:checked{
background-color: rgb(32, 175, 168);
}

勾选
选中checkable后，Button变成切换按钮(toggle button)，可以有两种状态：按下/弹起
默认状况下checkable是不选中的，Button默认为触发按钮(trigger button)，按下去马上弹起来

QPushButton 中添加 buttonGroup组合互斥按钮

c 复制代码

实现步骤
1、需要创建一个QButtonGroup，然后启用互斥属性
    QButtonGroup* btn_group;
    btn_group = new QButtonGroup(this);
    btn_group->setExclusive(true);//启用互斥
2、创建QPushButton，将按钮的checked启用，然后加入QButtonGroup中。
    QPushButton* btn = new QPushButton(this);
    btn->setCheckable(true);  //将checked功能启用
    btn_group->addButton(btn);//添加进QButtonGroup中
3、设置QPushButton的qss样式，按下和没按下的样式
//没按下（正常情况）
QPushButton{
    border:1px solid rgb(143,143,143);
    background-color:white;
    color:black;
}
//按下
QPushButton:checked{
    border:1px solid rgb(143,143,143);
    background-color:rgb(2,125,180);
    color:white;
}

ui->pushButton_Row2_sub->setAutoRepeat(true); //启用长按
ui->pushButton_Row2_sub->setAutoRepeatDelay(400);//触发长按的时间
ui->pushButton_Row2_sub->setAutoRepeatInterval(60);//长按时click信号间隔

QPushButton bt = static_cast<QPushButton >(sender())

cpp 复制代码

QPushButton *bt = static_cast<QPushButton *>(sender()); //通过sender（） 可以直接得到激活此次槽函数调用的QObject对象的地址
 //由于确定是按钮所以直接强转

■ QToolButton

c 复制代码

将QToolButton添加到QButtonGroup中
UI中点击按钮，右键鼠标，添加到指定组中。
设置按钮属性,第一个红框勾选是设置按钮可选，第二个勾选就是设置自动互斥，当同一容器内的按钮勾选了这个选项就会自动互斥

3. 代码设置
ui->buttonGroup->setExclusive(true);//启用互斥
ui->buttonGroup->setId(ui->toolButton_add,0);
ui->buttonGroup->setId(ui->toolButton_delete,1);
ui->buttonGroup->setId(ui->toolButton_Next,2);
ui->buttonGroup->setId(ui->toolButton_Down,3);
ui->buttonGroup->setId(ui->toolButton_More,4);

样式配置

QToolButton{  
color:rgb(255, 255, 255);   
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 rgb(226,236,241),   
                            stop: 0.3 rgb(160,160,160),  
                              stop: 1 rgb(140,140,140));  
border:1px;  
border-radius:5px; /*border-radius控制圆角大小*/  
padding:2px 4px;
}  

QToolButton:hover{  /*鼠标放上后*/  
color:rgb(255, 255, 255);  
border-style:solid;  
border-top-left-radius:2px;  
border-top-right-radius:2px;  
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 rgb(226,236,241),   
                            stop: 0.3 rgb(160,160,160),  
                              stop: 1 rgb(120,120,120));  
border:1px;  
border-radius:5px;padding:2px 4px;  
} 
QToolButton:pressed{ /*按下按钮后*/  
color:rgb(255, 255, 255);  
 
border-style:solid;  
border-top-left-radius:2px;  
border-top-right-radius:2px;  
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 rgb(226,236,241),   
                            stop: 0.3 rgb(190,190,190),  
                              stop: 1 rgb(160,160,160));  
border:1px;  
border-radius:5px;padding:2px 4px;  
}  
QToolButton:checked{    /*选中后*/  
color:rgb(255, 255, 255);  
border-style:solid;  
border-top-left-radius:2px;  
border-top-right-radius:2px;  
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 rgb(226,236,241),   
                            stop: 0.3 rgb(190,190,190),  
                              stop: 1 rgb(160,160,160));  
border:1px;  
border-radius:5px;padding:2px 4px;  
}  
#toolButton {
margin-left:-75px;
padding-left:85px;
background:url(:/image/image/icon.png) center no-repeat;
font-size: 14px;
border: none;
}


#toolButton{
	min-width:55px;
	min-height:45px;
	border:none;
	padding-top:50px;
	margin-top:-25px;
	margin-left:25px;
	background:url(:/image/image/icon.png) center no-repeat;
}

■ QRadioButton

c 复制代码

示例一：
/* 实例化对象 */
radioButton1 = new QRadioButton(this);
radioButton2 = new QRadioButton(this);

/* 设置两个QRadioButton的位置和显示大小 */
radioButton1->setGeometry(300, 200, 100, 50);
radioButton2->setGeometry(400, 200, 100, 50);
/* 设置两个QRadioButton的显示文本 */
radioButton1->setText("开关一");
radioButton2->setText("开关二");

/* 设置初始状态，radioButton1的Checked为false,另一个为true*/
radioButton1->setChecked(false);
radioButton2->setChecked(true);
QRadioButton{
    spacing: 2px;
    color: white;
}

QRadioButton::indicator {
    width: 45px;
    height: 30px;
}

QRadioButton::indicator:unchecked {
    image: url(:/images/switch_off.png);
}

QRadioButton::indicator:checked {
    image: url(:/images/switch_on.png);
}

■ QCommandLinkButton

c 复制代码

/* 实例化对象 */
commandLinkButton = new QCommandLinkButton( "打开/home目录", "点击此将调用系统的窗口打开/home目录",this);
/* 设置QCommandLinkButton位置和显示大小 */
commandLinkButton->setGeometry(300, 200, 250, 60);
/* 信号槽连接 */
connect(commandLinkButton, SIGNAL(clicked()), this,
        SLOT(commandLinkButtonClicked()));
}

MainWindow::~MainWindow()
{
}
void MainWindow::commandLinkButtonClicked()
{
    /* 调用系统服务打开/home目录 */
    QDesktopServices::openUrl(QUrl("file:home/") );
}

■ QDialogButtonBox

示例一：

c 复制代码

/* 实例化并设置按钮的盒子的大小和位置 */
dialogButtonBox = new  QDialogButtonBox(this);
dialogButtonBox->setGeometry(300, 200, 200, 30);

/*使用Qt的Cancel按钮*/
dialogButtonBox->addButton(QDialogButtonBox::Cancel);

/*将英文"Cancel"按钮设置为中文"取消" */
dialogButtonBox->button(QDialogButtonBox::Cancel)->setText("取消");
/* 设定位置与大小 */
pushButton = new QPushButton(tr("自定义"));
/* 将pushButton添加到dialogButtonBox，并设定ButtonRole为ActionRole */
dialogButtonBox->addButton(pushButton, QDialogButtonBox::ActionRole);
/* 信号槽连接，带参数QAbstractButton *，用于判断用户点击哪个按键 */
connect(dialogButtonBox, SIGNAL(clicked(QAbstractButton * )),
        this, SLOT(dialogButtonBoxClicked(QAbstractButton *)));

void MainWindow::dialogButtonBoxClicked(QAbstractButton *button)
{
	/* 判断点击的对象是否为QDialogButtonBox::Cancel */
	if(button == dialogButtonBox->button(QDialogButtonBox::Cancel)) {
	    /* 打印"单击了取消键" */
	    qDebug() <<"单击了取消键"<<endl;
	    /* 判断点击的对象是否为pushButton */
	}else if(button == pushButton) {
	    /* 打印"单击了自定义键" */
	    qDebug() <<"单击了自定义键"<<endl;
	}
}

示例二：

cpp 复制代码

    DialogButtonBox = new QDialogButtonBox(QDialogButtonBox::Ok | QDialogButtonBox::Cancel);
    DialogButtonBox->button(QDialogButtonBox::Ok)->setText("发布");//将DialogButtonBox中的ok 变成汉化
    DialogButtonBox->button(QDialogButtonBox::Cancel)->setText("取消");

	QVBoxLayout *MainLayout = new QVBoxLayout();
    MainLayout->addWidget(DialogButtonBox);
    connect(DialogButtonBox->button(QDialogButtonBox::Ok), SIGNAL(clicked()), this, SLOT(slotOk()));
    connect(DialogButtonBox->button(QDialogButtonBox::Cancel), SIGNAL(clicked()), this, SLOT(slotCancel()));

■ QButtonGroup

c 复制代码

QList<QTreeWidgetItem *> rootList;
QTreeWidgetItem *items4 = new QTreeWidgetItem;   //添加第一个父节点
items4->setText(0,tr("数码相机"));
items4->setIcon(0,QIcon("E:\\Qt_Project\\QTabWidget\\9.ico"));
rootList.append(items4);

/* 实例化QToolButton对象 */
toolButton = new QToolButton();
/* 设置图标 */
toolButton->setIcon(icon);
/* 设置要显示的文本 */
toolButton->setText("帮助");

/* 调用setToolButtonStyle()方法，设置toolButoon的样式，设置为文本置于图标下方 */
toolButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
/* 最后将toolButton添加到ToolBar里 */
toolBar->addWidget(toolButton);

c 复制代码

/*互斥按钮组*/
ui->buttonGroup->setId(ui->radioButton_not,0);
ui->buttonGroup->setId(ui->radioButton_net,1);
ui->buttonGroup->setId(ui->radioButton_wifi,2);
ui->buttonGroup->setId(ui->radioButton_bt,3);
ui->buttonGroup->setExclusive(true); //设置这个按钮组为互斥模式
connect(ui->buttonGroup, SIGNAL(buttonClicked(int)), this, SLOT(slot_btnGroupClicked(int)));

//设置按钮选中
int nSelectBtn = 1;
QPushButton *btn = qobject_cast<QPushButton*> (buttonGroup->button(nSelectBtn));
btn->setChecked(true);    

int nSelectBtn = index;
QRadioButton *btn = qobject_cast<QRadioButton*> (ui->buttonGroup->button(nSelectBtn));
btn->setChecked(true);

■

c 复制代码

■

c 复制代码

■

c 复制代码

■

c 复制代码