QML所有的元素三

主要是用来判断鼠标事件的区域

Rectangle{

x: 0; y: 0;

width: 100; height:100;

Rectangle{

id: mousrect

x: 20; y: 20;

width: 20; height: 20;

color: “blue”

MouseArea{

// 使用父的区域作为鼠标判断的区域及 x: 20; y: 20; width: 20; height: 20;

anchors.fill: parent;

// 但鼠标按下后 mousrect变成红色，当鼠标松开后变成蓝色

onPRessed: { mousrect.color =”red”;}

onReleased: { mousrect.color =”blue”;}

}

}

}

不是很清楚说的什么，好像是说同一个时刻只有一个item有焦点

显示一个200x200的框，框中显示图片上200x200的部分

Flickable {

width: 200; height: 200

// 设置使用图片的宽高，而现实的是 200x200的现实框

contentWidth: image.width; contentHeight:image.height

Image { id: image; source:”../Images/need.png” }

}

包含两个面，一个前面，一个后面，实现一个控件前后的翻转效果，并且在后面可以添加一些控制

Flipable {

id: flipable

width: 240

height: 240

property int angle: 0

property bool flipped: false

front: Image {source: “front.png” } // 前面

back: Image { source: “back.png”} // 后面

// 旋转动画前后面交换

transform: Rotation {

origin.x: flipable.width/2; origin.y:flipable.height/2

axis.x: 0; axis.y: 1; axis.z: 0 // rotatearound y-axis

angle: flipable.angle

}

states: State {

name: “back”

PropertyChanges { target: flipable; angle:180 }

when: flipable.flipped

}

transitions: Transition {

NumberAnimation { properties:”angle”; duration: 1000 }

}

MouseArea {

anchors.fill: parent

onClicked: flipable.flipped =!flipable.flipped

}

}

// 当鼠标按下后改变 myRect 的颜色

Rectangle {

id: myRect

width: 100; height: 100

color: “black”

MouseArea {

id: mouseArea

anchors.fill: parent

onClicked: myRect.state == ‘clicked’ ?myRect.state = “” : myRect.state = ‘clicked’;

}

// 设置状态

states: [

State {

name: “clicked”

PropertyChanges { target: myRect; color:”red” }

}

]

}