import
QtQuick
2.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不会跟着收缩
矩形里的