Qt QCheckBox设置复选框的大小

文章目录

  • Qt设计QCheckBox样式表
    • QCheckBox的各部分代表的样式表
    • Qt QCheckBox设置复选框的大小

Qt设计QCheckBox样式表

QCheckBox的各部分代表的样式表

Qt QCheckBox设置复选框的大小_第1张图片

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

Qt QCheckBox设置复选框的大小_第2张图片

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设计师界面里面进行设置Qt QCheckBox设置复选框的大小_第3张图片

也可以在代码里设计

ui->checkBox->setTristate(true);

Qt QCheckBox设置复选框的大小

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

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

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

Qt QCheckBox设置复选框的大小_第4张图片

我也用代码的形式来设置了这个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)
}

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

你可能感兴趣的:(Qt,qt,css,qt5)