QML 属性为空

Question

我正在尝试在可重用的 QML 组件中定义具有默认值的属性。到目前为止，这是我的代码：

property alias value: progressBar.value
property bool error: false
property ProgressBarStyle errorStyle: ProgressBarStyle {
    background: Rectangle {
        radius: 2
        color: "lightgray"
        border.color: "gray"
        border.width: 1
        implicitWidth: 200
        implicitHeight: 24
    }
    progress: Rectangle {
        color: "orangered"
        border.color: "red"
    }
}

Layout.fillWidth: true

ProgressBar {
    id: progressBar
    Layout.fillWidth: true
    minimumValue: 0.0
    maximumValue: 100.0
    style: errorStyle
}

所以这个想法是errorStyle被构造并设置为progressBar的style。我知道errorStyle 可以工作，因为如果我直接在progressBar 上设置它就可以工作。据我所知，当我运行我的程序时，问题是errorStyle 是null。

更新：

也许更好的方式来说明这个问题是：“我如何绕过'PropertyChanges 不支持创建特定于状态的对象。'如果我直接在 PropertyChanges 数组中创建样式会收到错误消息？

更新 2：

我已经基本上放弃了这种方法，并决定尝试使用样式来代替。这导致了另一个问题：Cannot create certain QML types in a singleton

Answer 1

您可以尝试使用 id 声明它，并使用 id。因此，不要将其声明为属性，而应将其声明为组件。像这样：

ProgressBarStyle {
    id: errorStyle
    background: Rectangle {
        radius: 2
        color: "lightgray"
        border.color: "gray"
        border.width: 1
        implicitWidth: 200
        implicitHeight: 24
    }
    progress: Rectangle {
        color: "orangered"
        border.color: "red"
    }
}

ProgressBar {
    id: progressBar
    Layout.fillWidth: true
    minimumValue: 0.0
    maximumValue: 100.0
    style: errorStyle
}

但我会采取的方法是制作属性颜色和边框颜色并更改样式的矩形颜色，而不是完全更改样式。

像这样：

property Color barColor
property Color barBorderColor
property Color progressColor
property Color progressBorderColor

ProgressBar {
    id: progressBar
    Layout.fillWidth: true
    minimumValue: 0.0
    maximumValue: 100.0
    style: ProgressBarStyle {
        background: Rectangle {
            radius: 2
            color: barColor
            border.color: barBorderColor
            border.width: 1
            implicitWidth: 200
            implicitHeight: 24
        }
        progress: Rectangle {
            color: progressColor
            border.color: progressBorderColor
        }
    }
}