欢迎使用优快云-markdown编辑器

最新推荐文章于 2025-02-22 23:28:05 发布

转载最新推荐文章于 2025-02-22 23:28:05 发布 · 363 阅读

QSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Qt中使用QSS样式定制RadioButton和CheckBox的外观，通过替换不同状态下的图片来实现美观的UI设计。

QSS RadioButton

其实实现起来非常简单，开始以为非常高大上呢，后来发现安卓开发中也是利用相同的原理实现的。单选框和复选框的几种状态都是利用单击之后切换不同的图片实现的，所以事先把你想要实现的样式图片自己做出来，或者从网上找到，然后在Qt的资源中添加保存的状态图片。
下面就是要用到的QSS样式

/*RadioButton样式设置*/
QRadioButton::indicator {
    width: 17px;
    height: 17px;
}
/*单选框未选中样式*/
QRadioButton::indicator::unchecked {

    image: url(:/ico/radiobutton-unchecked-md.png);
}
/*单选框选中样式*/
QRadioButton::indicator::checked {
    image: url(:/ico/radiobutton-checked-md.png);
}
/*RadioButton和checkbox字体和间距设置*/
QRadioButton ,QCheckBox{
    spacing: 5px;
    font-size: 15px;
}
/*checkbox样式设置*/
QCheckBox::indicator {
    width: 26px;
    height: 50px;
}
/*未选中*/
QCheckBox::indicator::unchecked {    
    image: url(:/ico/checkbox_unchecked.png);
}
/*选中*/
QCheckBox::indicator::checked {
    image: url(:/ico/checkbox_checked.png);
}

如果有CSS基础看以来就比较简单，其中

image: url(:/ico/radiobutton-checked-md.png);

这句就是指定，单选或多选按钮按下状态的图片路径。我在Qt的资源中添加了前缀 : ico，图片资源都放到资源前缀下了。
看一下效果吧：

挺漂亮吧，有点现代APP该有的时尚感了，右侧的button的样式也重写了，总体感觉OK。但是还有一些其他的样式个人不太会弄，比如表格表头样式不会定义，网上介绍的也很少，比较郁闷，慢慢弄吧。
现在把我使用的按钮图片素材贴到下面，用PS抠图抠出来的，抠的不太好，有用到的拿走，拿走….. 呵呵！