QT中QML实现状态机过渡控件

 控件定义ItemPanel.qml

import QtQuick 2.6

/*
 * 作者: yubo
 * 功能: Item(显示/隐藏)增加状态机过渡
 * 描述: 显示或隐藏状态可执行过渡动画，包括控件属性线性变化
 * 日期: 2019-03-14
 */

Item {
    id: rootPanel
    property var showAnimation: SequentialAnimation {}
    property var hideAnimation: SequentialAnimation {}

    //state: "hidde"
    states: [
        State {
            name: "show"
            when: rootPanel.visible
        },
        State {
            name: "hide";
            when: !rootPanel.visible
        }
    ]
    transitions: [
        Transition {
            from: "hide"
            to: "show"
            animations: showAnimation
        },
        Transition {
            from: "show"
            to: "hide"
            animations: hideAnimation
        }
    ]
}

 控件使用Test.qml (注意ItemPanel.qml路径)

import "qrc:/Qml/Component"   // ItemPanel.qml 保证引入引入路径正确

import QtQuick 2.6

ItemPanel {
    id: menuPanelRoot
    showAnimation: SequentialAnimation {
        // show状态具体执行动画内容
    }
    hideAnimation: SequentialAnimation {
        // hide状态具体执行动画内容
    }
}