MouseArea 在禁用的 Slider 中不起作用

Question

我有下面的代码，其中在Slider内包含一个MouseArea。当 Slider 为

enabled: false

时，MouseArea 不再起作用。
你有解决办法吗？

RowLayout {
    id: rowLayoutSlider
    anchors.fill: parent
    spacing: 20

    Text {
        id: sliderValueLabel
        Layout.preferredWidth: parent.width * 0.5
        Layout.alignment: Qt.AlignRight
    }

    Slider {
        id: sliderElement
        Layout.preferredWidth: parent.width * 0.5
        Layout.alignment: Qt.AlignRight
        stepSize: 0.001
        from: 1
        to: 500
        value: 100
        enabled: valide // variable
        
        MouseArea {
            id: conditionalMouseArea
            anchors.fill: parent
            onClicked: {
                console.log("click here");
            }
        }
    }
}

我尝试将 MouseArea 放在外面，但它给了我错误：

MouseArea：在由布局管理的项目上检测到的锚点。这是未定义的行为；使用 Layout.alignment 代替。

发生此错误是因为 MouseArea 位于 RowLayout 内。

Answer 1

将滑块和鼠标区域堆叠在父“Item”中。这也是 Stephen Quan 的建议。

RowLayout {
    id: rowLayoutSlider
    anchors.fill: parent
    spacing: 20

    Text {
        id: sliderValueLabel
        Layout.alignment: Qt.AlignRight
    }

    // use an parent item to stack the slider and the mouse area
    Item {
        id: parentItem

        Layout.fillWidth: true
        Layout.fillHeight: true

        Layout.alignment: Qt.AlignRight

        Slider {
            id: sliderElement

            anchors.fill: parentItem

            stepSize: 0.001
            from: 1
            to: 500
            value: 100

            enabled: false // variable
        }

        MouseArea {
            id: conditionalMouseArea

            anchors.fill: parentItem

            // only enable the mouse area if the slider is disabled
            enabled: !sliderElement.enabled

            onClicked: (mouse) => {
                           console.log("click here");
                       }
        }
    }


}