QSS 样式示例:QTreeWidget, QComboBox,QSlider,QSpinBox
最近需要对一个软件加上Qt界面和 的样式,第一次使用CSS/QSS,很多东西都是现查现用。现在把一些样式的配置记录下来备查。
Image 填充整个控件的区域
border-image 会填充整个控件的区域, image会按照实际大小加载,background-image 会多次重复填充整个区域
QTreeWidget
TreeWidget的 checkbox 是由 indicator控制的, 展开/合起的是branch。实例化的QTreeWidget对象为 cam_treeWidget
附上代码:
#cam_treeWidget{
font: 15px "ubuntu";
}
#cam_treeWidget::focus{
outline: none;
}
#cam_treeWidget::item:selected{
border:1px solid transparent;
font: 15px "ubuntu";
color:#51637e;
}
#cam_treeWidget::indicator:checked{
image: url(:/element/element/checkbox_checked.png);
}
#cam_treeWidget::indicator:unchecked{
image: url(:/element/element/checkbox_unchecked.png);
}
#cam_treeWidget::branch {
background: white;
}
#cam_treeWidget::branch:closed:has-children{
image:url(:/element/element/close.png);
}
#cam_treeWidget::branch::open::has-children{
image:url(:/element/element/open2.png);
}
QSpinbox 的上翻下翻按钮和箭头
分别由 up-button down-button 和 up-arrow down-arrow 子控件控制
QDoubleSpinBox::up-button{
border:transparent;
}
QDoubleSpinBox::down-button{
border:transparent;
}
QDoubleSpinBox::up-arrow{
image:url(:/element/element/up_arrow.png);
}
QDoubleSpinBox::down-arrow{
image:url(:/element/element/down_arrow.png);
}
QComboBox 的设置,大坑
QComboBox{
background-color:#ffffff;
font: 15px "ubuntu";
color:#51637e;
margin:0px;
border: 1px solid #f0ebeb;
}
QComboBox::drop-down{
border:transparent;
}
QComboBox::down-arrow{
image:url(:/element/element/open.png);
}
如果这里不设置 margin 或者设置padding,字的颜色就没法生效,不知道为什么?只好先记录下来
QSlider
滑块使用 handle 子控件设置的,未被划过的地方使 add-page 子控件设置的, 被划过的地方使用sub-page子控件设置。
QSlider::handle:horizontal {
border-image:url(:/element/element/slider_handle.png);
width: 13px;
height:20px;
}
QSlider::add-page:horizontal{
border: 1px solid #999999;
height: 8px;
background:transparent;
}
QSlider::sub-page:horizontal{
border: 1px solid #999999;
height: 8px;
background: #8097b8
}
QSS 样式示例:QTreeWidget, QComboBox,QSlider,QSpinBox的更多相关文章
- Qt之界面实现技巧-- 窗体显示,绘制背景,圆角,QSS样式
转自 --> http://blog.sina.com.cn/s/blog_a6fb6cc90101dech.html 总结一下,在开发Qt的过程中的一些技巧!可遇而不可求... 一.主界面 1 ...
- GUI学习之三十四——QSS样式表
今天是一个大课题:QSS样式表 一.概念: QSS是Qt Style Sheet——Qt样式表,是用来自定义控件外观的一种机制;可以把他类比成CSS,但是不及其功能强大. 二.使用: 我们做一个模板, ...
- HTML基础(四)——设置超链接的样式示例
***设置超链接的样式示例 a:link 超链接被点前状态 a:visited 超链接点击后状态 a:hover 悬停在超链接时 a:active 点击超链接时 在定义这些状态时,有一个顺序l v ...
- QComboBox 和 QSpinBox 使用方法
Qt中QComboBox 和 QSpinBox 是两个很常用的空间,QComboBox 是下拉菜单,而 QSpinBox 是调参数的神器,所以它们的用法十分必要熟练掌握. 首先来看 QComboBox ...
- QWidget使用qss样式的background-image属性
最近在学习Qt使用QSS样式美化窗口部件的内容.发现在对QWidget应用background-image改变窗口背景图片时,QWidget的窗口背景并未生效.工程建立如下: 1.新建 Qt A ...
- QSS 样式表 (一)
在开发应用程序时,往往对界面的美观有一定的要求.Qt 引入了 QSS 机制,使得界面的美化工作变的轻轻松松.嗯,QSS听着有点耳熟.是的,QSS的语法和CSS类似.在此做些总结. 先来看一个简单的例子 ...
- Qss样式(二)
Qss 其实就是一段文本,当然得按一定格式来写.下面请看Qss的语法格式: 选择器 { 属性1:值:属性2:值:--属性n:值:} 对应上篇文章的Qss样式: 现在我们可以来解释这段话的意思了: 对应 ...
- WPF,SilverLight中直线的样式示例
原文:WPF,SilverLight中直线的样式示例 XAML代码:// LineStyle.xaml<Viewbox Width="600" Height="50 ...
- Qt系统对话框中文化及应用程序实现重启及使用QSS样式表文件及使用程序启动界面
一.应用程序中文化 1).Qt安装目录下有一个目录translations/,在此目录下有qt_zh_CN.ts和 qt_zh_CN.qm把它们拷贝到你的工程目录下. 2).在main函数加入下列代码 ...
随机推荐
- 关于@synchronized 比你想知道的还多
如果你曾经使用Objective-C做过并发编程,那你肯定见过@synchronized这个结构.@synchronized这个结构发挥了和锁一样的作用:它避免了多个线程同时执行同一段代码.和使用NS ...
- iOS文本文件的编码检测
windows上很多文本未必是用UTF8,所以在iOS上读取的时候,如何得到文件的编码是个问题.网上有很多读取中文的例子,但是那些不够通用.比如说要读取日文,韩文,阿拉伯文等等的时候,就不行了(虽然一 ...
- 表格中的td内的div的文字内容禁止换行一行显示的css
td { white-space: nowrap } td div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; ...
- 关于osi的7层与tcp的4层网络协议的理解
osi 七层模型 应用层 提供接口 表示层 机器语言的二进制转换 对话层 决定是否传输 传输层 确定可不可靠 排差错 控流 网络层 提供逻辑地址 选路 数据链路层 mac 错误检测 物理层 设备间的比 ...
- Linux系统Java环境配置
1.卸载Linux系统自带的JDK java -version rpm -qa | grep -i java 我们要删除掉自带的JDK环境 rpm -e --nodeps java-1.6.0-ope ...
- jQuery笔记: 基本概念与jQuery核心
目录 初识jQuery 为什么要使用jQuery? 如何使用jQuery? jQuery与js加载模式不同 jQuery入口函数的四种写法 jQuery的访问符冲突问题 jQuery核心函数和jQue ...
- background-image大小和位置的设置
1.background-position: 当背景图很大时,可以让其固定显示在不同的位置.剩下的会隐藏. 引入背景图片:background-image: url("img/banner. ...
- JavaScript入门学习(1)
<html> <script type ="text/javascript"> var i,j; for (i=1;i<10;i++){ for (j ...
- 树莓派3B+学习笔记:4、查看GPIO
GPIO(General Purpose I/O Ports)意思为通用输入/输出端口. 可以在终端重直接查看GPIO的定义. 查看方式1: gpio readall 查看方式2: pinout 可以 ...
- 搭建最小linux系统
Busybox简介 • 制作文件系统我们需要使用到Busybox 工具 – 版本为busybox-1.21.1.tar.bz2 – 开源网址是http://www.busybox.net/ – Bus ...