Question

我试图在不使用QML中的t1_result +----+------+---------------------+ | user_id | question_id| option_id| +----------+------------+----------+ | 11 | 41 | 213 | +----------+-----------+----------+ | 11 | 42 | 222 | +----------+-----------+----------+ | 11 | 43 | 295 | +----------+-----------+----------+ | 11 | 44 | 265 | +----------+-----------+----------+ | 11 | 45 | 145 | +----------+-----------+----------+ t2_answers +----+------+---------------------+ | question_id | correct_answer_id| +----+---------+------------------+ | 41 | 11 | +----+---------+------------------+ | 42 | 14 | +----+---------+------------------+ | 43 | 15 | +----+---------+------------------+ | 44 | 265 | +----+---------+------------------+ | 45 | 145 | +----+---------+------------------+组件的情况下制作滚动条。因此，我已经制作了此组件并附加到ScrollBar。但是它不会轻拂列表视图项。

我想要这个矩形在滚动时滚动ListView或ListView的内容。

我做了什么？

首先创建一个矩形，然后再创建另一个矩形作为ist的子代。并在Y轴上应用了拖动技术，并设置了y轴的坐标。

我的代码如下：

GridView

Answer 1

您可以尝试一下（从QML Material Project复制）。

创建一个名为 ScrollbarCustom.qml 的新QML文件：

Item {
    id: root

    property Flickable flickableItem
    property int orientation: Qt.Vertical
    property int thickness: 5
    property bool moving: flickableItem.moving

    property alias currentY: scrollBar.y

    width: thickness
    height: thickness
    clip: true
    smooth: true
    visible: orientation === Qt.Vertical ? flickableItem.contentHeight > flickableItem.height
                                         : flickableItem.contentWidth > flickableItem.width

    anchors {
        top: orientation === Qt.Vertical ? flickableItem.top : undefined
        bottom: flickableItem.bottom
        left: orientation === Qt.Horizontal ? flickableItem.left : undefined
        right: flickableItem.right
        margins: 2
    }

    signal stopAnimation

    onStopAnimation: {
        hideAnimation.stop();
        showAnimation.start();
    }

    signal startAnimation

    onStartAnimation: {
        hideAnimation.start();
        showAnimation.stop();
    }

    Component.onCompleted: hideAnimation.start()

    onMovingChanged: {
        if (moving) {
            hideAnimation.stop()
            showAnimation.start()
        } else {
            hideAnimation.start()
            showAnimation.stop()
        }
    }

    NumberAnimation {
        id: showAnimation
        target: scrollBar;
        property: "opacity";
        to: 0.3;
        duration: 200;
        easing.type: Easing.InOutQuad
    }

    SequentialAnimation {
        id: hideAnimation

        NumberAnimation { duration: 500 }
        NumberAnimation {
            target: scrollBar;
            property: "opacity";
            to: 0;
            duration: 500;
            easing.type: Easing.InOutQuad
        }
    }

    onOrientationChanged: {
        if (orientation == Qt.Vertical) {
            width = thickness
        } else {
            height = thickness
        }
    }

    Rectangle {
        id: scrollBar
        property int length: orientation == Qt.Vertical ? root.height
                                                        : root.width;
        property int targetLength: orientation == Qt.Vertical ? flickableItem.height
                                                              : flickableItem.width;
        property int contentStart: orientation == Qt.Vertical ? flickableItem.contentY
                                                              : flickableItem.contentX;
        property int contentLength: orientation == Qt.Vertical ? flickableItem.contentHeight
                                                               : flickableItem.contentWidth;
        property int start: Math.max(0, length * contentStart/contentLength);
        property int end: Math.min(length,
                                   length * (contentStart + targetLength)/contentLength)

        color: Theme.accentColor //"black"//theme.foreground
        opacity: 0.2
        radius: thickness/2
        width: Math.max(orientation == Qt.Horizontal ? end - start : 0, thickness)
        height: Math.max(orientation == Qt.Vertical ? end - start : 0, thickness)
        x: orientation == Qt.Horizontal ? start : 0
        y: orientation == Qt.Vertical ? start : 0
    }
}

并像这样使用它：

       Flickable {
            id: flickable

            clip: true

            anchors {
                top: parent.top
                left: parent.left
                right: parent.right
                bottom: parent.bottom
            }
      }

      ScrollbarCustom {
          flickableItem: flickable
      }

Answer 2

一种解决方案是利用Qt Quick Templates 2。这个Qt模块是Qt自己的控件Qt Quick Controls 2的基础，并且包含多个可以完全自定义的基本UI组件。

在您的情况下，您应该查看ScrollBar和how to customize it。

您的代码最终可能是这样的：

Flickable {
    id: flickable
    clip: true
    // ...
    ScrollBar.vertical: ScrollBar {
        id: control
        size: 0.3
        position: 0.2
        active: true
        orientation: Qt.Vertical

        contentItem: Rectangle {
            implicitWidth: 6
            implicitHeight: 100
            radius: width / 2
            color: control.pressed ? "#81e889" : "#c2f4c6"
        }
    }
}

如何使矩形像qml中的滚动条一样

2 个答案: