QRadioButton、QCheckBox样式表

---

实现效果

QRadioButton{
    spacing: 2px;
    color: white;
}
QRadioButton::indicator {
    width: 60px;
    height: 35px;
}
QRadioButton::indicator:unchecked {
	image: url(:/images/switch_off.png);
}
QRadioButton::indicator:checked {
	image: url(:/images/switch_on.png);
}

Chapter1 QRadioButton样式表

原文链接：https://www.cnblogs.com/itrena/p/5938247.html

详细描述

单选框默认开启自动互斥（autoExclusive）。如果启用了自动互斥，属于同一个父部件的单选框的行为就和属于一个互斥按钮组的一样。如果你需要为属于同一父部件的单选框设置多个互斥按钮组，把它们加入QButtonGroup中。

每当一个按钮切换选中或未选中状态时，会发出的toggled()信号。如果希望每个按钮切换状态时触发一个动作，连接到这个信号。使用isChecked()来查看特定按钮是否被选中。

就像QPushButton一样，单选框可以显示文本，以及可选的小图标。图标使用setIcon()来设置，文本可以在构造函数或通过setText()来设置。可以指定快捷键，通过在文本中的特定字符前指定一个&。

例如：

QRadioButton *button = new QRadioButton("Search from the &cursor", this);

这个示例中，快捷键为Alt+c。关于更多快捷键的内容请参考：QShortcut 。如果要显示一个“&”，请使用’&&’。

示例

我们来实现一个iphone中常见的开关效果 - 单选。

效果

源码

构建单选框QRadioButton，然后将它们添加至按钮组QButtonGroup中。

QHBoxLayout *pLayout = new QHBoxLayout();
m_pButtonGroup = new QButtonGroup(this);

// 设置互斥
m_pButtonGroup->setExclusive(true);
for (int i = 0; i < 3; ++i)
{
    QRadioButton *pButton = new QRadioButton(this);

    // 设置文本
    pButton->setText(QString::fromLocal8Bit("切换%1").arg(i + 1));

    pLayout->addWidget(pButton);
    m_pButtonGroup->addButton(pButton);
}
pLayout->setSpacing(10);
pLayout->setContentsMargins(10, 10, 10, 10);

setLayout(pLayout);

// 连接信号槽
connect(m_pButtonGroup, SIGNAL(buttonClicked(QAbstractButton*)), this, SLOT(onButtonClicked(QAbstractButton*)));

槽函数，用来判断当前点击的按钮，以及获取按钮组中各个按钮的选中状态。

void MainWindow::onButtonClicked(QAbstractButton *button)
{
    // 当前点击的按钮
    qDebug() << QString("Clicked Button : %1").arg(button->text());

    // 遍历按钮，获取选中状态
    QList<QAbstractButton*> list = m_pButtonGroup->buttons();
    foreach (QAbstractButton *pButton, list)
    {
        QString strStatus = pButton->isChecked() ? "Checked" : "Unchecked";
        qDebug() << QString("Button : %1 is %2").arg(button->text()).arg(strStatus);
    }
}

样式表

单选框样式

QRadioButton{
    spacing: 2px;
    color: white;
}
QRadioButton::indicator {
    width: 45px;
    height: 30px;
}
QRadioButton::indicator:unchecked {
    image: url(:/Images/switchOff);
}
QRadioButton::indicator:unchecked:hover {
    image: url(:/Images/switchOffHover);
}
QRadioButton::indicator:unchecked:pressed {
    image: url(:/Images/switchOffPressed);
}
QRadioButton::indicator:checked {
    image: url(:/Images/switchOn);
}
QRadioButton::indicator:checked:hover {
    image: url(:/Images/switchOnHover);
}
QRadioButton::indicator:checked:pressed {
    image: url(:/Images/switchOnPressed);
}

上面，我们通过调用QButtonGroup的setExclusive(true)来设置按钮组中的单选框互斥。

当然，也可以设置setExclusive(false)来关闭互斥，从而实现多选功能。即使这样，如之前所言 - 强烈建议使用众所周知的约定。所以，如果要实现多选功能，建议选择QCheckBox。

Chapter2 QRadioButton样式表

原文链接：https://blog.csdn.net/qq_41672557/article/details/103285272

//样式基本格式
QRadioButton{
font-family: "Microsoft YaHei";//字体类型
font-size: 25px;//字体大小，像素
color: #bdc8e2//字体颜色
outline:0px;//去掉焦点虚线框
border：3px solid red //外边框
min-width:30px;//尺寸
min-height:30px;
background-color:rgba(r,g,b,a);//值transparent为透明
}
//设置字体样式
font-family: "Microsoft YaHei";//字体类型
font-size: 25px;//字体大小，像素
font-style: italic;//字体斜体样式，mormal不斜体
font-weight:bold;//字体加粗样式，mormal不加粗
color: #bdc8e2//字体颜色
 
font: bold italic 18px "Microsoft YaHei";//顺序要求：style weight size family 或者 weight style  size family
 
//文字位置
Spacing:5px;//选择框和文字之间的距离（水平）
padding-left: 10px;距离左边边界的距离（包括选择框）
padding-top: 10px;距离顶边边界的距离（包括选择框）
padding-right: 10px;距离右边边界的距离（包括选择框）
padding-bottom: 10px;距离底边边界的距离（包括选择框）
 
//边框样式
border-style: solid;//边框样式，实线：solid ;虚线：dashed; 点线：dotted;
不显示（默认）：none;
border-width: 2px;
border-color: red;
border:2px,solid red;//同时设置
//某一条边框(其他三个边框： right,bottom,left)
border-top-style:solid;
border-top-width:2px;
border-top-color:red;
 
//圆角
border-top-left-radius:20px;//左上角弧度
border-top-right-radius:20px;//右上角弧度
border-bottom-left-radius:20px;//左下角弧度
border-bottom-right-radius:20px;//右下角弧度
 
bordet-radius:20px;//同时设置4个角的弧度
 
//背景样式
background-color:rgba(r,g,b,a);//值transparent为透明
background-image:url(".png");//背景图片
background-repeat:no-repeat;//在x轴重复：repeat-x; 在y轴重复：repeat-y
background-position:left center;//图片显示位置：left，right，center,top,bottom;
 
background: url(".png") no-repeat left center #2e3648;//顺序任意
 
//动态样式（不存在pressed样式）
//鼠标悬浮
QRadioButton:hover{
color:
}
//按钮禁止
QRadioButton:disabled{
color:
}
//鼠标点击
QRadioButton:disabled{
color:
}
 
//单选框
QRadioButton：：indicator{
width:32px;
height:18px;
image: url(./image1.png);
position:relative;//通过该参数可以修改图片位置：left,right…
left:0px;
right:0px;
top:0px;
bottom:0px;
}
//单选框动态样式
QRadioButton：：indicator:hover{
Image:url(./image2.png);
}
QRadioButton：：indicator:pressed{
Image:url(./image2.png);
}
//根据是否选中状态的动态样式(unchecked和没有添加任何状态时的样式是相同)
QRadioButton：：indicator: unchecked{
Image:url(./image2.png);
}
QRadioButton：：indicator:unchecked：hover{
Image:url(./image2.png);
}
QRadioButton：：indicator:unchecked: pressed{
Image:url(./image2.png);
}
QRadioButton：：indicator: checked{
Image:url(./image2.png);
}
QRadioButton：：indicator: checked：hover{
Image:url(./image2.png);
}
QRadioButton：：indicator: checked: pressed{
Image:url(./image2.png);
}