Qt之QSS：带CheckBox的QGroupBox及其样式设计

前言

在引入QGroupBox的QSS时，会出现下图中的三种问题，导致界面显示极其丑陋。所以要改变QSS设置使界面更bf~

 

图a 左边显示问题

 

 

图b 标题下沉问题

图c 不对称

下面是两个方式改变QSS让界面更加舒服~  顺便在原生QGroupBox基础上添加了checkBox来实现功能。

 

一、QSS设置

     普通的QGroupBox是不带CheckBox的，当CheckBox未选中时，QGroupBox中的所有控件都是不可用的，这样界面布局可以更加的灵活多变，想要QGroupBox带上CheckBox其实很简单的，下面就来说明这一操作：

QGroupBox  *m_pModelGBox;    
m_pModelGBox = new QGroupBox(tr("StartUsing"), this);
m_pModelGBox->setCheckable(true);    //将CheckBox属性释放出来；
m_pModelGBox->setChecked(false);

这样就构造出了一个带CheckBox的QGroupBox，默认是不选中的，这样就可以了；
下面对QGroupBox的样式进行设定（QSS版）：

/*这是对QGroupBox的框样式进行设定*/
QGroupBox{
    border: 1px solid rgb(80,80,80);
    border-radius:6px;
    margin-top:12px; //可以设置title放下沉
}
QGroupBox:title {
    color:rgb(28,151,234);
    subcontrol-origin: margin;
    left: 10px;
}
/*这是对CheckBox的样式进行设定*/
QGroupBox::indicator:unchecked {
    image: url(:/Ampctrl/Recources/image/UnCheck_.png);
 /*image: url(:/Ampctrl/Recources/image/UCheckIn.png);*/
}
QGroupBox::indicator:checked {
    image: url(:/Ampctrl/Recources/image/Check_.png);
 /*image: url(:/Ampctrl/Recources/image/CheckIn.png);*/
}

二、setStyleSheet()设置（代码版）

ui.groupBox->setStyleSheet("QGroupBox{border:1px solid rgb(80,80,80);border-radius:6px;margin-top:12px;}"
"QGroupBox:title {color:rgb(28,151,234);subcontrol-origin: margin; left: 10px;}"
/*这是对CheckBox的样式进行设定*/
"QGroupBox::indicator:unchecked {image: url(:/Ampctrl/Recources/image/UnCheck_.png);}"
"QGroupBox::indicator:checked {image: url(:/Ampctrl/Recources/image/Check_.png);}"
);