Qt QCheckBox设置复选框的大小

Qt设计QCheckBox样式表

QCheckBox的各部分代表的样式表

QCheckBox
{
    background-color: rgb(85, 170, 255);
    color: yellow;
}

QCheckox::indicator:unchecked
{
    /* 设置边框的风格*/
    border-style: solid;
    border-width: 1px;
    border-color: rgb(85, 255, 255);
    width: 24px;
    height: 24px;
    background-color: rgb(85, 170, 127);
}

QCheckBox
{
    background-color: rgb(85, 170, 255);
    color: yellow;
}

QCheckBox::indicator:unchecked
{
    border-style: solid;
    border-width: 1px;
    border-color: rgb(85, 255, 255);
    width: 24px;
    height: 24px;
    background-color: rgb(85, 170, 127);
}

QCheckBox::indicator:checked
{
    border-style: solid;
    border-width: 1px;
    border-color: red;
    width: 24px;
    height: 24px;
}

QCheckBox::indicator:hover
{
    border-style: solid;
    border-width: 1px;
    border-color: red;
    width: 24px;
    height: 24px;
    background-color: rgb(170, 170, 0);
}

QCheckBox::indicator:hover
{
    border-style: solid;
    border-width: 1px;
    border-color: red;
    width: 24px;
    height: 24px;
    background-color: rgb(170, 170, 0);
}

QCheckBox::indicator:uncheck:disable
{
    border-style: solid;
    border-width: 1px;
    width: 24px;
    height: 24px;
    background-color:rgb(168, 168, 168);
}

QCheckBox::indicator:indeterminate
{
    border-style: solid;
    border-width: 1px;
    width: 24px;
    height: 24px;
    background-color: rgb(255, 85, 0);
}

这里的这个indeterminate，需要开启trislate这个属性，来开启这个选项 。开启之后，就会有三种状态了，选中、未选中、半选中。

你可以在QtCreator设计师界面里面进行设置

也可以在代码里设计

ui->checkBox->setTristate(true);

Qt QCheckBox设置复选框的大小

最开始的时候，我发现像下面这样设置是不起效的：

QCheckBox::indicator 
{
   width: 24px;
   height: 24px;
}

在这期间我已经试过在QtCreator中的设计师界面去设置iconSize，同样也是没有起作用。

我也用代码的形式来设置了这个iconSize，同样的也还是不行。

ui->comboBox->setIconSize(QSize(48, 48));

于是我就用设置图片的方式，将图片刚好输出成我所需要设置的大小；

像下面这样，设置一个checked时的样式，设置一个unchecked时的样式，然后就可以设置到刚好的大小了。

/* uncheck 代表未选中*/
QCheckBox::indicator:unchecked 
{        
    image: url(:/images/unchecked.png);
}
QCheckBox::indicator:checked 
{
    image: url(:/images/checked.png)
}

在这里就可以完美的设置大小，但是一个诡异的问题就在这里，我前面设置都是在我的办公笔记本上设置的，我在写这个博客的时候，我想要在自己的笔记本上截图来看看效果，然后我发现， 我用第一种方法，我能够设置图标的大小，虽然都是系统默认的图标，但是还是能改变大小，我于是开始琢磨为什么会出现这种情况…