逛奔的蜗牛

我不聪明,但我会很努力

   ::  :: 新随笔 ::  ::  :: 管理 ::
@import url(http://www.cppblog.com/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css); 如图所示,QTableView使用的QHeaderView与scrollbar的style sheet.@import url(http://www.cppblog.com/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);


scrollbar使用到下面两张背景图,放到工程目录下的images文件夹里:
 

具体的style sheet代码,这里面的CSS代码还可以写得更优雅一些,反正是起作用了,没太大兴趣再去继续弄
/*
 垂直滚动条
*/
QScrollBar:vertical 
{
    background
: url(images/scrollbar-vertical-bg.png);
    width
: 9px;
    margin
: 0px 0 0px 0;
}
QScrollBar::handle:vertical 
{
    background
: rgb(195, 195, 195);
    min-height
: 20px;
    margin
: 0 1px 0 2px;
    border-radius
: 3px;
    border
: none;
    
/*background: qlineargradient(spread:reflect, 
        x1:0, y1:0, x2:1, y2:0, 
        stop:0 rgba(164, 164, 164, 255), 
        stop:0.5 rgba(120, 120, 120, 255),
        stop:1 rgba(164, 164, 164, 255));
*/
    
/*border-image: url(images/scrollbar-vertical-thumb.png) 8px 0 8px 0 fixed;*/
}

QScrollBar::add-line:vertical 
{
    background
: url(images/scrollbar-vertical-bg.png);
    height
: 0px;
    subcontrol-position
: bottom;
    subcontrol-origin
: margin;
}

QScrollBar::sub-line:vertical 
{
    background
: url(images/scrollbar-vertical-bg.png);
    height
: 0px;
    subcontrol-position
: top;
    subcontrol-origin
: margin;
}

QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical 
{
    border
: 1px solid grey;
    width
: 3px;
    height
: 3px;
    background
: white;
}

QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical 
{
    background
: none;
}

/*
 水平滚动条
*/
QScrollBar:horizontal 
{
    background
: url(images/scrollbar-horizontal-bg.png);
    height
: 9px;
    margin
: 0px 0 0px 0;
}
QScrollBar::handle:horizontal 
{
    background
: rgb(195, 195, 195);
    min-width
: 20px;
    margin
: 2px 0px 1px 0px;
    border-radius
: 3px;
    border
: none;
}
QScrollBar::add-line:horizontal 
{
    border
: 0px solid grey;
    background
: #32CC99;
    width
: 0px;
    subcontrol-position
: right;
    subcontrol-origin
: margin;
}

QScrollBar::sub-line:horizontal 
{
    border
: 0px solid grey;
    background
: #32CC99;
    width
: 0px;
    subcontrol-position
: left;
    subcontrol-origin
: margin;
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal 
{
    background
: none;
}

QTableView {
    color
: black;
    background
: white;
    selection-background-color
: qlineargradient(
        x1: 0, y1: 0, x2: 0, y2: 1,
        stop: 0 #FAFBFE, stop: 1 #DCDEF1)
;
}

QTableView::item:alternate 
{
     background
: red;
 
}

QTableView::item:selected 
{ /*被选中的index*/
    color
: black;
    background
: qlineargradient(
        x1: 0, y1: 0, x2: 0, y2: 1,
        stop: 0 #FAFBFE, 
        stop: 1 #DCDEF1)
;
    
}

QHeaderView 
{
    background
: white;
}

QHeaderView::section, QTableCornerButton::section 
{
    padding
: 1px;
    border
: none;
    border-bottom
: 1px solid rgb(160, 160, 160);
    border-right
: 1px solid rgb(160, 160, 160);
    border-bottom
: 1px solid gray;
    background-color
: qlineargradient(spread:reflect, 
        x1:0, y1:0, x2:0, y2:1, 
        stop:0 rgba(255, 255, 255, 255), 
        stop:1 rgba(164, 164, 164, 255))
;
}

QHeaderView::section:vertical 
{
    background
: url(:/resources/images/bg.jpg);
}

/***************************************************************************
 * QFrame 相关
 *************************************************************************
*/
.QFrame, .QTableView, .QListWidget 
{
    border
: 1px solid  rgb(182, 182, 182);
    border-top
: 1px solid rgb(142, 142, 142);
}
posted on 2011-10-25 20:01 逛奔的蜗牛 阅读(6134) 评论(3)  编辑 收藏 引用 所属分类: Qt

评论

# re: Qt:header view与scrollbar的style sheet 2011-11-10 16:28 风声边界
楼主你贴图界面左侧的工具栏用啥实现的listWidget?
效果不错,有机会借鉴一下啊  回复  更多评论
  

# re: Qt:header view与scrollbar的style sheet[未登录] 2013-10-29 15:28 小米
相当不错,学习了很多。。请问楼主还有没有相关的这样的文件?  回复  更多评论
  

# re: Qt:header view与scrollbar的style sheet 2014-03-19 10:50 welliam
QHeaderView::section:checked {
background:red;
}
这个请问你们设置有效果吗  回复  更多评论
  


只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理