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()
}
}
}
}