QML之Basic Interaction Items

今天下班挤公交，司机看到都已经开挤不进人了，到站时让站在门口的人向站台上的人招手以示上不了人了不开车门。车门口的一哥们儿可能正在那拿着手机看笑话，笑得嘴都和不拢了，还一边向车门外即将绝望的人招手，真是难为这哥们儿了，这时本来还算平静的等在车外的人报以拳打脚踢车门，唉。

 

Basic interaction item也就是基本的交互组件。

 

1、MouseArea

      此组件处理简单的鼠标事件。

     import Qt 4.7 Rectangle { id: container width: 600; height:200 Text { x:200 y:100 text: mouseArea.pressedButtons & Qt.RightButton ? "right" : "left" } Rectangle { id: rect width: 50 height: 50 color: "yellow" opacity: (6000.0 - rect.x)/600 MouseArea { id: mouseArea anchors.fill: parent drag.target: rect drag.axis: Drag.XandYAxis drag.minimumX: 0 drag.maximumX: container.width - rect.width drag.minimumY: 0 drag.maximumY: container.height - rect.height drag.filterChildren: true acceptedButtons: Qt.LeftButton | Qt.RightButton onClicked: { if (mouse.button == Qt.RightButton)//鼠标右键 parent.color = "blue"; else parent.color = "red" } } } }

 

    属性:acceptedButtons: Qt:MouseButtons,有三个值：Qt.LeftButton,Qt.RightButton,Qt.MiddleButton

         默认是Qt.LeftButton,即默认只接受左键。

   drag指拖拽：drag.axis表示在哪个方向上拖拽，Drag.XandYAxis--在x，y轴都能拖拽

  drag.target 表示拖拽对象

   drag.minimumx,   drag.minimumy,   drag.maximumx,   drag.maximumy,用来限定拖拽的区域

 除此之外，还有一大堆事件：

onCanceled
onClicked
onDoubleClicked
onEntered
onExited
onPositionChanged
onPressAndHold
onPressed
onReleased

 

2、Flickable

     这个组件提供了一个能够被弹出的界面。

    继承自Item，被GridView和ListView继承

  

Flickable { width: 200;height: 200 contentWidth: image.width; contentHeight: image.height clip: true Image{ id: image source: "images/qt.png" } }

 

官方有个ScrollBar的例子:

 

main.qml

import Qt 4.7 Rectangle { width: 640 height: 480 // Create a flickable to view a large image. Flickable { id: view anchors.fill: parent contentWidth: picture.width contentHeight: picture.height Image { id: picture source: "http://www.google.com.tw/url?source=imgres&ct=img&q=http://www.yiding8.com/up_files/image/2007-2-23/67649691.jpg&sa=X&ei=zW3-TJJek6K5A53SsfYH&ved=0CAQQ8wc&usg=AFQjCNH9eL202ZM5WwyZKoUWvxmO0lPAUA" asynchronous: true } // Only show the scrollbars when the view is moving. states: State { name: "ShowBars" when: view.movingVertically || view.movingHorizontally PropertyChanges { target: verticalScrollBar; opacity: 1 } PropertyChanges { target: horizontalScrollBar; opacity: 1 } } transitions: Transition { NumberAnimation { properties: "opacity"; duration: 400 } } } // Attach scrollbars to the right and bottom edges of the view. ScrollBar { id: verticalScrollBar width: 12; height: view.height-12 anchors.right: view.right opacity: 0 orientation: Qt.Vertical position: view.visibleArea.yPosition pageSize: view.visibleArea.heightRatio } ScrollBar { id: horizontalScrollBar width: view.width-12; height: 12 anchors.bottom: view.bottom opacity: 0 orientation: Qt.Horizontal position: view.visibleArea.xPosition pageSize: view.visibleArea.widthRatio } }

ScrollBar.qml

import Qt 4.7 Item { id: scrollBar // The properties that define the scrollbar's state. // position and pageSize are in the range 0.0 - 1.0. They are relative to the // height of the page, i.e. a pageSize of 0.5 means that you can see 50% // of the height of the view. // orientation can be either Qt.Vertical or Qt.Horizontal property real position property real pageSize property variant orientation : Qt.Vertical // A light, semi-transparent background Rectangle { id: background anchors.fill: parent radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1) color: "white" opacity: 0.3 } // Size the bar to the required size, depending upon the orientation. Rectangle { x: orientation == Qt.Vertical ? 1 : (scrollBar.position * (scrollBar.width-2) + 1) y: orientation == Qt.Vertical ? (scrollBar.position * (scrollBar.height-2) + 1) : 1 width: orientation == Qt.Vertical ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2)) height: orientation == Qt.Vertical ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2) radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1) color: "black" opacity: 0.7 } }

 

3、Flipale

      顾名思义这个组件主要用于实现翻转效果,继承自Item，通常与Rotation和State/Transition一起实现翻转效果

      它只有三个属性值:back,front分别都是Item类型的值,side是enumeration枚举类型的值

     Flipable { id: flipable width: 240 height: 240 property int angle: 0 property bool flipped: false front: Image{source: "images/front.png"} back: Image{source: "images/back.png"} transform: Rotation { origin.x: flipable.width/2 origin.y: flipable.height/2 axis.x: 0; axis.y: 1; axis.z: 0 angle: flipable.angle } states: State { name: "back" PropertyChanges { target: flipable angle: 180 //翻转180度,类似于翻牌游戏的效果 } when: flipable.flipped } transitions: Transition { NumberAnimation {properties: "angle"; duration: 1000} } MouseArea { anchors.fill: parent; onClicked: flipable.flipped = !flipable.flipped } }

 

下面为官网提供的一个Example,有兴趣的朋友可以做个翻牌游戏，呵呵

Card.qml

import Qt 4.7 Flipable { id: container property alias image: frontImage.source property bool flipped: true property int xAxis: 0 property int yAxis: 0 property int angle: 0 width: front.width; height: front.height front: Image { id: frontImage; smooth: true } back: Image { source: "images/back.png"; smooth: true } state: "back" MouseArea { anchors.fill: parent; onClicked: container.flipped = !container.flipped } transform: Rotation { id: rotation; origin.x: container.width / 2; origin.y: container.height / 2 axis.x: container.xAxis; axis.y: container.yAxis; axis.z: 0 } states: State { name: "back"; when: container.flipped PropertyChanges { target: rotation; angle: container.angle } } transitions: Transition { ParallelAnimation { NumberAnimation { target: rotation; properties: "angle"; duration: 600 } SequentialAnimation { NumberAnimation { target: container; property: "scale"; to: 0.75; duration: 300 } NumberAnimation { target: container; property: "scale"; to: 1.0; duration: 300 } } } } }

 

flipable.qml

import Qt 4.7 Rectangle { id: window width: 480; height: 320 color: "darkgreen" Row { anchors.centerIn: parent; spacing: 30 Card { image: "images/front.png"; angle: 180; yAxis: 1 } Card { image: "images/back.png"; angle: 540; xAxis: 1 } } }

 

继续折腾着Qt mobility,结果还是没安装上，杯具继续装着水...