样式化后如何使滚动条句柄可点击？答案

【问题标题】：How To Make Scrollbar Handle Clickable After Styling?样式化后如何使滚动条句柄可点击？
【发布时间】：2019-01-27 23:37:26
【问题描述】：

我正在为客户端制作 GUI，并且我正在使用 Qt for Python 3.6（PySide2，而不是 PyQt）。我有一个 QTableWidget 读取一堆数据，这使得滚动条出现。我的客户想要自定义 GUI 样式，所以我一直在使用 Qt 的 setStyleSheet() 函数。

我遇到了一个问题，即在滚动条上设置样式以删除箭头按钮会调整手柄的大小（如您所料）并允许它在箭头按钮曾经所在的区域上移动。但是，如果我的鼠标在这些区域中，我将无法单击滚动条。

绿色圆圈是箭头按钮通常所在的位置，红色条是我的滚动条手柄。如果我的鼠标在绿色圆圈中，则无法单击滚动条的手柄。如果滚动条变得小于按钮大小，这将成为一个大问题，这意味着我必须使用滚轮将其移出该区域才能单击它。虽然我可以通过为句柄提供最小高度/宽度来解决这个问题，但当您无法单击滚动条的某些区域时，这也是一种非常糟糕的用户体验......

这是我的样式表：

* {
    color:white;
    }

QWidget {
    background-color:#333;
}

QGroupBox, QGroupBox QLabel {
    background-color:#4c4c4c;
}

QLineEdit {
    background-color:white;
    color:black;
}

QComboBox, QPushButton {
    background-color:maroon;
}

QToolTip {
    border:3px solid maroon;
    padding:5px;
    font-size:16px;
    background-color:#333;
}

QTableWidget {
    color:black;
    background-color:white;
    alternate-background-color:#ffd6d6;
    gridline-color:#4c4c4c;
    selection-background-color:maroon;
}

QHeaderView::section {
    padding:3px;
    text-align:center;
}

QScrollBar::handle {
    background-color:maroon;
    border-radius:6px;
    border: 2px solid #d10000;
    min-width:25px;
    min-height:25px;
}

QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal, 
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    border: none;
    background: none;
    color: none;
}

QScrollBar::add-line, QScrollBar::sub-line {
    border:none;
    background-color:none;
}

我对使用 Qt 样式表很陌生，所以我想知道我是否没有遗漏一些东西。我设法找到的大多数答案只说要做我在最后三种风格中已经做过的事情。有谁知道可能是什么问题？

【问题讨论】：

标签： python python-3.x qtstylesheets pyside2

【解决方案1】：

搁置了大约一周后，我终于不得不坐下来解决这个问题。

对于那些有同样问题的人也对这个问题的答案摸不着头脑：Hide QScrollBar arrows，我已经找到了一个非常明显的解决方法，现在我考虑了一下。

虽然下面的样式表确实隐藏箭头按钮，但它并没有删除它们。这在实践中很明显，因为通过进一步的测试，单击这些区域仍然会移动手柄，就像我在单击箭头按钮一样。

QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal, 
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    border: none;
    background: none;
    color: none;
}

QScrollBar::add-line, QScrollBar::sub-line {
    border:none;
    background-color:none;
}

解决方案非常简单：箭头按钮似乎与滚动条的其余部分不共享样式（因为滚动条被分成子样式）。这意味着像将箭头按钮的width 和height 属性设置为0px 之类的操作将使您可以点击手柄。

注意：为了更好地衡量，我还将 add-line 和 sub-line 属性设置为 0px。

QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal, 
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    border: none;
    background: none;
    color: none;
    width: 0px;
    height: 0px;
}

QScrollBar::add-line, QScrollBar::sub-line {
    border:none;
    background-color:none;
    width: 0px;
    height: 0px;
}

【讨论】：