qtqmlsplitview

QML read and set property within SplitHandle from SplitView


In the following example, how can I read and set the property dummy in rect1 and rect2? I am not sure how to read a property from a loaded component in this case.

import QtQuick 2.15
import QtQuick.Controls 2.15

SplitView {
    id: splitView
    anchors.fill: parent

    handle: Rectangle {
        id: handleRect
        property bool dummy: false
        implicitWidth: 4
        implicitHeight: 4
        color: SplitHandle.pressed ? "#81e889"
            : (SplitHandle.hovered ? Qt.lighter("#c2f4c6", 1.1) : "#c2f4c6")

        Rectangle: {
          visible: dummy
          ...
        }
    }

    Rectangle {
        id: rect1
        implicitWidth: 150
        color: "#444"
        Component.onCompleted: {
            handleRect.dummy = true // Does not work
        }
    }

    Rectangle {
        id: rect2
        implicitWidth: 50
        color: "#666"
    }
}

Using handleRect.dummy within either rect1 or 2 does not work due to TypeError: Cannot read property 'dummy' of undefined.


Solution

  • Continued from the comments.

    To access each handle of a SplitView separately, you can use its children property. The handles are accessed starting from the second child (splitView.children[1]), as the first child is a QQuickContentItem containing the Items (splitView.children[0].children).

    For the following QML code:

    SplitView {
        id: splitView
        anchors.fill: parent
    
        handle: Rectangle { implicitWidth: 2; color: 'black' }
    
        Item { implicitWidth: 50; color: 'green' }
        Item { implicitWidth: 50; color: 'white' }
        Item { implicitWidth: 50; color: 'red' }
    }
    

    We can use the JavaScript function below:

    function getHandleAt(index: int) {
        return splitView.children[index + 1];
    }
    

    The handles are accessed starting from the second child, as the first child is the QQuickContentItem containing the Items.