import QtQuick 2.0
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
ApplicationWindow
{
id: window
visible: true
title: qsTr("Hello World")
width: 480
height: 480
color: "#339546"
property variant colorArray: ["#00bde3","#67c111","#ea7025","#ef0748","#1894af"]
Column
{
id: flow
spacing: 2
anchors.fill: parent
Grid
{
anchors.margins: 8
spacing:2
Repeater
{
model: 12
Rectangle
{
id: flag
width: 120
height: 0
property int colorIndex: Math.floor(Math.random()*5)
color: window.colorArray[colorIndex]
border.color: Qt.lighter(color)
Text
{
anchors.centerIn: parent
color: "#f0f0f0"
font.pixelSize: 18
text: qsTr("WPS表單")
}
MouseArea
{
anchors.fill: parent
onClicked:
{
animateColor.start()
animateOpacity.start()
}
}
PropertyAnimation
{
id: animateColor;
target: flag;
properties: "color";
to: "green";
duration: 100
}
NumberAnimation
{
id: animateOpacity
target: flag
properties: "opacity"
from: 0.99
to: 1.0
loops: Animation.Infinite
easing {type: Easing.OutBack; overshoot: 500}
}
PropertyAnimation on height{to: 24 ;duration:600; loops:Animation.Infinite }
}
}
}
Rectangle
{
id: desc
width: 486
height: 0
property int colorIndex: Math.floor(Math.random()*5)
color: window.colorArray[colorIndex]
border.color: Qt.lighter(color)
Text
{
anchors.centerIn: parent
color: "#f0f0f0"
font.pixelSize: 18
text: qsTr("描述信息")
}
PropertyAnimation on height{to: 32 ;duration:600; loops:Animation.Infinite }
}
Rectangle
{
id: detail
width: 486
height: 0
property int colorIndex: Math.floor(Math.random()*5)
color: window.colorArray[colorIndex]
border.color: Qt.lighter(color)
Text
{
id: text
anchors.centerIn: parent
color: "#f0f0f0"
font.pixelSize: 18
text: qsTr("點(diǎn)擊展開")
}
MouseArea
{
anchors.fill: parent
onReleased:
{
text.text = row.visible == true ? qsTr("點(diǎn)擊展開") : qsTr("點(diǎn)擊折疊")
row.visible = row.visible == true ? false : true
}
}
PropertyAnimation on height{to: 32 ;duration:600; loops:Animation.Infinite }
}
Row
{
id: row
visible: false
spacing: 2
Rectangle
{
id: d1
width: 120
height: 32
property int colorIndex: Math.floor(Math.random()*5)
color: window.colorArray[colorIndex]
border.color: Qt.lighter(color)
Text
{
anchors.centerIn: parent
color: "#f0f0f0"
font.pixelSize: 18
text: qsTr("WPS表單")
}
}
Rectangle
{
id: d2
width: 120
height: 32
property int colorIndex: Math.floor(Math.random()*5)
color: window.colorArray[colorIndex]
border.color: Qt.lighter(color)
Text
{
anchors.centerIn: parent
color: "#f0f0f0"
font.pixelSize: 18
text: qsTr("WPS表單")
}
}
Rectangle
{
id: d3
width: 120
height: 32
property int colorIndex: Math.floor(Math.random()*5)
color: window.colorArray[colorIndex]
border.color: Qt.lighter(color)
Text
{
anchors.centerIn: parent
color: "#f0f0f0"
font.pixelSize: 18
text: qsTr("WPS表單")
}
}
}
}
}