我想尝试在QT C++中自定义滚动条但无法按要求制作

Question

此图片显示了我在 qt 应用程序中想要的滚动条类型：

    QString sbStyle = QString(
        "QScrollBar:vertical {"
        "border: none;"
        "background: #111;"
        "width: 10px;"
        "}"
        "QScrollBar::handle:vertical {"
        "background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #ddd, stop:1 #111);"
        "min-height: 10px;"
        "}"
        "QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {"
        "border: none;"
        "background: #111;"
        "}");

这是我能做的最好的修改，但还没有达到要求！

Answer 1

设计滚动条（以及一般的复杂小部件）需要一定的耐心并正确研究文档和示例。

最重要的是，复杂的小部件有一个基本要求，如文档中所述：

注意： 对于 QComboBox 和 QScrollBar 等复杂的控件，如果自定义了一个属性或子控件，则所有其他属性或子控件也必须自定义。

您的尝试中最重要的问题是您没有为按钮留出空间，也没有为它们设置任何样式表。

按钮的空间是通过使用适当的边距（垂直滚动条的顶部和底部）来设置的。

可以使用图像设置箭头按钮的样式，但对于简单的三角形，可以使用智能 CSS 技巧：使用边框。

这个想法是有一个 0 大小的对象，周围有边框；因为只有边框可见，所以结果是一个由三角形组成的矩形，边框宽度实际上是每个三角形的高度（边到中心的距离）：

然后只画与箭头方向相反的边框；如果你想画一个向上的箭头，就画下边框：

为了正确放置这些箭头，必须进行一些调整（使用

top

 或 

bottom

）。

最后，如果您需要点图案背景，则必须通过图像来完成（简单的 2x2 图像就足够了）。

这是生成的样式表：

    QScrollBar:vertical {
        border: none;
        background: #111;
        width: 8px;
        margin: 6px 0 6px 0;
    }
    QScrollBar::handle:vertical {
        background: qlineargradient(
            x1:0, y1:0, x2:1, y2:0, 
            stop:0 #fff, stop:1 #111
        );
        min-height: 8px;
        border: 2px solid;
        border-left-color: #ddd;
        border-top-color: #ddd;
        border-right-color: #444;
        border-bottom-color: #222;
    }
    QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {
        border: none;
        background: #111;
        subcontrol-origin: margin;
        height: 6px;
    }
    QScrollBar::add-line:vertical {
        subcontrol-position: bottom;
    }
    QScrollBar::sub-line:vertical {
        subcontrol-position: top;
    }
    QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
        border: 4px solid #111;
        width: 0px;
        height: 0px;
    }
    QScrollBar::up-arrow:vertical {
        top: -2px;
        border-bottom-color: gray;
    }
    QScrollBar::down-arrow:vertical {
        bottom: -2px;
        border-top-color: gray;
    }
    QScrollBar::up-arrow:vertical:hover {
        border-bottom-color: lightgray;
    }
    QScrollBar::down-arrow:vertical:hover {
        border-top-color: lightgray
    }
    QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
        background: url("pattern.png");
    }
    QScrollBar::add-page:vertical {
        background-position: bottom; /* prevent background "scrolling" */
    }

这是结果：

放大查看更多细节：