code snippet

QML:

动态创建对象

import QtQuick 1.0

 Item {
     id: container
     width: 300; height: 300

     function loadButton() {
         var component = Qt.createComponent("Button.qml");
         if (component.status == Component.Ready) {
             var button = component.createObject(container);
             button.color = "red";
         }
     }

     Component.onCompleted: loadButton()
 }

动态删除对象(不要试图手动删除由Repeater或者Loader创建的实例)

application.qml	SelfDestroyingRect.qml
import QtQuick 1.0 Item { id: container width: 500; height: 100 Component.onCompleted: { var component = Qt.createComponent("SelfDestroyingRect.qml"); for (var i=0; i<5; i++) { var object = component.createObject(container); object.x = (object.width + 10) * i; } } }	import QtQuick 1.0 Rectangle { id: rect width: 80; height: 80 color: "red" NumberAnimation on opacity { to: 0 duration: 1000 onRunningChanged: { if (!running) { console.log("Destroying...") rect.destroy(); } } } }

从状态变换时的过渡

ImageDisplay
    {
        id: imageDisplay
        width: 0; height: parent.height;
        anchors.left: catalog.right;
        visible: false;

        states: [
            State {
                name: "display"; when: visiable===true;
                PropertyChanges {
                    target: imageDisplay
                    width: root.width - catalog.width;
                }
            }
        ]
        transitions: [
            Transition {
                SpringAnimation {
                    target: imageDisplay;
                    property: "width";
                    damping: 0.2;
                    spring: 2;
                }
            }
        ]

    }

手工切换元素状态:

Rectangle {

id: root;

states: [
        State {
            name: "minSize"
            PropertyChanges {
                target: hideButtonLabel
                text: ">"
            }
            PropertyChanges {
                target: root
                width: 10;
            }
        }
    ]
    transitions: [
        Transition {
            NumberAnimation { target: root; property: "width"; duration: 200; easing.type: Easing.InOutQuad }
        }
    ]

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                if(root.state == '') {
                    root.state = "minSize"
                } else {
                    root.state = ''
                }
            }
        }

}