发帖 回复
返回列表
  • 7507阅读
  • 10回复

[提问]qt控件css样式表设计在有QScrollArea中就会失效 [复制链接]

 上一主题 下一主题
离线jinzhu1911
新手上路
 
只看楼主 倒序阅读 楼主  发表于: 2017-03-08
— 本帖被 XChinux 从 其它技术开发讨论区 移动到本区(2017-03-29) —
qt设计的界面，控件的样式都是通过css样式表文件设计的，在程序初始化用qApp->setStyleSheet()对所有窗口控件应用样式表，
但是有的控件一旦放到QScrollArea中，控件的样式表设计就失效，需要在单独对该控件调用setStyleSheet，这是为什么？有没有什么更好的解决办法，谢谢！
本帖提到的人: @zzh @transformer @呼吸127
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
离线liudianwu
总版主
只看该作者 1楼 发表于: 2017-03-09
是这样的，Qt的BUG
欢迎关注微信公众号：Qt实战/Qt入门和进阶(各种开源作品、经验整理、项目实战技巧，专注Qt/C++软件开发，视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发) QQ：517216493  WX：feiyangqingyun  QQ群：751439350
回复
举报
离线rotung
新手上路
只看该作者 2楼 发表于: 2017-03-09
Qt里面有这个BUG??  ( ⊙ o ⊙ )！ 目前使用似乎没遇到过呀.  
如下是我之前使用过的qss：
里面设置了QScrollArea式样以及滚动条QScroll式样，然后是QScrollArea容器中的其他控件的式样。最后在程序初始化用qApp->setStyleSheet()对所有窗口控件应用样式表。 都是可以生效的。
复制代码
  1. /**************************************************************************
  2. * style setting of scrollArea
  3. **************************************************************************/
  4. QScrollArea#scrollArea_manager,#scrollArea_ImgShow
  5. {
  6. border: hidden;
  7. background-color: #101010;
  8. }
  9. /******************************************************************************
  10. * style setting of QScrollBar
  11. ****************************************************************************/
  12. QScrollBar:vertical
  13. {
  14. border: 2px solid #484848;
  15. background: #484848;
  16. width: 16px;
  17. margin: 20px 0px 20px 0px;
  18. }
  19. QScrollBar::handle:vertical
  20. {
  21. background: #808080;
  22. min-height: 60px;
  23. margin: 0px 3px 0px 3px;
  24. border-radius: 3px;
  25. }
  26. QScrollBar::handle:vertical:hover
  27. {
  28. background: #CCCCCC;
  29. }
  30. QScrollBar::handle:vertical:pressed
  31. {
  32. background: #CCCCCC;
  33. }
  34. QScrollBar::add-line:vertical
  35. {
  36. border: 2px solid #484848;
  37. background: #484848;
  38. height: 20px;
  39. subcontrol-position: bottom;
  40. subcontrol-origin: margin;
  41. }
  42. QScrollBar::sub-line:vertical
  43. {
  44. border: 2px solid #484848;
  45. background: #484848;
  46. height: 20px;
  47. subcontrol-position: top;
  48. subcontrol-origin: margin;
  49. }
  50. QScrollBar:up-arrow:vertical
  51. {
  52. width: 8px;
  53. height: 8px;
  54. border-image: url(:/image/up-arrow.png);
  55. }
  56. QScrollBar:up-arrow:vertical:hover
  57. {
  58. border-image: url(:/image/up-arrow_hover.png);
  59. }
  60. QScrollBar:up-arrow:vertical:pressed
  61. {
  62. border-image: url(:/image/up-arrow_hover.png);
  63. }
  64. QScrollBar::down-arrow:vertical
  65. {
  66. width: 8px;
  67. height: 8px;
  68. border-image: url(:/image/down-arrow.png);
  69. }
  70. QScrollBar::down-arrow:vertical:hover
  71. {
  72. border-image: url(:/image/down-arrow_hover.png);
  73. }
  74. QScrollBar::down-arrow:vertical:pressed
  75. {
  76. border-image: url(:/image/down-arrow_hover.png);
  77. }
  78. QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical
  79. {
  80. background: none;
  81. }
  84. QScrollBar:horizontal
  85. {
  86. border: 2px solid #484848;
  87. background: #484848;
  88. height: 16px;
  89. margin: 0px 20px 0px 20px;
  90. }
  91. QScrollBar::handle:horizontal
  92. {
  93. background: #808080;
  94. min-width: 60px;
  95. margin: 3px 0px 3px 0px;
  96. border-radius: 3px;
  97. }
  98. QScrollBar::handle:horizontal:hover
  99. {
  100. background: #CCCCCC;
  101. }
  102. QScrollBar::handle:horizontal:pressed
  103. {
  104. background: #CCCCCC;
  105. }
  106. QScrollBar::add-line:horizontal
  107. {
  108. border: 2px solid #484848;
  109. background: #484848;
  110. width: 20px;
  111. subcontrol-position: right;
  112. subcontrol-origin: margin;
  113. }
  114. QScrollBar::sub-line:horizontal
  115. {
  116. border: 2px solid #484848;
  117. background: #484848;
  118. width: 20px;
  119. subcontrol-position: left;
  120. subcontrol-origin: margin;
  121. }
  122. QScrollBar:left-arrow:horizontal
  123. {
  124. width: 8px;
  125. height: 8px;
  126. border-image: url(:/image/left-arrow.png);
  127. }
  128. QScrollBar:left-arrow:horizontal:hover
  129. {
  130. border-image: url(:/image/left-arrow_hover.png);
  131. }
  132. QScrollBar:left-arrow:horizontal:pressed
  133. {
  134. border-image: url(:/image/left-arrow_hover.png);
  135. }
  136. QScrollBar::right-arrow:horizontal
  137. {
  138. width: 8px;
  139. height: 8px;
  140. border-image: url(:/image/right-arrow.png);
  141. }
  142. QScrollBar::right-arrow:horizontal:hover
  143. {
  144. border-image: url(:/image/right-arrow_hover.png);
  145. }
  146. QScrollBar::right-arrow:horizontal:pressed
  147. {
  148. border-image: url(:/image/right-arrow_hover.png);
  149. }
  150. QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal
  151. {
  152. background: none;
  153. }
  154. /***************************************************************************
  155. * style of QRadioButton
  156. ****************************************************************************/
  157. QRadioButton
  158. {
  159. color: #ECECEC;
  160. }
  162. /***************************************************************************
  163. * style of QCheckBox
  164. ****************************************************************************/
  165. QCheckBox
  166. {
  167. color: #ECECEC;
  168. }
  170. /***************************************************************************
  171. * style of QProgressBar
  172. ****************************************************************************/
  173. QProgressBar
  174. {
  175. text-align: center;
  176. }
  178. /****************************************************************************
  179. * style of textEdit
  180. *****************************************************************************/
  181. QTextEdit
  182. {
  183. background-color: #111111;
  184. color: #FFFFFF;
  185. border-width: 1px;
  186. border-style: solid;
  187. border-color: #3E3E3E;
  188. }
  190. QTextEdit[description="true"]{
  191. background-color: #111111;
  192. border-width: 1px;
  193. border-style: solid;
  194. border-color: #3E3E3E
  195. }
  196. /*******************************************************************************
  197. * style setting of QGroupBox
  198. *******************************************************************************/
  199. QGroupBox
  200. {
  201. border: 1px solid #454545;
  202. border-radius: 3px;
  203. margin-top: 8;
  204. margin-bottom: 0px;
  205. background-color: #252525;
  206. }
  207. QGroupBox::title
  208. {
  209. top:-8 ex;
  210. left: 10px;
  211. subcontrol-origin: border;
  212. color: #ECECEC;
  213. }
  215. /**********************************************************************
  216. * style setting of QSlider
  217. **********************************************************************/
  219. QSlider::groove:Horizontal
  220. {
  221. height:4px;
  222. border-image: url(:/image/slider_bar.png);
  223. }
  224. QSlider::handle:Horizontal
  225. {
  226. width:13px;
  227. border-image:url(:/image/slider_thumb_off.png);
  228. margin: -7px 0px -10px 0px;
  229. }
  230. QSlider::handle:horizontal:hover
  231. {
  232. border-image:url(:/image/slider_thumb_on.png);
  233. margin: -7px 0px -10px 0px;
  234. }
  236. QSlider#vSlider_power_tempControl::groove:vertical
  237. {
  238. border-left: 1px solid #000000;
  239. border-top: 1px solid #000000;
  240. border-right: 1px solid #808080;
  241. border-bottom: 1px solid #808080;
  242. background: #434343;
  244. position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */
  245. left: 8px; right: 8px;
  247. }
  248. QSlider#vSlider_power_tempControl::handle:vertical
  249. {
  250. border-image: url(:/image/vslider_thumb_off.png) -1 0 1 -1 stretch stretch;
  251. margin: -2px -8px -2px -15px; /* expand outside the groove */
  252. height: 16px;
  253. }
  254. QSlider#vSlider_power_tempControl::handle:vertical:hover
  255. {
  256. border-image: url(:/image/vslider_thumb_on.png) -1 0 1 -1 stretch stretch;;
  257. margin: -2px -8px -2px -15px; /* expand outside the groove */
  258. height: 16px;
  259. }
  261. QSlider#vSlider_temp_tempCotrol::groove:vertical
  262. {
  263. border-left: 1px solid #000000;
  264. border-top: 1px solid #000000;
  265. border-right: 1px solid #808080;
  266. border-bottom: 1px solid #808080;
  267. background: #434343;
  269. position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */
  270. left: 8px; right: 8px;
  271. }
  272. QSlider#vSlider_temp_tempCotrol::handle:vertical
  273. {
  274. border-image: url(:/image/vslider_thumb_off.png) -1 0 1 -1 stretch stretch;
  275. margin: -2px -8px -2px -15px; /* expand outside the groove */
  276. height: 16px;
  277. }
  278. QSlider#vSlider_temp_tempCotrol::handle:vertical:hover
  279. {
  280. border-image: url(:/image/vslider_thumb_on.png) -1 0 1 -1 stretch stretch;;
  281. margin: -2px -8px -2px -15px; /* expand outside the groove */
  282. height: 16px;
  283. }
回复
举报
离线jinzhu1911
新手上路
只看该作者 3楼 发表于: 2017-03-09
回 liudianwu 的帖子
liudianwu:是这样的，Qt的BUG (2017-03-09 09:14) 

我也觉得是，没有找找到解决的办法
回复
举报
离线jinzhu1911
新手上路
只看该作者 4楼 发表于: 2017-03-09
回 rotung 的帖子
rotung:Qt里面有这个BUG??  ( ⊙ o ⊙ )！ 目前使用似乎没遇到过呀.  
如下是我之前使用过的qss：
里面设置了QScrollArea式样以及滚动条QScroll式样，然后是QScrollArea容器中的其他控件的式样。最后在程序初始化用qApp->setStyleSheet()对所有窗口控件应用样式 .. (2017-03-09 09:45) 

我把我的css文件，改为qss文件，还是不行
回复
举报
离线jinzhu1911
新手上路
只看该作者 5楼 发表于: 2017-03-09

图片中上面的按钮就是样式表失效的情况，下面的才是正常情况
回复
举报
离线rotung
新手上路
只看该作者 6楼 发表于: 2017-03-10
特意尝试了下，如下图：没有问题啊~



是不是你的QSS代码里面的问题，或者程序里其它问题引起的？
回复
举报
离线jinzhu1911
新手上路
只看该作者 7楼 发表于: 2017-03-10
回 rotung 的帖子
rotung:特意尝试了下，如下图：没有问题啊~
[图片]
是不是你的QSS代码里面的问题，或者程序里其它问题引起的？[表情] (2017-03-10 10:28) 

QPushButton, QPushButton[type="typeOne"], QPushButton[type="typeTwo"] { height: 24; min-width: 56; border-width: 5; padding: -5 2; }
QPushButton, QPushButton[type="typeOne"]{ border-image: url("../Data/Img/darkBlue/QPushButton/typeOne/normal.png") 5; }
QPushButton:hover, QPushButton[type="typeOne"]:hover { border-image: url("../Data/Img/darkBlue/QPushButton/typeOne/hover.png") 5; }
QPushButton:pressed, QPushButton[type="typeOne"]:pressed { border-image: url("../Data/Img/darkBlue/QPushButton/typeOne/pressed.png") 5; }
QPushButton::checked , QPushButton[type="typeOne"]::checked { border-image: url("../Data/Img/darkBlue/QPushButton/typeOne/checked.png") 5; color: #ffaa00; }
QPushButton:disabled { color: #a0b3bb; background: transparent; }
QPushButton:disabled, QPushButton[type="typeOne"]:disabled { border-image: url("../Data/Img/darkBlue/QPushButton/typeOne/disabled.png") 5; }

QPushButton[type="typeTwo"] { border-width: 5 6 5 6; }
QPushButton[type="typeTwo"] { border-image: url("../Data/Img/darkBlue/QPushButton/typeTwo/normal.png") 5 6 5 6; }
QPushButton[type="typeTwo"]:hover { border-image: url("../Data/Img/darkBlue/QPushButton/typeTwo/hover.png") 5 6 5 6; }
QPushButton[type="typeTwo"]:pressed { border-image: url("../Data/Img/darkBlue/QPushButton/typeTwo/pressed.png") 5 6 5 6; }
QPushButton[type="typeTwo"]:disabled { border-image: url("../Data/Img/darkBlue/QPushButton/typeTwo/disabled.png") 5 6 5 6; }

QProgressBar { border-width: 3; min-height: 20; max-height: 20; min-width: 20; text-align: center; }
QProgressBar { border-image: url("../Data/Img/darkBlue/QProgressBar/typeOne/bar.png") 3;}
QProgressBar::chunk { border-image: url("../Data/Img/darkBlue/QProgressBar/typeOne/chunk.png") 2; border-width: 2; spacing: 2;}

QRadioButton:disabled { color: #a0b3bb;  background: transparent; }
QRadioButton:indicator { width: 14; height: 13; }
QRadioButton:indicator:unchecked { image: url("../Data/Img/darkBlue/QRadioButton/typeOne/unchecked_normal.png"); }

QRadioButton:indicator:unchecked:hover { image: url("../Data/Img/darkBlue/QRadioButton/typeOne/unchecked_hover.png"); }
QRadioButton:indicator:unchecked:pressed { image: url("../Data/Img/darkBlue/QRadioButton/typeOne/unchecked_pressed.png"); }
QRadioButton:indicator:unchecked:disabled { image: url("../Data/Img/darkBlue/QRadioButton/typeOne/unchecked_disabled.png"); }
QRadioButton:indicator:checked { image: url("../Data/Img/darkBlue/QRadioButton/typeOne/checked_normal.png"); }
QRadioButton:indicator:checked:hover { image: url("../Data/Img/darkBlue/QRadioButton/typeOne/checked_hover.png"); }
QRadioButton:indicator:checked:pressed { image: url("../Data/Img/darkBlue/QRadioButton/typeOne/checked_pressed.png"); }
QRadioButton:indicator:checked:disabled { image: url("../Data/Img/darkBlue/QRadioButton/typeOne/checked_disabled.png"); }

/*QScrollArea { border: 0 solid #496c85; background: transparent; }*/
QScrollArea { border: none; background: transparent; }
QScrollArea QWidget { background: transparent; border: none; }

QScrollBar::handle {background: rgba(23, 119, 141, 50%); margin: 1;}
QScrollBar::handle:hover { background: rgba(27, 205, 226, 50%); }
QScrollBar:horizontal {height:13; border: 1 solid #496c85; background: transparent; padding: 0 11;}
QScrollBar::vertical {width:13; border: 1 solid #496c85; background: transparent; padding: 11 0;}

QScrollBar::add-line:horizontal {subcontrol-position: right; subcontrol-origin: margin; width: 12; border:none;}
QScrollBar::sub-line:horizontal {subcontrol-position: left; subcontrol-origin: margin; width: 12; border:none;}
QScrollBar::add-line:vertical {subcontrol-position: bottom; subcontrol-origin: margin; height: 12; border:none;}
QScrollBar::sub-line:vertical {subcontrol-position: top; subcontrol-origin: margin; height: 12; border:none;}
QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {width 10; height: 9; border:none;}
QScrollBar:up-arrow:vertical, QScrollBar::down-arrow:vertical {width 9; height: 10; border:none;}

QScrollBar::left-arrow {image: url("../Data/Img/darkBlue/QScrollBar/typeOne/left.png"); margin-left: 1;}
QScrollBar::right-arrow {image: url("../Data/Img/darkBlue/QScrollBar/typeOne/right.png"); margin-right: 2;}
QScrollBar::up-arrow {image: url("../Data/Img/darkBlue/QScrollBar/typeOne/up.png"); margin-top: 1;}
QScrollBar::down-arrow {image: url("../Data/Img/darkBlue/QScrollBar/typeOne/down.png"); margin-bottom: 2;}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal, QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical { background: none;}
回复
举报
离线jinzhu1911
新手上路
只看该作者 8楼 发表于: 2017-03-10
回 jinzhu1911 的帖子
jinzhu1911:QPushButton, QPushButton[type="typeOne"], QPushButton[type="typeTwo"] { height: 24; min-width: 56; border-width: 5; padding: -5 2; }
QPushButton, QPushButton[type="typeOne"]{ border-image: url("../Data/Img/darkBlue/QPushButt .. (2017-03-10 19:18) 

上述使我的css文件中的一段代码，你看看有什么问题
回复
举报
离线foxgod
骑士
只看该作者 9楼 发表于: 2018-07-17
回 rotung 的帖子
rotung:特意尝试了下，如下图：没有问题啊~
[图片]
是不是你的QSS代码里面的问题，或者程序里其它问题引起的？[表情] (2017-03-10 10:28) 

我在ui里面拖入了一个scrollarea ,在创建的widget里面又拖入了一个ui.widget,为什么我这是了主窗口的qss后，我发现我拖入的scrollarea背景图片也是主界面的这个图片呢、
回复
举报
离线rotung
新手上路
只看该作者 10楼 发表于: 2018-10-29
回 foxgod 的帖子
foxgod:我在ui里面拖入了一个scrollarea ,在创建的widget里面又拖入了一个ui.widget,为什么我这是了主窗口的qss后，我发现我拖入的scrollarea背景图片也是主界面的这个图片呢、 (2018-07-17 16:52) 

qt设置风格的时候 子控件是会自动继承父控件的风格的。 所以如果你只需要设置主窗口的背景图，可以通过“#”+控件名来进行单独指定。
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个