code snippet

程承恩

2023-12-01

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 = ''
}
}
}

}

code snippet

相关阅读

相关文章

相关问答