QT用户交互（1——基本）

一.鼠标点击, 移动, 拖拽

1） Press and Realse

import QtQuick 2.4import QtQuick.Controls 1.3import QtQuick.Window 2.2import QtQuick.Dialogs 1.2ApplicationWindow {    title: qsTr("Press and Release")    width: 640    height: 480    visible: true   Rectangle{       width:100;height:100;color:"grey";x:200;y:200       Text{           anchors.verticalCenter: parent.verticalCenter           anchors.horizontalCenter: parent.horizontalCenter           text:"press me"          // font.pixelSize: 40       }       MouseArea{           anchors.fill:parent           onPressed: parent.color="blue"           onReleased: parent.color="red"       }   }}

2）left and right button

import QtQuick 2.4import QtQuick.Controls 1.3import QtQuick.Window 2.2import QtQuick.Dialogs 1.2ApplicationWindow {    title: qsTr("left and right button")    width: 640    height: 480    visible: true   Rectangle{       width:100;height:100;color:"grey";x:200;y:200       Text{           anchors.verticalCenter: parent.verticalCenter           anchors.horizontalCenter: parent.horizontalCenter           text:"press me"          // font.pixelSize: 40       }       MouseArea{           anchors.fill:parent           acceptedButtons: Qt.LeftButton | Qt.RightButton           onClicked: {                if(mouse.button==Qt.LeftButton)                     parent.color="blue"                 else                  parent.color= "red"             }       }   }}

3）drag

import QtQuick 2.4import QtQuick.Controls 1.3import QtQuick.Window 2.2import QtQuick.Dialogs 1.2ApplicationWindow {    title: qsTr("drag")    id:window    width: 640    height: 480    visible: true   Rectangle{       id:rect       width:50;height:50;color:"grey"       /*透明度随着拖动位置而变化*/       opacity: (window.width-rect.x)/window.width       MouseArea{           anchors.fill: parent           /*移动目标*/           drag.target: parent           /*横向移动*/           drag.axis: Drag.XAxis           /*移动的最大最小距离*/           drag.maximumX: window.width-parent.width           drag.minimumX: 0       }   }}

4）鼠标悬停

import QtQuick 2.4import QtQuick.Controls 1.3import QtQuick.Window 2.2import QtQuick.Dialogs 1.2ApplicationWindow {    title: qsTr("鼠标悬停")    id:window    width: 640    height: 480    visible: true   Rectangle{       id:rect       width:50;height:50;       /*containsMouse:bool 这个属性为鼠标是否在mouse area区域之中*/       color:mouse_area.containsMouse? "green":"red"       MouseArea{           id:mouse_area           anchors.fill: parent           /* Hover enables handling of all mouse events even when no mouse button is pressed*/          /*这个属性影响containMouse,onEntered 和onExited，onPosition属性*/           hoverEnabled: true       }   }}

5）焦点转移

import QtQuick 2.4import QtQuick.Controls 1.3import QtQuick.Window 2.2import QtQuick.Dialogs 1.2ApplicationWindow {    title: qsTr("鼠标悬停")    id:window    width: 640    height: 480    visible: true   Rectangle{       id:rect       width:200;height:200;color:"lightblue"       /*接收单行文本输入*/       TextInput{           id:input1           anchors.left:parent.left           y:18           anchors.right: parent.right           text:"Field 1";font.pixelSize: 32           /*焦点是否在本行*/           color:focus? "black":"gray"           /*默认焦点在本行*/           focus:true           /*按Tab切换到下一行*/           KeyNavigation.tab: input2       }      TextInput{          id:input2          anchors.left:parent.left;          /*开始位置*/          y:64          anchors.right: parent.right          text:"Field 2";font.pixelSize: 32          color:focus? "black":"gray"          KeyNavigation.tab: input3      }      TextInput{          id:input3          anchors.left:parent.left;y:90          anchors.right: parent.right          text:"Field 3";font.pixelSize: 32          color:focus? "black":"gray"          KeyNavigation.tab: input1      }   }}**其中KeyNavigation用来提供一种渐变操作，指定哪一个Item应该获得focus使用方向键和TAB键property：down left up right tab backtab** 

运行结果：

按下tab键

6）key处理键盘输入

import QtQuick 2.4import QtQuick.Controls 1.3import QtQuick.Window 2.2import QtQuick.Dialogs 1.2ApplicationWindow {    title: qsTr("鼠标悬停")    id:window    width: 640    height: 480    visible: true   Rectangle{       id:rect       width:200;height:200;color:"lightblue"       focus:true       Text{id: text1;text:"nothing"           anchors.verticalCenter: parent.verticalCenter           anchors.horizontalCenter: parent.horizontalCenter           font.pixelSize: 40}     Keys.onPressed: {         if(event.key==Qt.Key_Left)         {             rect.color="red"             text1.text="left"         }         else if(event.key==Qt.Key_Right)            {             rect.color="grey"             text1.text="right"         }         event.accepted=true;     }   }}

按下left键

按下right键