qml Rectangle中clip属性效果

import QtQuick2.2

Rectangle {

    id: root

    width: 800;

    height: 600

    Rectangle {

        id: side

        anchors {

            top: parent.top

            left: parent.left

        }

        width: 80

        height: 80

        color: "lightblue"

        Text {

            id: test

            anchors.centerIn: parent

            text: "测试"

        }

        MouseArea {

            anchors.fill: parent

            onClicked: {

                if (root.state == '')

                    root.state = "minSize"

                else

                    root.state = ''

            }

        }

    }

    Rectangle {

        id: menu

        width: 400

        height: 100

        color: "red"

        anchors.left: side.right

        anchors.top: parent.top

        //没有这个属性com1,com2不会跟着收缩

        clip: true

        Rectangle {

            id: com1

            width: 30

            height: 50

            color: "green"

            anchors.left: parent.left

            anchors.top: parent.top

        }

        Rectangle {

            id: com2

            width: 30

            height: 50

            color: "gray"

            anchors.left: parent.left

            anchors.top: parent.top

            anchors.leftMargin: 30

        }

    }

    states:[

        State {

            name: "minSize"

            PropertyChanges {

                target: menu

                height: 10

            }

        }

    ]

    transitions: [

       Transition {

            NumberAnimation {

                target: menu

                property: "height";

                duration: 200;

                easing.type: Easing.InOutQuad;

            }

        }

    ]

}

运行效果

点击测试按钮

注释 clip:true

点击测试按钮

menu矩形里的com1,com2不会跟着收缩矩形里的