• 79443阅读
  • 162回复

Qt透明酷炫界面设置 [复制链接]

上一主题 下一主题
 

只看楼主 倒序阅读 楼主  发表于: 2012-08-04
— 本帖被 XChinux 执行加亮操作(2016-04-23) —
*************************************************************************************************************
好久没到论坛逛啦,回来翻翻,看到这篇自己三年前写的帖子,感触良多呀
三年前的热情与稚嫩,可以为一点点小小的成就感到兴奋不已
其实帖子中有挺多不太合适的,但是觉得也没必要再去修改,就这么留着吧
因为最近又需要使用到QSS来做前端UI,所以对QSS做了更多了解
最近翻译了一下Qt官方的QSS语法翻译,有需要的可以参考一下
如果有哪里不合适的,也请多多指正啦
Qt StyleSheet语法翻译
*************************************************************************************************************
想让你编写的界面酷炫起来的话,选择样式表是一个很好的选择

说一下个人的经验
觉得有用的话,大家花多几秒钟的时间顶起啊!!!希望对更多的人有用
这里说的是*.qss文件的使用,不是源码中设置的语句
Qt已经把样式表独立了出来,个人认为这是一个很好的做法,可以大大减少源码的复杂程度
美化的效果只要写在单独的文件里就行了!
先放出图片





































下面就给出部分代码示例

/*--------------------------------------------------------------以下为QLineEdit的设置----------------------------------------------------------*/




QLineEdit,QTextEdit {/*控件初始化的设置*/
    border: 1px solid #32435E;
    border-radius: 5px;                /*控件边框的弧度,数值越大,则弯曲得越厉害*/
    /* padding: 0 8px; */
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,    /*背景*/
                                 stop: 0 #113845,
                                 stop: 1.0 #15A8FF);
    selection-background-color: #0A246A;


}
QLineEdit::hover{/*当鼠标经过控件上方时,控件要发生的变化*/
  border-color:#5D8B9E;                /*外边框的颜色*/
}

/*-----------------------------------------------------------以下设置特定QToolButton的属性-----------------------------------------------------*/

QToolButton[objectName="minimizeToolBtn"] {                        /*为特定控件名的按钮单独设置属性*/
    background: transparent;
    border:none;
    image:url(qss/minimize.png)
}
QToolButton[objectName="minimizeToolBtn"]:hover,QToolButton[objectName="minimizeToolBtn"]:pressed {/*为特定控件名的按钮单独设置属性*/
    image:url(qss/minimize_hover.png)
}

/*---------------------------------------------------------以下设置pushbutton的样式-------------------------------------------------*/
QPushButton{
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,    /*三个坐标对应的是上。中。下的background的颜色*/
                                 stop: 0 #122C39, stop: 0.5 #758385,
                                 stop: 1.0 #15A8FF);
    border-color: #11505C;            /*改变boder的颜色,以便实现动态感觉*/
    border-style: outset;
    border-width: 5px;                /*boder的长度,有突出效果*/
    border-radius: 1px;
    padding: 1px;
}


QPushButton::hover{
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #5B5F5F, stop: 0.5 #0C2436,
                                 stop: 1.0 #27405A);
    border-color: #11223F;            /*boder的颜色,boder跟background做对比设置可以有较明显效果*/

}


QPushButton::pressed{/*单击按钮时发生的变化*/
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #969B9C, stop: 0.5 #16354B,
                                 stop: 1.0 #244F76);
    border-color: #11505C;
}
QPushButton::disabled{/*控件不可用时的样式*/
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #282B2C, stop: 0.5 #09121A,
                                 stop: 1.0 #111D29);
    border-color: #0A1320;
    color:#6A6864;


}
有一个小技巧,设置颜色的时候可以到ui文件->右键->转到样式表->然后去选择颜色,就可以找到相应的颜色代码了
当控件多的时候效果就会很明显了!!!!!
因为具体的界面需要具体的设置,这里就不给出太多的代码了
如果大家有兴趣顶起的话,我再过来讲一下一些设置技巧
给大家一个样式表文件看看吧,大家参考一下!希望大家顶起! style2.qss.zip (4 K) 下载次数:1196
有好东西就跟大家分享,这是一种精神哦,不要下载了拍个屁股走人哦
下面是一个测试的源码包
styletest.zip (704 K) 下载次数:2851 (这个是源码包,可以直接用的,编码请使用UT-F8)
关于透明无边框的窗体使用,我在下面的那个帖子放出了源码,注意,那个只能在ubuntu下运行
http://www.qtcn.org/bbs/read-htm-tid-50273.html









33条评分好评度+7贡献值+6金钱+39威望+7
436063945 金钱 +1 - 2021-03-19
zhuboom 金钱 +1 - 2020-08-13
candidates 金钱 +5 - 2020-01-16
npc1993 好评度 +1 非常有用 2018-04-09
npc1993 贡献值 +1 非常有用 2018-04-09
npc1993 威望 +1 非常有用 2018-04-09
npc1993 金钱 +1 非常有用 2018-04-09
ztdsj 好评度 +1 - 2017-05-09
ztdsj 贡献值 +1 - 2017-05-09
ztdsj 威望 +1 - 2017-05-09
ftpm
离线hcaihao

只看该作者 1楼 发表于: 2012-08-04
感谢楼主,不知图片是否可以一并放出

只看该作者 2楼 发表于: 2012-08-04
回 1楼(hcaihao) 的帖子
整个源码都打包放出了,大概的样式表用法我也用中文注释过,希望大家顶起啊!一起美化我们的界面!
ftpm
离线pzhengwf

只看该作者 3楼 发表于: 2012-08-05
样式表一直是个弱点,的确够炫,顶起来
离线7048796

只看该作者 4楼 发表于: 2012-08-05
感谢楼主 顶一个
离线zhhy072588
只看该作者 5楼 发表于: 2012-08-06
,谢谢楼主分享
离线ogred3d
只看该作者 6楼 发表于: 2012-08-06
很不错的,谢谢楼主分享。
期待LZ更多的例子、教程。
Qt
离线lyjbbq

只看该作者 7楼 发表于: 2012-08-07
支持楼主!!!!感谢楼主分享!!!希望楼主再接再厉再分享哈
离线xf19890224
只看该作者 8楼 发表于: 2012-08-07
回 楼主(ubuntu爱好者) 的帖子
我运行了一下您的程序,调节那个滑块没有看到透明的效果呀?

只看该作者 9楼 发表于: 2012-08-07
回 8楼(xf19890224) 的帖子
是在虚拟机下么?虚拟机由于显卡支持的问题,那种方法做的透明度是没有办法实现的哦
ftpm
离线ffii4455

只看该作者 10楼 发表于: 2012-08-07
MARK
离线xiao_xiao_ca
只看该作者 11楼 发表于: 2012-08-07
却是很酷,期待更多分享,让我这种不知道从来学起的人做参考。。
离线grandi
只看该作者 12楼 发表于: 2012-08-08
楼主教教我怎么设置,在哪里添加?
离线grandi
只看该作者 13楼 发表于: 2012-08-08
请问下,例子在windows下能运行吗?我怎么在windows下出错啊

只看该作者 14楼 发表于: 2012-08-09
回 12楼(grandi) 的帖子
你是说设置什么?能讲清楚一点么?
ftpm

只看该作者 15楼 发表于: 2012-08-09
回 13楼(grandi) 的帖子
那个例子是能运行的,在windows下要注意你的编码,先把你的Qt默认的编码改成UT-F8然后在载入项目,试试吧
ftpm
离线myseemylife

只看该作者 16楼 发表于: 2012-08-09
Re:回 8楼(xf19890224) 的帖子
引用第9楼ubuntu爱好者于2012-08-07 10:30发表的 回 8楼(xf19890224) 的帖子 :
是在虚拟机下么?虚拟机由于显卡支持的问题,那种方法做的透明度是没有办法实现的哦[表情]  

确实~~~我一直还以为我的透明代码有问题~
后来不用虚拟机。。透明效果就出现了。。哎~~、

不过相比于QSS,我更喜欢代码控制

蠢笨的愚钝~

只看该作者 17楼 发表于: 2012-08-09
回 16楼(myseemylife) 的帖子
嗯,只是如果要设置的样式太多的话就会让代码很乱,而且相同的控件要写同样的代码...这个就看个人喜好咯呵呵
ftpm
离线xuebayang

只看该作者 18楼 发表于: 2012-08-09
太好了,谢谢楼主呀~
离线sherry_xx

只看该作者 19楼 发表于: 2012-08-11
    
感谢分享!非常棒!
离线梦魇缘
只看该作者 20楼 发表于: 2012-08-17
离线zhou86906400
只看该作者 21楼 发表于: 2012-08-26
让我找到了方向!!顶起来
离线xf19890224
只看该作者 22楼 发表于: 2012-08-29
好吧!不幸被你言中了~~~我就是在虚拟机下弄的~~~
离线chrysaor

只看该作者 23楼 发表于: 2012-08-29
回 楼主(ubuntu爱好者) 的帖子
谢谢,好东西,学习一下
离线itshayu
只看该作者 24楼 发表于: 2012-08-31
回 楼主(ubuntu爱好者) 的帖子
好东东,要学习一下
离线coldair

只看该作者 25楼 发表于: 2012-09-04
真不错,正需要这个呢,谢谢
离线yewenlin
只看该作者 26楼 发表于: 2012-09-05
windows  系统下,用qt creator 编译 不通过
----------------------------------------------
构建项目three 时发生错误 (目标: 桌面)
当执行构建步骤 'qmake'时

----------------------------------------------
如果用vs 2008 错误就更多了
离线寒意

只看该作者 27楼 发表于: 2012-09-05
嘻嘻!顶一个
离线无心徘徊

只看该作者 28楼 发表于: 2012-09-05
顶一个!!!!!
不错, 这个东东少量控制使用还是不错的, 能够美化界面; 但过多使用会影响到程序性能, 可以根据实际项目要求来处理界面问题。
技术是知识的积累,艺术是知识的熟练!

只看该作者 29楼 发表于: 2012-09-09
回 26楼(yewenlin) 的帖子
这个不是这个示例的错误哦,那个是因为你的Qt没有设置好才会这样的,我在win7下编译通过
ftpm
离线ruiboxu

只看该作者 30楼 发表于: 2012-09-09
感谢楼主
离线ruiboxu

只看该作者 31楼 发表于: 2012-09-09
感谢楼主
离线liuyuanan

只看该作者 32楼 发表于: 2012-09-09
感谢楼主,向楼主学习
离线furey

只看该作者 33楼 发表于: 2012-09-24
挺你楼主

只看该作者 34楼 发表于: 2012-10-12
回 26楼(yewenlin) 的帖子
你是在win下做的吧,win下的Qt有一个选项是要撤销的,你百度一下,我忘了,也没在win下装QT所以就帮不了你查了
ftpm
离线cfxks1989

只看该作者 35楼 发表于: 2012-10-19
支持下,很有参考价值
离线ltpgt
只看该作者 36楼 发表于: 2012-10-21
感谢分享
离线twbnj
只看该作者 37楼 发表于: 2012-10-23
楼主专业,做界面的可以借鉴下啦!
离线mao20602130

只看该作者 38楼 发表于: 2012-11-01
多谢分享
离线dnn_xin

只看该作者 39楼 发表于: 2012-11-07
支持楼主!感谢楼主分享!有个问题:QFileDialog 是如何设置背景色的 谢谢
快速回复
限100 字节
 
上一个 下一个