• Saving multiple properties
  • Recap on state saving
  • Saving multiple properties

    Specifying more properties

    So far we have saved one single property, but as the {StateSaver::properties} property name suggests, there can be more properties serialized at the same time. For example, to serialize both color and opacity of a Rectangle, the code would look as follows:

    Rectangle {
        id: rectangle
        color: "green"
        opacity: 0.9
        StateSaver.properties: "color, opacity"
    }

    Note that not all types of properties can be saved. Object types or list models for example are excluded from the types that can be saved, but all properties listed as QML base types can be serialized.

    Grouped properties

    Grouped properties, which have serializable types can also be saved. It simply needs to be specified together with the group identifier.

    import QtQuick 2.4
    import Ubuntu.Components 1.2
    
    Rectangle {
        id: root
        width: units.gu(40)
        height: units.gu(71)
        color: "green"
        StateSaver.properties: "color, border.color, border.width"
    
        Button {
            text: "Change"
            anchors.centerIn: parent
            onClicked: {
                root.color = Qt.rgba(Math.random(1), Math.random(1), Math.random(1), 1);
                root.border.width = units.gu(2) * Math.random(1)
                root.border.color = Qt.rgba(Math.random(1), Math.random(1), Math.random(1), 1);
    
            }
        }
    }

    Property groups

    Using the same logic, custom property groups can also be saved.

    import QtQuick 2.4
    import Ubuntu.Components 1.2
    
    Rectangle {
        id: root
        width: units.gu(40)
        height: units.gu(71)
        color: "green"
        StateSaver.properties: "border.color, border.width, innerRect.color"
    
        property Rectangle innerRect: Rectangle {
            width: units.gu(20)
            height: units.gu(40)
            parent: root
            z: 0
            anchors.centerIn: root
        }
    
        Button {
            text: "Change"
            anchors.centerIn: parent
            z: 1
            onClicked: {
                root.color = Qt.rgba(Math.random(1), Math.random(1), Math.random(1), 1);
                root.border.width = units.gu(2) * Math.random(1)
                root.border.color = Qt.rgba(Math.random(1), Math.random(1), Math.random(1), 1);
                innerRect.color = Qt.rgba(Math.random(1), Math.random(1), Math.random(1), 1);
            }
        }
    }

    Alternatively, individual properties of the property group can be saved in the following way:

    property Rectangle innerRect: Rectangle {
        id: inner
        width: units.gu(20)
        height: units.gu(40)
        parent: root
        z: 0
        anchors.centerIn: root
        StateSaver.properties: "color"
    }
  • Recap on state saving