将两个 QML 复选框“绑定”在一起，确保它们的状态始终相同

Question

我想在 GUI 的不同页面上创建两个复选框，以便它们在语义上是“相同”的复选框——相同的标签，相同的效果。 （将它们放在两个页面上只是为了方便用户。）

这需要将两个CheckBox QML 元素“绑定”在一起，这样一个元素的状态总是被另一个元素反映，反之亦然。

这是equivalent to what's being asked here，但我使用的是 QML/JS 而不是 JS/JQuery。

我认为将每个复选框的 checked 状态绑定到某个全局持久属性的简单实现会起作用：

// Global shared state object
pragma Singleton
MySharedState {
    my_feature_on: false
}

然后，在两个单独的页面上，完全相同的CheckBox 实例化：

// Checkbox implementation (on both pages
CheckBox {
    checked: MySharedState.my_feature_on
    onClicked: MySharedState.my_feature_on = checked
}

但是，这不起作用，因为当单击复选框时，它会破坏初始的 checked 绑定。这是intended behavior, not a bug。

那么如何确保两个复选框始终共享相同的“选中”状态？

编辑：根据下面的评论，上述实现将在 Qt Quick Controls 2（随 Qt 5.7 一起发布）中无需修改即可工作，因此此问题仅适用于 Qt 的早期版本（包括5.6，这是一个“长期支持”版本）。

Answer 1

当一个复选框被点击时，它的checked 属性被改变并且原来的checked: MySharedState.my_feature_on 绑定被移除。 您需要 create a property binding from Javascript 以恢复原始绑定，如 J-P Nurmi 在您链接的错误报告中所解释的那样。

为此，您必须使用Qt.binding()。

CheckBox {
    checked: MySharedState.my_feature_on
    onClicked: { // the checked binding is removed since checked has been changed externally to the binding
        MySharedState.my_feature_on = checked
        checked = Qt.binding(function() {return MySharedState.my_feature_on}); //we restore the checked binding
    }
}

Answer 2

使用Binding 类型的双向绑定有效：

import QtQuick 2.5
import QtQuick.Controls 1.0

ApplicationWindow {
    objectName: "window"
    width: 600
    height: 200
    visible: true

    Row {
        CheckBox {
            id: checkBox1
            text: "Check Box 1"
        }

        CheckBox {
            id: checkBox2
            text: "Check Box 2"
        }
    }

    Binding {
        target: checkBox2
        property: "checked"
        value: checkBox1.checked
    }

    Binding {
        target: checkBox1
        property: "checked"
        value: checkBox2.checked
    }
}

虽然我不确定它为什么不抱怨绑定循环。