import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("GridView")
ListModel {
id: gridViewModel
ListElement{nameText: "red"; colorValue: "red";}
ListElement{nameText: "green"; colorValue: "green";}
ListElement{nameText: "blue"; colorValue: "blue";}
ListElement{nameText: "yellow"; colorValue: "yellow";}
ListElement{nameText: "cyan"; colorValue: "cyan";}
ListElement{nameText: "magenta"; colorValue: "magenta";}
}
GridView {
id: gridView;
width: 100; height: 150
cellWidth: 50; cellHeight: 50
anchors{top: parent.top; left: parent.left;}
model: gridViewModel
clip: true //这个属性非常重要,不设置,动画不平滑
interactive: false; //元素不可拖动
focus: true
delegate: Rectangle {
width: 50; height: 50;
color: colorValue
Text {
text: nameText; anchors.centerIn: parent
color: "white"; font.pixelSize: 12
}
}
}
NumberAnimation {
id: gridViewLeftToRight
target: gridView; property: "width";
from: 100; to: 10
duration: 300; easing.type: Easing.InOutQuad
}
NumberAnimation {
id: gridViewRightToLeft
target: gridView; 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("gridViewLeftToRight Clicked==============");
gridViewLeftToRight.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("gridViewRightToLeft Clicked==============");
gridViewRightToLeft.start()
}
}
}
//向上
NumberAnimation {
id: gridViewUp
target: gridView; property: "height";
from: 150; to: 0
duration: 500; easing.type: Easing.InOutQuad
}
//向下
NumberAnimation {
id: gridViewDown
target: gridView; property: "height";
from: 0; 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("gridViewUp Clicked==============");
gridViewUp.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("gridViewDown Clicked==============");
gridViewDown.start()
}
}
}
}