qml 左右伸展与缩放动画

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12

Window {

    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: root
        width: 100; height: 300;
        color: "green"

        Rectangle{
            id: hideButton
            anchors { top: parent.top; bottom: parent.bottom; left: parent.left; }
            width: 10;  border.width: 0;
            color: "lightblue"
            Text {
                id: hideButtonLabel
                anchors.centerIn: parent;
                text: "<"
            }

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

        ListModel {
            id: featureButtonsModel
            ListElement { name: "图片"}
            ListElement { name: "视频"}
            ListElement { name: "音乐"}
        }

        Component {
            id:featureButtonsDelegate
            Rectangle {
                id: wrapper;
                width: wrapper.ListView.view.width;
                //height: Math.max(wrapper.ListView.view.height/wrapper.ListView.view.model.count,40);
                height: 50;
                color: "lightblue";
                border.width: 0;
                Text {
                    anchors.centerIn: parent;
                    text: model.name;
                }
            }
        }

        ListView {
            id: featureButtons
            spacing: 2;
            anchors { top:parent.top; /*right:parent.right;*/ bottom:parent.bottom; left:hideButton.right; }
            width: root.width - hideButton.width; height: 150
            clip: true
            model: featureButtonsModel
            delegate: featureButtonsDelegate
        }

        states: [
            State {
                name: "minSize"
                PropertyChanges { target: hideButtonLabel;  text: ">"; }
                PropertyChanges { target: root; width: 10; }
                PropertyChanges { target: testRect; width: 10; }
            }
        ]

        transitions: [
            Transition {
                NumberAnimation { target: root; property: "width"; duration: 200; easing.type: Easing.InOutQuad }
                NumberAnimation { target: testRect; property: "width"; duration: 200; easing.type: Easing.InOutQuad }
            }
        ]

        Rectangle {
            id: testRect
            width: 50; height: 50;
            color: "red"
            anchors{right: parent.right; bottom: parent.bottom}
            Text {
                id: name
                text: qsTr("texsfdsfsfadsfaft")
                anchors.fill: parent
            }
        }
    }
    //https://blog.csdn.net/yuxiaohen/article/details/8945498




    //网格布局
    Column{
    //Row {
    //Flow {
    //GridLayout {
    //Grid {
        id: gridLayout
        width: 100; height: 150;
        //Layout.fillHeight: true
        //Layout.fillWidth: true
        //flow: GridLayout.TopToBottom
        spacing:0
        anchors{top: parent.top; right: parent.right}
        //rows: 3; columns: 2;
        Rectangle {
            color: "red"; width: 50; height: 50
            Text { text: qsTr("red"); anchors.fill: parent}
        }
        Rectangle {
            color: "green"; width: 50; height: 50
            Text { text: qsTr("green"); anchors.fill: parent}
        }
        Rectangle {
            color: "blue"; width: 50; height: 50
            Text { text: qsTr("blue"); anchors.fill: parent}
        }
        Rectangle {
            color: "cyan"; width: 50; height: 50
            Text { text: qsTr("cyan"); anchors.fill: parent}
        }
        Rectangle {
            color: "magenta"; width: 50; height: 50
            Text { text: qsTr("magenta"); anchors.fill: parent}
        }
        Rectangle {
            color: "yellow"; width: 50; height: 50
            Text { text: qsTr("yellow"); anchors.fill: parent}
        }
    }

    NumberAnimation {
        id: gridLayoutLeftToRight
        target: gridLayout; property: "width";
        from: 100; to: 10
        duration: 300; easing.type: Easing.InOutQuad
    }
    NumberAnimation {
        id: gridLayoutRightToLeft
        target: gridLayout; property: "width";
        from: 10; to: 100
        duration: 300; easing.type: Easing.InOutQuad
    }

    //左到右
    Rectangle {
        id: leftToRightButton
        width: 50; height: 50;
        color: "red"
        anchors{right: parent.right; rightMargin: 150; bottom: parent.bottom}
        Text { color: "white"; text: qsTr("左到右"); anchors.centerIn: parent}
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log("gridLayoutLeftToRight Clicked==============");
                gridLayoutLeftToRight.start()
            }
        }
    }

    //右到左
    Rectangle {
        id: rightToLeftButton
        width: 50; height: 50;
        color: "green"
        //color: Qt.rgba(0.1, 0.1, 0.1, 0.3)
        anchors{right: parent.right; rightMargin: 100; bottom: parent.bottom}
        Text { color: "white"; text: qsTr("右到左"); anchors.centerIn: parent}
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log("gridLayoutRightToLeft Clicked==============");
                gridLayoutRightToLeft.start()
            }
        }
    }
    //向上
    NumberAnimation {
        id: gridLayoutUp
        target: gridLayout; property: "height";
        from: 150; to: 10
        duration: 500; easing.type: Easing.InOutQuad
    }
    //向下
    NumberAnimation {
        id: gridLayoutDown
        target: gridLayout; property: "height";
        from: 10; to: 150
        duration: 500; easing.type: Easing.InOutQuad
    }

    //向上按钮
    Rectangle {
        id: pullUpButton
        width: 50; height: 50;
        color: "red"
        anchors{right: parent.right; rightMargin: 50; bottom: parent.bottom}
        Text { color: "white"; text: qsTr("向上"); anchors.centerIn: parent}
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log("gridLayoutUp Clicked==============");
                gridLayoutUp.start()
            }
        }
    }

    //向下按钮
    Rectangle {
        id: pullDownButton
        width: 50; height: 50;
        color: "green"
        anchors{right: parent.right; bottom: parent.bottom}
        Text { color: "white"; text: qsTr("向下"); anchors.centerIn: parent}
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log("gridLayoutDown Clicked==============");
                gridLayoutDown.start()
            }
        }
    }

}