QT中改变QRadioButton选中按钮的颜色

要想改变QRadioButton选中按钮（圆点）的颜色，可以使用Qt 中的style sheets来进行设置。

官方手册中有对style sheets的介绍。

链接为：http://doc.qt.io/archives/qt-4.8/stylesheet.html

那怎样设置呢？

在官方的文档中也有说明

链接：http://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qcheckbox

//定义indicator子控件
QRadioButton::indicator {
    width: 13px;
    height: 13px;
}

//没有被选中时
QRadioButton::indicator::unchecked {
    image: url(:/images/radiobutton_unchecked.png);
}

//选中时鼠标在上面悬停状态
QRadioButton::indicator:unchecked:hover {
    image: url(:/images/radiobutton_unchecked_hover.png);
}

//未选中时鼠标点击下按时状态
QRadioButton::indicator:unchecked:pressed {
    image: url(:/images/radiobutton_unchecked_pressed.png);
}

//被选中时
QRadioButton::indicator::checked {
    image: url(:/images/radiobutton_checked.png);
}

//被选中时鼠标在上面悬停状态
QRadioButton::indicator:checked:hover {
    image: url(:/images/radiobutton_checked_hover.png);
}

//被选中时鼠标下按
QRadioButton::indicator:checked:pressed {
    image: url(:/images/radiobutton_checked_pressed.png);
}

可以看到，官方中的设置 中是使用图片在改变不同状态时的样式。

那如果要改变颜色，也类似的

QRadioButton::indicator {
    width:                  10px;
    height:                 10px;
    border-radius:          7px;
}

QRadioButton::indicator:checked {
    background-color:       green;
    border:                 2px solid white;
}

QRadioButton::indicator:unchecked {
    background-color:       red;
    border:                 2px solid white;
}

其实就是设置一下background-color就好。注意是要先定义indicator，不能直接修改QRadioButton的background-color，那样改变的是按钮后面的文本背景颜色。 

接着，代码实战一下 

    ui->radioButton->setStyleSheet("QRadioButton::indicator {width:15px;height:15px;border-radius:7px}"
                                   "QRadioButton::indicator:checked {background-color:green;}"
                                   "QRadioButton::indicator:unchecked {background-color:red;}"
                                   );

因为我们的主要目标是改变颜色，所以只是设置background-color这一项，具体其他选项大家可以查阅官方文档。

点击选择前 

点击选择后

可以看到，已经不是系统默认的颜色了。

其实使用style sheets还可以设置很多控件的样式。