关闭

QSlider 的样式设置

标签: qtstyle sheet
10549人阅读 评论(6) 收藏 举报
分类:


设计漂亮的style sheet,注意背景色..否则每个角上会有一个像素的小点..

QSlider::groove:horizontal {
border: 1px solid #4A708B;
background: #C0C0C0;
height: 5px;
border-radius: 1px;
padding-left:-1px;
padding-right:-1px;
}

QSlider::sub-page:horizontal {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, 
    stop:0 #B1B1B1, stop:1 #c4c4c4);
background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,
    stop: 0 #5DCCFF, stop: 1 #1874CD);
border: 1px solid #4A708B;
height: 10px;
border-radius: 2px;
}

QSlider::add-page:horizontal {
background: #575757;
border: 0px solid #777;
height: 10px;
border-radius: 2px;
}

QSlider::handle:horizontal 
{
    background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, 
    stop:0.6 #45ADED, stop:0.778409 rgba(255, 255, 255, 255));

    width: 11px;
    margin-top: -3px;
    margin-bottom: -3px;
    border-radius: 5px;
}

QSlider::handle:horizontal:hover {
    background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #2A8BDA, 
    stop:0.778409 rgba(255, 255, 255, 255));

    width: 11px;
    margin-top: -3px;
    margin-bottom: -3px;
    border-radius: 5px;
}

QSlider::sub-page:horizontal:disabled {
background: #00009C;
border-color: #999;
}

QSlider::add-page:horizontal:disabled {
background: #eee;
border-color: #999;
}

QSlider::handle:horizontal:disabled {
background: #eee;
border: 1px solid #aaa;
border-radius: 4px;
}

以下是竖版的样式:


QSlider::groove:vertical {
border: 1px solid #4A708B;
background: #C0C0C0;
width: 5px;
border-radius: 1px;
padding-left:-1px;
padding-right:-1px;
padding-top:-1px;
padding-bottom:-1px;
}

QSlider::sub-page:vertical {
background: #575757;
border: 1px solid #4A708B;
border-radius: 2px;
}

QSlider::add-page:vertical {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, 
    stop:0 #c4c4c4, stop:1 #B1B1B1);
background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,
    stop: 0 #5DCCFF, stop: 1 #1874CD);
border: 0px solid #777;
width: 10px;
border-radius: 2px;
}

QSlider::handle:vertical 
{
	background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #45ADED, 
	stop:0.778409 rgba(255, 255, 255, 255));

    height: 11px;
    margin-left: -3px;
    margin-right: -3px;
    border-radius: 5px;
}

QSlider::sub-page:vertical:disabled {
background: #00009C;
border-color: #999;
}

QSlider::add-page:vertical:disabled {
background: #eee;
border-color: #999;
}

QSlider::handle:vertical:disabled {
background: #eee;
border: 1px solid #aaa;
border-radius: 4px;
}


5
0
查看评论

Qt中QSlider的样式表设置

在没有设置的时候,总感觉很难的样子,其实,真正做起来也不是那么难,就把刚刚自己做的发出来共享吧。 先来看一看水平的: 先上效果图: //首先是设置主体 QSlider{ border-color: #bcbcbc; } QSlider::groove:horizontal { ...
  • tax10240809163com
  • tax10240809163com
  • 2016-03-15 19:02
  • 4628

两种QSlider进度条的QSS样式

1. 横的进度条: musicSlider->setStyleSheet(" \ QSlider::add-page:Horizontal\ { \ background-color: rgb(87, 97, 106);...
  • liukang325
  • liukang325
  • 2015-04-03 09:25
  • 7920

QSlider 的样式设置

漂亮的QSlider样式.
  • robertkun
  • robertkun
  • 2014-02-28 09:06
  • 10549

QSlider 的样式设置

转载自:http://blog.csdn.net/robertkun/article/details/20119135设计漂亮的style sheet,注意背景色..否则每个角上会有一个像素的小点..QSlider::groove:horizontal { height: 5px; ...
  • cao269631539
  • cao269631539
  • 2017-03-28 09:35
  • 817

Qt之QSlider

简述QSlider部件提供了一个垂直或水平滑动条。滑块是一个用于控制有界值的典型部件。它允许用户沿水平或垂直方向移动滑块,并将滑块所在的位置转换成一个合法范围内的值。简述 详细描述 刻度位置 基本使用 效果 源码 QSS 刻度位置及间隔 效果 源码详细描述QSlider很少有自己的函数,大部分功能在...
  • u011012932
  • u011012932
  • 2016-08-24 14:59
  • 10638

【Qt】QSlider----qss(round handle) 圆形滑块

QSlider是Qt中常用的控件,样式也各种各样,自己尝试做的一个样式,尽管handle能用图片做的更完美,不用图片,视觉效果上,仍然没什么问题,round handle QSlider { background-color: #ff00ff; border-style: outset;...
  • Qyee16
  • Qyee16
  • 2014-02-22 13:47
  • 6176

QT学习1 QSlider 更改样式

Seriously. I don’t know how I ever created a Qt user interface without using stylesheets. This was, by far, the best idea Trolltech ever had. For t...
  • yuan_lo
  • yuan_lo
  • 2016-07-07 17:31
  • 772

QSS定制自定义QSlider

QSlider中有四个比较重要的辅助控制器(subcontrol),groove表示槽的部分,handle表示滑块,add-page表示未滑过的槽部分,sub-page表示已滑过的槽部分。在辅助控制器后面可以设置状态,horizontal就是QSS生效的QSlider的状态,注意这里设置的方向一定要...
  • sdljlcming
  • sdljlcming
  • 2012-12-17 10:57
  • 2949

Qt基础学习(3)-----滑动条之QSlider

//mydialog.h #ifndef MYDIALOG_H #define MYDIALOG_H #include class QLineEdit; class QSlider; class MyDialog : public QDialog { Q_OBJECT pub...
  • qiurisuixiang
  • qiurisuixiang
  • 2011-10-23 12:19
  • 41628

一个漂亮的滑动条样式

前段时间做一个东西,要用到滑动条,在更改样式时破费脑筋!因为总有一些问题:例如,当你滑动滑块到两端时,下面的滑槽总是遮不住,还有一个就是你要滑到两端时,你设置的弧度圆角突然变成方的,细细很不美观。 方的情形就不展示了。 主要调整的是border-radius这个属性,其次是margi...
  • u013782830
  • u013782830
  • 2016-06-21 10:04
  • 686
    个人资料
    • 访问:716291次
    • 积分:8982
    • 等级:
    • 排名:第2504名
    • 原创:182篇
    • 转载:125篇
    • 译文:1篇
    • 评论:109条
    博客专栏
    初识Qt

    文章:43篇

    阅读:147867
    文章分类
    最新评论