• QScrollArea样式

            简介

            QScrollBar垂直滚动条分为sub-line、add-line、add-page、sub-page、up-arrow、down-arrow和handle几个部分。
            QScrollBar水平滚动条分为sub-line、add-line、add-page、sub-page、left-arrow、right-arrow和handle几个部分。

    部件如下图所示：

     样式详细说明

    1. /* 整个滚动条区域样式 */
    2. QScrollBar:vertical {
    3.   border: 2px solid grey;
    4.   background: #32CC99;
    5.   width: 30px;
    6.   /* 滑块活动区域间距，这个间距如果小于add-line和sub-line的高度或宽度滚动滑块将会覆盖add-line和sub-line，所以可以通过margin: 0px 0 0px 0;来隐藏滚动条两头区域*/
    7.   margin: 32px 0 32px 0;
    8. }
    9.  
    10. /* 滑块区域样式 */
    11. QScrollBar::handle:vertical {
    12.   background: rgb(250, 3, 3);
    13.   border: 2px solid rgb(8, 8, 8);
    14.   border-radius: 10px;
    15.   /*无效，宽度由QScrollBar width控制*/
    16.   width: 10px;
    17.   /*可以通过margin设置滑块小于QScrollBar width，再鼠标滑过滑块样式中再重新设置margin，达到鼠标滑过滑块变大的效果，但是圆角设置border-radius不生效了！！！*/
    18.   margin: 0 5px 0 5px;
    19.   min-height: 50px;
    20.   /*max-height无效!!!*/
    21.   max-height: 50px;
    22. }
    23.  
    24. /* 鼠标滑过滑块样式 */
    25. QScrollBar::handle:vertical:hover,
    26. QScrollBar::handle:vertical:pressed {
    27.   border-radius: 10px;
    28.   margin: 0 1px 0 1px;
    29.   background: rgb(221, 81, 17);
    30. }
    31.  
    32. /* 向上区域样式 */
    33. QScrollBar::sub-line:vertical {
    34.   border: 2px solid rgb(18, 208, 221);
    35.   background: #0c5a20;
    36.   height: 30px;
    37.   subcontrol-position: top;
    38.   subcontrol-origin: margin;
    39. }
    40.  
    41. /* 向下区域样式 */
    42. QScrollBar::add-line:vertical {
    43.   border: 2px solid rgb(68, 218, 31);
    44.   background: #123026;
    45.   height: 30px;
    46.   subcontrol-position: bottom;
    47.   subcontrol-origin: margin;
    48. }
    49.  
    50. /* 向上箭头样式 */
    51. QScrollBar::up-arrow:vertical {
    52.   border-image:url(:/scrollarea/resources/image/scrollarea/arrowup.png);
    53.   border: 2px solid rgb(22, 12, 68);
    54.   width: 20;
    55.   height: 20;
    56.   background: rgb(130, 141, 165);
    57. }
    58.  
    59. /* 向下箭头样式 */
    60. QScrollBar::down-arrow:vertical {
    61.   border-image:url(:/scrollarea/resources/image/scrollarea/arrowdown.png);
    62.   border: 2px solid rgb(223, 104, 104);
    63.   width: 20;
    64.   height: 20;
    65.   background: rgb(233, 159, 177);
    66. }
    67.  
    68. /* 当鼠标放到向上区域的时候 */
    69. QScrollBar::sub-line:vertical:hover {}
    70.  
    71. /* 当鼠标放到向下区域的时候 */
    72. QScrollBar::add-line:vertical:hover {}
    73.  
    74. /* 当鼠标放到向上箭头上的时候 */
    75. QScrollBar::up-arrow:vertical:hover {
    76.   /* height:9px;width:8px; */
    77.   /* border-image:url(:/images/a/2.png); */
    78.   subcontrol-position: top;
    79. }
    80.  
    81. /* 当鼠标放到向下箭头上的时候 */
    82. QScrollBar::down-arrow:vertical:hover {
    83.   /* height:9px;width:8px; */
    84.   /* border-image:url(:/images/a/4.png); */
    85.   subcontrol-position: bottom;
    86. }
    87.  
    88. /* 滑块上面区域样式 */
    89. QScrollBar::sub-page:vertical {
    90.   background: rgb(117, 196, 13);
    91.   border: 2px solid rgb(223, 104, 104);
    92. }
    93.  
    94. /* 滑块下面区域样式 */
    95. QScrollBar::add-page:vertical {
    96.   background: rgba(255, 102, 11);
    97.   border: 2px solid rgb(223, 104, 104);
    98. }
    99.  
    100. /* ############################################ */
    101. /* 整个滚动条区域样式 */
    102. QScrollBar:horizontal {
    103.   border: 2px solid grey;
    104.   background: #32CC99;
    105.   height: 30px;
    106.   /* 滑块活动区域间距，这个间距如果小于add-line和sub-line的高度或宽度滚动滑块将会覆盖add-line和sub-line，所以可以通过margin: 0px 0 0px 0;来隐藏滚动条两头区域*/
    107.   margin: 0 32px 0 32px;
    108. }
    109.  
    110. /* 滑块区域样式 */
    111. QScrollBar::handle:horizontal {
    112.   background: rgb(250, 3, 3);
    113.   border: 2px solid rgb(8, 8, 8);
    114.   /*无效，高度由QScrollBar height控制*/
    115.   height: 10px;
    116.   /*可以通过margin设置滑块小于QScrollBar height，再鼠标滑过滑块样式中再重新设置margin，达到鼠标滑过滑块变大的效果*/
    117.   margin: 5px 0 5px 0;
    118.   min-width: 50px;
    119.   /*max-width无效!!!*/
    120.   max-width: 50px;
    121. }
    122.  
    123. /* 鼠标滑过滑块样式 */
    124. QScrollBar::handle:horizontal:hover,
    125. QScrollBar::handle:horizontal:pressed {
    126.   margin: 0 1px 0 1px;
    127.   background: rgb(221, 81, 17);
    128. }
    129.  
    130. /* 向左区域样式 */
    131. QScrollBar::sub-line:horizontal {
    132.   border: 2px solid rgb(18, 208, 221);
    133.   background: #0c5a20;
    134.   width: 30px;
    135.   /*sub-line:horizontal要设置height但是sub-line:vertical却不要设置width！！！*/
    136.   height: 20px;
    137.   subcontrol-position: left;
    138.   subcontrol-origin: margin;
    139. }
    140.  
    141. /* 向右区域样式 */
    142. QScrollBar::add-line:horizontal {
    143.   border: 2px solid rgb(68, 218, 31);
    144.   background: #123026;
    145.   width: 30px;
    146.   height: 20px;
    147.   subcontrol-position: right;
    148.   subcontrol-origin: margin;
    149. }
    150.  
    151. /* 向左箭头样式 */
    152. QScrollBar::left-arrow:horizontal {
    153.   border-image:url(:/scrollarea/resources/image/scrollarea/arrow-left.png);
    154.   border: 2px solid rgb(22, 12, 68);
    155.   width: 20;
    156.   height: 20;
    157.   background: rgb(130, 141, 165);
    158. }
    159.  
    160. /* 向右箭头样式 */
    161. QScrollBar::right-arrow:horizontal {
    162.   border-image:url(:/scrollarea/resources/image/scrollarea/arrowright.png);
    163.   border: 2px solid rgb(223, 104, 104);
    164.   width: 20;
    165.   height: 20;
    166.   background: rgb(233, 159, 177);
    167. }
    168.  
    169. /* 当鼠标放到向左区域的时候 */
    170. QScrollBar::sub-line:horizontal:hover {}
    171.  
    172. /* 当鼠标放到向右区域的时候 */
    173. QScrollBar::add-line:horizontal:hover {}
    174.  
    175. /* 当鼠标放到向左箭头上的时候 */
    176. QScrollBar::left-arrow:horizontal:hover {
    177.   /* height:9px;width:8px; */
    178.   /* border-image:url(:/images/a/2.png); */
    179.   subcontrol-position: top;
    180. }
    181.  
    182. /* 当鼠标放到向右箭头上的时候 */
    183. QScrollBar::right-arrow:horizontal:hover {
    184.   /* height:9px;width:8px; */
    185.   /* border-image:url(:/images/a/4.png); */
    186.   subcontrol-position: bottom;
    187. }
    188.  
    189. /* 滑块左面区域样式 */
    190. QScrollBar::sub-page:horizontal {
    191.   background: rgb(117, 196, 13);
    192.   border: 2px solid rgb(223, 104, 104);
    193. }
    194.  
    195. /* 滑块右面区域样式 */
    196. QScrollBar::add-page:horizontal {
    197.   background: rgba(255, 102, 11);
    198.   border: 2px solid rgb(223, 104, 104);
    199. }
    200.  
    201. QScrollArea qss样式美化
    202.  
    203. /* QScrollArea {
    204.   border: none;
    205.   background: none;
    206. } */
    207.  
    208. /* 整个垂直滚动条区域样式 */
    209. QScrollBar:vertical {
    210.   border: none;
    211.   background: rgb(30, 30, 30);
    212.   width: 10px;
    213.   margin: 0px 0 0px 0;
    214. }
    215.  
    216. /* 整个水平滚动条区域样式 */
    217. QScrollBar:horizontal {
    218.   border: none;
    219.   background: rgb(30, 30, 30);
    220.   height: 10px;
    221.   margin: 0px 0 0px 0;
    222. }
    223.  
    224. /* 滑块区域样式 */
    225. QScrollBar::handle:vertical {
    226.   background: rgb(66, 66, 66);
    227.   min-height: 20px;
    228.   border-radius: 5px;
    229.   border: none;
    230.   /* margin: 0 1px 0 1px; */
    231. }
    232.  
    233. QScrollBar::handle:horizontal {
    234.   background: rgb(66, 66, 66);
    235.   min-height: 20px;
    236.   border-radius: 5px;
    237.   border: none;
    238. }
    239.  
    240. /* 鼠标滑过滑块样式 */
    241. QScrollBar::handle:vertical:hover,
    242. QScrollBar::handle:vertical:pressed {
    243.   background: rgb(79, 79, 79);
    244.   /* margin: 0 0 0 0; */
    245. }
    246.  
    247. QScrollBar::handle:horizontal:hover,
    248. QScrollBar::handle:horizontal:pressed {
    249.   background: rgb(79, 79, 79);
    250. }
    251.  
    252. /* 向下箭头样式 */
    253. QScrollBar::add-line:vertical {
    254.   border: none;
    255.   background: none;
    256.   height: 0px;
    257.   subcontrol-position: bottom;
    258.   subcontrol-origin: margin;
    259. }
    260.  
    261. /* 向右箭头样式 */
    262. QScrollBar::add-line:horizontal {
    263.   border: none;
    264.   background: none;
    265.   height: 0px;
    266.   subcontrol-position: bottom;
    267.   subcontrol-origin: margin;
    268. }
    269.  
    270. /* 向上箭头样式 */
    271. QScrollBar::sub-line:vertical {
    272.   border: none;
    273.   background: none;
    274.   height: 0px;
    275.   subcontrol-position: top;
    276.   subcontrol-origin: margin;
    277. }
    278.  
    279. /* 向左箭头样式 */
    280. QScrollBar::sub-line:horizontal {
    281.   border: none;
    282.   background: none;
    283.   height: 0px;
    284.   subcontrol-position: top;
    285.   subcontrol-origin: margin;
    286. }
    287.  
    288. /* 滚动条上面和下面区域样式 */
    289. QScrollBar::sub-page:vertical,
    290. QScrollBar::add-page:vertical {
    291.   background: none;
    292.   width: 0px;
    293.   height: 0px;
    294. }
    295.  
    296. /* 滚动条左面和右面区域样式 */
    297. QScrollBar::sub-page:horizontal,
    298. QScrollBar::add-page:horizontal {
    299.   background: none;
    300.   width: 0px;
    301.   height: 0px;
    302. }
    303.  
    304.  
    305. 重写QScrollArea实现QScrollArea获得焦点时qscrollbar才显示，使用时将QScrollArea提升为自定义的QScrollArea。
    306.  
    307. #pragma once
    308. #include <QtWidgets>
    309.  
    310. class MyQScrollArea : public QScrollArea
    311. {
    312.   Q_OBJECT
    313. private:
    314. protected:
    315.   void enterEvent(QEvent *event) override;
    316.   void leaveEvent(QEvent *event) override;
    317.  
    318. public:
    319.   MyQScrollArea(QWidget *parent = nullptr);
    320.   ~MyQScrollArea();
    321. };
    322.  
    323.  
    324. #include "myqscrollarea.h"
    325.  
    326. MyQScrollArea::MyQScrollArea(QWidget *parent) : QScrollArea(parent)
    327. {
    328.   // setMouseTracking(true);
    329.   verticalScrollBar()->hide();
    330.   horizontalScrollBar()->hide();
    331. }
    332.  
    333. MyQScrollArea::~MyQScrollArea()
    334. {
    335. }
    336.  
    337. void MyQScrollArea::enterEvent(QEvent *event)
    338. {
    339.   verticalScrollBar()->show();
    340.   horizontalScrollBar()->show();
    341.   QAbstractScrollArea::enterEvent(event);
    342. }
    343. void MyQScrollArea::leaveEvent(QEvent *event)
    344. {
    345.   verticalScrollBar()->hide();
    346.   horizontalScrollBar()->hide();
    347.   QAbstractScrollArea::leaveEvent(event);
    348. }

    实例

    1.     QString _scrollStyle =
    2.             //水平样式--宽度设置为0：为了隐藏
    3.             "QScrollArea{border:none;background-color:transparent;}"
    4.             "QScrollArea QScrollBar:horizontal{width:0px;background:transparent;margin:0px,1px,0px,1px;padding-top:0px;padding-bottom:0px;border-radius:2px;}"
    5.             "QScrollArea QScrollBar::handle:horizontal{background:#00ffff;border-radius:2px;}"
    6.             "QScrollArea QScrollBar::handle:horizontal:hover{background:#47d5d5;border-radius:2px;}"
    7.             "QScrollArea QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal{background:transparent;border-radius:2px;}"
    8.             "QScrollArea QScrollBar::add-line:horizontal,QScrollBar::sub-line:horizontal{height:0px;width:0px;}"
    9.  
    10.             //垂直样式
    11.             "QScrollArea QScrollBar:vertical{width:8px;background:transparent;margin:0px,1px,0px,1px;padding-top:0px;padding-bottom:0px;border-radius:2px;}"
    12.             "QScrollArea QScrollBar::handle:vertical{width:8px;background:rgb(230,230,230);border-radius:4px;}"
    13.             "QScrollArea QScrollBar::handle:vertical:hover{background:rgba(69, 178, 255,90%);border-radius:4px;}"
    14.             "QScrollArea QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{background:transparent;border-radius:2px;}"
    15.             "QScrollArea QScrollBar::add-line:vertical,QScrollBar::sub-line:vertical{height:0px;width:0px;}";
    16.  
    17.     videoToolArea->setStyleSheet(_scrollStyle);

    鼠标离开时：

    鼠标在上面时：

     

  • 相关阅读:
    SPL工业智能：发现时序数据的异常
    国内MES系统应用研究报告 | MES系统如何选型？
    4--OpenCV:图像像素的读写＆像素运算
    【数据库07】后端开发必备的大数据知识指南
    小样本分割：构建数据集Pascal-5i
    备战数学建模32-相关性分析2
    Keepalived+Nginx高可用集群
    ubuntu 命令行 上的一些常见的快捷键和命令
    Linux学习-59-备份还原数据命令(dump、restore、dd命令)
    北理工嵩天Python语言程序设计笔记（5 程序的控制结构）
  • 原文地址：https://blog.csdn.net/hulinhulin/article/details/133574578