造型后如何使滚动条手柄可点击?

时间:2018-08-21 18:12:35

标签: python python-3.x qtstylesheets pyside2

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

我遇到了一个问题,即在滚动条上设置样式以删除箭头按钮会调整手柄的大小(如您所愿),并允许其在箭头按钮原来所在的区域上移动。但是,如果鼠标位于这些区域中,则无法单击滚动条。

enter image description here

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

这是我的样式表:

* {
    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样式表还很陌生,所以我想知道我是否缺少什么。我设法找到的大多数答案只是说去做我在最后三种风格中已经做过的事情。有谁知道这个问题可能是什么?

1 个答案:

答案 0 :(得分:0)

放置约一个星期后,我终于不得不坐下来解决此问题。

对于同样有问题的人,他们也为这个问题的答案{之以鼻: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;
}

解决方案非常简单:箭头按钮似乎没有与滚动条的其余部分共享样式(因为滚动条被分成了子样式)。这意味着将箭头按钮的widthheight属性设置为0px即可完成操作,因此您可以单击手柄。

注意:为了达到良好的效果,我还将add-linesub-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;
}