如何在不破坏内部绑定的情况下从外部初始化自定义项的属性？

Question

我正在尝试为 HSL 组件制作一个带有三个滑块的颜色调整面板。它由一个可重复使用的ColorPanel 项目组成：

Item {
    id: root

    property color color: Qt.hsla(sliderH.value, sliderS.value, sliderL.value, 1.0)

    implicitWidth: 300; implicitHeight: 100

    Rectangle { anchors.fill: parent }

    Column {
        width: parent.width

        Slider { id: sliderH }
        Slider { id: sliderS }
        Slider { id: sliderL }
    }
}

我在main.qml 中使用了两次，一次用于调整Label 的背景颜色，另一次用于调整文本颜色：

ApplicationWindow {
    width: 500; height: 400
    visible: true
    title: qsTr("Color Setup")

    header: RowLayout {
        spacing: 10

        ColorPanel { id: colorText }
        ColorPanel { id: colorBackground }
    }

    Label {
        anchors.centerIn: parent
        color: colorText.color
        text: qsTr("How to initialize the colors?")
        font.pointSize: 22; padding: 11

        background: Rectangle { color: colorBackground.color }
    }
}

这个非常简短的示例生成以下 UI：

我确实可以通过用鼠标移动滑块来设置Label 的背景和前景（文本）颜色。但是，在程序启动时，Label 是黑色的，因为滑块位于0。我当然可以将它们设置为不同的值，但这无济于事，因为它仍然会导致两种颜色相同并且文本仍然不可见。所以，我需要将两个面板的color 属性初始化为不同的值。

问题是，当我写这样的东西来初始化颜色时：

ColorPanel { id: colorText; color: "red" }
ColorPanel { id: colorBackground; color: "green" }

颜色确实在启动时设置为所需的值，但新绑定打破了与Qt.hsla(sliderH.value, sliderS.value, sliderL.value, 1.0) 的内部绑定，并且无法再使用滑块设置颜色。

accepted answer 到 How to set initial value of a custom slider in qml? 建议将属性设为别名，例如property alias color:，但我应该参考什么？

如何解决？

Answer 1

您可以将initialColor 属性添加到您的ColorPanel 并将滑块连接到它，如下所示：

Item {
    id: root

    property color initialColor
    property color color: Qt.hsla(sliderH.value, sliderS.value, sliderL.value, 1.0)

    implicitWidth: 300; implicitHeight: 100

    Rectangle { anchors.fill: parent }

    Column {
        width: parent.width

        Slider { id: sliderH; value: initialColor.hslHue }
        Slider { id: sliderS; value: initialColor.hslSaturation }
        Slider { id: sliderL; value: initialColor.hslLightness }
    }
}

然后在main.qml 中而不是color 中，使用initialColor，如下所示：

ColorPanel { id: colorText; initialColor: "red" }
ColorPanel { id: colorBackground; initialColor: "green" }