0

私のアプリケーションでは、「ConfigScreen.qml」というファイルで定義された構成画面があります。これには状態と、それらの間で定義されたトランジションが含まれており、スムーズに表示および非表示になります。

Rectangle {
    id: container
    width: parent.width
    height: parent.height           
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.bottomMargin: 5      
    state: "start"
    states: [
        State {
            name: "start"
            AnchorChanges { target: container; anchors.verticalCenter: undefined }
            AnchorChanges { target: container; anchors.bottom: container.parent.top }
        },
        State {
            name: "center"
            AnchorChanges { target: container; anchors.bottom: undefined }
            AnchorChanges { target: container; anchors.verticalCenter: container.parent.verticalCenter }
        }
    ]

    transitions: Transition {
        AnchorAnimation { duration: 800; easing.type: Easing.InOutBack; easing.overshoot: 2 }
    }
}

四角形がシーンに入り、現在の状態 (親のどこかに設定されている) に応じて終了します。

ここで、上記と同じ効果を持つビュー (別のファイル) をいくつか作成したいと思いますが、内容は異なります。将来、この効果に何らかの更新が必要になった場合に備えて、それを使用するすべての画面ではなく、1 か所で変更したいと思います。

これは何らかの方法でQMLで行うことができますか?

4

1 に答える 1

1

それをアイテムとして定義し、それが操作するオブジェクトを指定するプロパティを与えることができます。一般的な概念は次のとおりです。

SlidingTransition.qml:

Item {
    property Item container;

    state: "start"
    states: [
        State {
            name: "start"
            AnchorChanges { target: container; anchors.verticalCenter: undefined }
            AnchorChanges { target: container; anchors.bottom: container.parent.top }
        },
        State {
            name: "center"
            AnchorChanges { target: container; anchors.bottom: undefined }
            AnchorChanges { target: container; anchors.verticalCenter: container.parent.verticalCenter }
        }
    ]

    transitions: Transition {
        AnchorAnimation { duration: 800; easing.type: Easing.InOutBack; easing.overshoot: 2 }
    }
}

main.qml:

Text {
    id: example
    width: parent.width
    height: parent.height
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.bottomMargin: 5
    text: "Hello out there!"

    SlidingTransition {
        id: textState
        container: example
    }
}

設定textState.state = "center"すると、それが起こるのを見るはずです。少し面倒にならないようにしたい場合は、containerプロパティを親にデフォルト設定し、SlidingTransition.state をコンテナーの状態にバインドするなどの操作を行うことができます。

于 2012-05-29T04:19:02.917 に答える