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()); //添加这句,设置下拉列表项高才能生效
}