QRadioButton、QCheckBox样式表

宁静致远2021

已于 2023-11-11 10:38:06 修改

阅读量1.5k

点赞数

分类专栏：工控软件 Qt经验总结文章标签： qt

于 2023-11-11 08:50:01 首次发布

本文链接：https://blog.csdn.net/m0_46577050/article/details/134344279

版权

Qt经验总结同时被 2 个专栏收录

117 篇文章 97 订阅

订阅专栏

工控软件

76 篇文章 15 订阅

订阅专栏

QRadioButton、QCheckBox样式表

RGB颜色查找表
阿里巴巴矢量图标库
实现效果
Chapter1 QRadioButton样式表
Chapter2 QRadioButton样式表
Chapter3 QCheckBox样式美化
Chapter4 QCheckBox自定义样式（$$$）
- 效果图
- 1.实现QCheckBox控件
Chapter5 QComboBox样式表
总结

RGB颜色查找表

https://tool.oschina.net/commons?type=3
在这里插入图片描述

阿里巴巴矢量图标库

https://www.iconfont.cn/
在这里插入图片描述

实现效果

在这里插入图片描述

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

Chapter3 QCheckBox样式美化

原文链接
在这里插入图片描述

QCheckBox{
font:12px;
color: rgb(255, 255, 255);  
 spacing: 5px;
}
 
 QCheckBox::indicator {
     width: 13px;
     height: 13px;  
 }
QCheckBox::indicator:unchecked {
     border-image: url(:/YxStreamClient/Resources/sys_checkbox.png) 0 54 18 0;
 }
 
 QCheckBox::indicator:unchecked:hover {
     border-image: url(:/YxStreamClient/Resources/sys_checkbox.png)0 36 18 18;
 }
 
 QCheckBox::indicator:unchecked:pressed {
     image: url(:/YxStreamClient/Resources/sys_checkbox.png)0 18 18 36;
 }
 
 QCheckBox::indicator:checked {
     border-image: url(:/YxStreamClient/Resources/sys_checkbox.png) 18 54 0 0;
 }
 
 QCheckBox::indicator:checked:hover {
     border-image: url(:/YxStreamClient/Resources/sys_checkbox.png)18 36 0 18;
 }
 
 QCheckBox::indicator:checked:pressed {
     border-image: url(:/YxStreamClient/Resources/sys_checkbox.png)18 18 0 36;
 }

Chapter4 QCheckBox自定义样式（$$$）

原文链接：https://blog.csdn.net/weixin_40207422/article/details/113973485

效果图

在这里插入图片描述

1.实现QCheckBox控件

layoutDerection属性可以设置checkBox的打√在左边还是右边

在这里插入图片描述

//整体checkbox设置
QCheckBox{
border-image: url(:/src/image_icon/Rectangle 1621.png);
color:white;
}
QCheckBox:unchecked{
border-image: url(:/src/image_icon/Rectangle 1621.png);
}
QCheckBox:checked{
border-image: url(:/src/image_icon/Rectangle 1622.png);
}
//checkbox 打“√” 区域的设置
QCheckBox::indicator {
border-image: url(:/src/image_icon/Group 744.png);
Width:39px;
Height:39px;
}
QCheckBox::indicator:unchecked{
border-image: url(:/src/image_icon/Group 744.png);
Width:39px;
Height:39px;
}
QCheckBox::indicator:checked{
border-image: url(:/src/image_icon/Group 743.png);
Width:39px;
Height:39px;
}

在这里插入图片描述

QCheckBox{
color:white;
}
QCheckBox::indicator {
border-image: url(:/src/image_icon/Rectangle 1625.png);
Width:25px;
Height:25px;
}
QCheckBox::indicator:unchecked{
border-image: url(:/src/image_icon/Rectangle 1625.png);
Width:25px;
Height:25px;
}
QCheckBox::indicator:checked{
border-image: url(:/src/image_icon/Group 737.png);
Width:25px;
Height:25px;
}

Chapter5 QComboBox样式表

原文链接

Qt样式表（QComboBox下拉框）连接

最近的工作涉及修改样式，真是一言难尽，这个还是比较全的，转发一下，免得后面找不到了。qt的控件样式大部分可以套用下面的

/* 未下拉时，QComboBox的样式 */
QComboBox {
    border: 1px solid gray;   /* 边框 */
    border-radius: 3px;   /* 圆角 */
    padding: 1px 18px 1px 3px;   /* 字体填衬 */
    color: #000;
    font: normal normal 15px "Microsoft YaHei";
    background: transparent;
}

/* 下拉后，整个下拉窗体样式 */
QComboBox QAbstractItemView {
    outline: 0px solid gray;   /* 选定项的虚框 */
    border: 1px solid yellow;   /* 整个下拉窗体的边框 */
    color: green;
    background-color: red;   /* 整个下拉窗体的背景色 */
    selection-background-color: lightgreen;   /* 整个下拉窗体被选中项的背景色 */
}

/* 下拉后，整个下拉窗体每项的样式 */
QComboBox QAbstractItemView::item {
    height: 50px;   /* 项的高度（设置pComboBox->setView(new QListView());后，该项才起作用） */
}

/* 下拉后，整个下拉窗体越过每项的样式 */
QComboBox QAbstractItemView::item:hover {
    color: #FFFFFF;
    background-color: lightgreen;   /* 整个下拉窗体越过每项的背景色 */
}

/* 下拉后，整个下拉窗体被选择的每项的样式 */
QComboBox QAbstractItemView::item:selected {
    color: #FFFFFF;
    background-color: lightgreen;
}

/* QComboBox中的垂直滚动条 */
QComboBox QAbstractScrollArea QScrollBar:vertical {
    width: 10px;
    background-color: #d0d2d4;   /* 空白区域的背景色*/
}

QComboBox QAbstractScrollArea QScrollBar::handle:vertical {
    border-radius: 5px;   /* 圆角 */
    background: rgb(160,160,160);   /* 小方块的背景色深灰lightblue */
}

QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover {
    background: rgb(90, 91, 93);   /* 越过小方块的背景色yellow */
}

/* 设置为可编辑（setEditable(true)）editable时，编辑区域的样式 */
QComboBox:editable {
    background: green;
}

/* 设置为非编辑（setEditable(false)）!editable时，整个QComboBox的样式 */
QComboBox:!editable {
     background: blue;
}

/* 设置为可编辑editable时，点击整个QComboBox的样式 */
QComboBox:editable:on {
    background: green;
}

/* 设置为非编辑!editable时，点击整个QComboBox的样式 */
QComboBox:!editable:on {
     background: blue;
}

/* 设置为可编辑editable时，下拉框的样式 */
QComboBox::drop-down:editable {
    background: lightblue;
}

/* 设置为可编辑editable时，点击下拉框的样式 */
QComboBox::drop-down:editable:on {
    background: lightgreen;
}

/* 设置为非编辑!editable时，下拉框的样式 */
QComboBox::drop-down:!editable {
    background: lightblue;
}

/* 设置为非编辑!editable时，点击下拉框的样式 */
QComboBox::drop-down:!editable:on {
    background: lightgreen;
}

/* 点击QComboBox */
QComboBox:on {
}

/* 下拉框样式 */
QComboBox::drop-down {
    subcontrol-origin: padding;   /* 子控件在父元素中的原点矩形。如果未指定此属性，则默认为padding。 */
    subcontrol-position: top right;   /* 下拉框的位置（右上） */
    width: 15px;   /* 下拉框的宽度 */

    border-left-width: 1px;   /* 下拉框的左边界线宽度 */
    border-left-color: darkgray;   /* 下拉框的左边界线颜色 */
    border-left-style: solid;   /* 下拉框的左边界线为实线 */
    border-top-right-radius: 3px;   /* 下拉框的右上边界线的圆角半径（应和整个QComboBox右上边界线的圆角半径一致） */
    border-bottom-right-radius: 3px;   /* 同上 */
}　/* 越过下拉框样式 */　QComboBox::drop-down:hover {　　　background: yellow;　}/* 下拉箭头样式 */ QComboBox::down-arrow {　　width: 15px; /* 下拉箭头的宽度（建议与下拉框drop-down的宽度一致） */ 　　background: transparent; /* 下拉箭头的的背景色 */ 　　padding: 0px 0px 0px 0px; /* 上内边距、右内边距、下内边距、左内边距 */　　image: url(:/images/combobox_arrow_down.png); } /* 点击下拉箭头 */ QComboBox::down-arrow:on { 　　image: url(:/images/combobox_arrow_up.png); /* 显示上拉箭头 */ } 注意：int main(){　　QComboBox* pComboBox = new QComboBox(this);　　pComboBox->setView(new QListView());   //添加这句，设置下拉列表项高才能生效}

/* 未下拉时，QComboBox的样式 */
QComboBox {
    border: 1px solid gray;   /* 边框 */
    border-radius: 3px;   /* 圆角 */
    padding: 1px 18px 1px 3px;   /* 字体填衬 */
    color: #000;
    font: normal normal 15px "Microsoft YaHei";
    background: transparent;
}

/* 下拉后，整个下拉窗体样式 */
QComboBox QAbstractItemView {
    outline: 0px solid gray;   /* 选定项的虚框 */
    border: 1px solid yellow;   /* 整个下拉窗体的边框 */
    color: green;
    background-color: red;   /* 整个下拉窗体的背景色 */
    selection-background-color: lightgreen;   /* 整个下拉窗体被选中项的背景色 */
}

/* 下拉后，整个下拉窗体每项的样式 */
QComboBox QAbstractItemView::item {
    height: 50px;   /* 项的高度（设置pComboBox->setView(new QListView());后，该项才起作用） */
}

/* 下拉后，整个下拉窗体越过每项的样式 */
QComboBox QAbstractItemView::item:hover {
    color: #FFFFFF;
    background-color: lightgreen;   /* 整个下拉窗体越过每项的背景色 */
}

/* 下拉后，整个下拉窗体被选择的每项的样式 */
QComboBox QAbstractItemView::item:selected {
    color: #FFFFFF;
    background-color: lightgreen;
}

/* QComboBox中的垂直滚动条 */
QComboBox QAbstractScrollArea QScrollBar:vertical {
    width: 10px;
    background-color: #d0d2d4;   /* 空白区域的背景色*/
}

QComboBox QAbstractScrollArea QScrollBar::handle:vertical {
    border-radius: 5px;   /* 圆角 */
    background: rgb(160,160,160);   /* 小方块的背景色深灰lightblue */
}

QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover {
    background: rgb(90, 91, 93);   /* 越过小方块的背景色yellow */
}

/* 设置为可编辑（setEditable(true)）editable时，编辑区域的样式 */
QComboBox:editable {
    background: green;
}

/* 设置为非编辑（setEditable(false)）!editable时，整个QComboBox的样式 */
QComboBox:!editable {
     background: blue;
}

/* 设置为可编辑editable时，点击整个QComboBox的样式 */
QComboBox:editable:on {
    background: green;
}

/* 设置为非编辑!editable时，点击整个QComboBox的样式 */
QComboBox:!editable:on {
     background: blue;
}

/* 设置为可编辑editable时，下拉框的样式 */
QComboBox::drop-down:editable {
    background: lightblue;
}

/* 设置为可编辑editable时，点击下拉框的样式 */
QComboBox::drop-down:editable:on {
    background: lightgreen;
}

/* 设置为非编辑!editable时，下拉框的样式 */
QComboBox::drop-down:!editable {
    background: lightblue;
}

/* 设置为非编辑!editable时，点击下拉框的样式 */
QComboBox::drop-down:!editable:on {
    background: lightgreen;
}

/* 点击QComboBox */
QComboBox:on {
}

/* 下拉框样式 */
QComboBox::drop-down {
    subcontrol-origin: padding;   /* 子控件在父元素中的原点矩形。如果未指定此属性，则默认为padding。 */
    subcontrol-position: top right;   /* 下拉框的位置（右上） */
    width: 15px;   /* 下拉框的宽度 */

    border-left-width: 1px;   /* 下拉框的左边界线宽度 */
    border-left-color: darkgray;   /* 下拉框的左边界线颜色 */
    border-left-style: solid;   /* 下拉框的左边界线为实线 */
    border-top-right-radius: 3px;   /* 下拉框的右上边界线的圆角半径（应和整个QComboBox右上边界线的圆角半径一致） */
    border-bottom-right-radius: 3px;   /* 同上 */
}
　/* 越过下拉框样式 */
　QComboBox::drop-down:hover {
　　　background: yellow;
　}
/* 下拉箭头样式 */ QComboBox::down-arrow {　　width: 15px; /* 下拉箭头的宽度（建议与下拉框drop-down的宽度一致） */ 　　background: transparent; /* 下拉箭头的的背景色 */ 　　padding: 0px 0px 0px 0px; /* 上内边距、右内边距、下内边距、左内边距 */　　image: url(:/images/combobox_arrow_down.png); } /* 点击下拉箭头 */ QComboBox::down-arrow:on { 　　image: url(:/images/combobox_arrow_up.png); /* 显示上拉箭头 */ }
 
注意：
int main()
{
　　QComboBox* pComboBox = new QComboBox(this);
　　pComboBox->setView(new QListView());   //添加这句，设置下拉列表项高才能生效
}

总结

注意：在顶层对话框中加入样式表，对内部所有QCheckBox生效
在这里插入图片描述

注意：在顶层对话框中加入样式表，对内部所有QCheckBox生效

QCheckBox{
border-image: url(:/images/Rectangle.png); /*背景图片*/
color:white;
}

/*checkbox 打“√” 区域的设置*/
QCheckBox::indicator {
border-image: url(:/images/checkbox-unchecked.png); /*默认未选中状态*/
Width:39px;
Height:39px;
}
QCheckBox::indicator:unchecked{
border-image: url(:/images/checkbox-unchecked.png); /*未选中状态*/
Width:39px;
Height:39px;
}
QCheckBox::indicator:checked{
border-image: url(:/images/checkbox -1.png); /*选中状态*/
Width:39px;
Height:39px;
}

宁静致远2021

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
QRadioButton、QCheckBox样式表

如果启用了自动互斥，属于同一个父部件的单选框的行为就和属于一个互斥按钮组的一样。如果你需要为属于同一父部件的单选框设置多个互斥按钮组，把它们加入QButtonGroup中。就像QPushButton一样，单选框可以显示文本，以及可选的小图标。当然，也可以设置setExclusive(false)来关闭互斥，从而实现多选功能。上面，我们通过调用QButtonGroup的setExclusive(true)来设置按钮组中的单选框互斥。槽函数，用来判断当前点击的按钮，以及获取按钮组中各个按钮的选中状态。
复制链接

扫一扫