【QT入门】 Qt自定义控件与样式设计之QCheckBox qss实现按钮开关

往期回顾

【QT入门】Qt自定义控件与样式设计之QPushButton常用qss-优快云博客

【QT入门】 Qt自定义控件与样式设计之QPushButton实现鼠标悬浮按钮弹出对话框-优快云博客

【QT入门】 Qt自定义控件与样式设计之QComboBox样式表介绍-优快云博客

 【QT入门】 Qt自定义控件与样式设计之QCheckBox、qss实现按钮开关

一、最终效果

实现点击按钮切换开启和关闭两种状态，并对两种状态进行不同的样式设计，其实很简单，用了两张图片去切换。

二、checkbox控件 

在Qt框架中，checkbox控件是通过QCheckBox类来实现的。QCheckBox类提供了一种方便的方式来创建和管理复选框控件，用于表示两种状态之间的选择，类似于HTML中的checkbox元素。

1、常见特点和用法

1.1创建QCheckBox控件

可以使用以下代码在Qt中创建一个QCheckBox控件：

QCheckBox *checkBox = new QCheckBox("选择项", parent);

1.2设置文本和状态

可以使用setText()方法设置复选框显示的文本，setChecked()方法设置复选框的选中状态。

1.3获取复选框状态

可以使用isChecked()方法来获取复选框当前的选中状态。

1.4信号和槽机制

QCheckBox类提供了stateChanged(int state)信号，可以通过连接这个信号和槽函数来响应复选框状态的改变。

1.5样式定制

可以通过设置样式表来自定义复选框的外观，比如改变颜色、大小、边框等。

1.6布局管理

可以将QCheckBox控件放置在布局管理器中，以便更好地控制其位置和大小。

2、实现按钮开关示例

上面说了，QCheckBox类提供了一种方便的方式来创建和管理复选框控件，用于表示两种状态之间的选择，但是，其实checkbox是一个三态按钮，还有一个状态，不仅仅有选中和未选中两种状态，还有一种部分选中状态

ConstantValueDescription
Qt::Unchecked                0        The item is unchecked.
Qt::PartiallyChecked         1        The item is partially checked. Items in hierarchical models may be partially checked if some, but not all, of their children are checked.
Qt::Checked                  2        The item is checked.

2.1状态解释

Qt::Unchecked (数值为0)：	表示复选框未被选中，即未被勾选的状态。
Qt::PartiallyChecked (数值为1)：	表示复选框处于部分选中状态。在具有层次结构的模型中，如果某个项目的部分子项目被选中，但不是所有子项目都被选中，那么该项目就会处于部分选中状态。
Qt::Checked (数值为2)：	表示复选框已被选中，即被勾选的状态。

2.2代码示例

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    ui->checkBox->setFixedSize(128, 64);

    QString qss = "QCheckBox::indicator:unchecked{ \
                   image:url(:/resources/status_close.png); \
                   } \
                   QCheckBox::indicator:checked { \
                   image: url(:/resources/status_open.png); \
                   }";

    ui->checkBox->setStyleSheet(qss);
    ui->checkBox->setChecked(true);
    //ui->checkBox->setTristate(true);

    connect(ui->checkBox, &QCheckBox::stateChanged , [=](int state){
        qDebug() << state;
    });
}

---

以上就是QCheckBox qss实现按钮开关基本示例，更多是对QCheckBox控件的掌握

都看到这里了，点个赞再走呗朋友~

加油吧，预祝大家变得更强！