Quick的鼠標與鍵盤事件、錨佈局

一:鼠標事件

MosuseArea的事件有

acceptedButtons

clicked

doubleClicked

pressed

released

實例:本實例,主要演示鼠標的事件處理

當鼠標有不同的操作時,文本內容會顯示出不同的提示信息

 Text  //定義一個文本對象
    {
        x:50;  //設置文本對象的位置
        y:50;
        id:txt;  //文本對象的id
        font.pointSize: 16; //設置文本的字體大小
        text:"hello!"; //設置文本顯示的內容
    }
    MouseArea //定義鼠標的處理對象
    {
        anchors.fill: parent;  //鼠標可以在整個窗口中處理
        acceptedButtons: Qt.LeftButton|Qt.RightButton;  //定義接收鼠標的左鍵和右鍵事件
        onClicked:  //單擊事件處理
        {
            if(mouse.button==Qt.LeftButton)
            {
                txt.text="hello LeftButton";  //改變文本的內容,提示信息
            }
            else if(mouse.button==Qt.RightButton)
            {
                txt.text="hello RightButton";  //改變文本的內容,提示信息
            }
        }

        onDoubleClicked:
        {
            if(mouse.button==Qt.LeftButton)
            {
                txt.text="hello LeftButton Double";  //改變文本的內容,提示信息
            }
            else if(mouse.button==Qt.RightButton)
            {
                txt.text="hello RightButton Double";  //改變文本的內容,提示信息
            }
        }

    }
二:鍵盤處理事件

按鍵屬性是附加屬性

實例:按下鍵盤上不同的方向鍵,文本會向不同的方向移動

 Text  //定義一個文本對象
    {
        x:50;  //設置文本對象的位置
        y:50;
        id:txt;  //文本對象的id
        focus:true;  //使文本獲得焦點
        font.pointSize: 16; //設置文本的字體大小
        text:"hello!"; //設置文本顯示的內容
        Keys.onLeftPressed:x-=10; //根據按下的不同的按鍵,將文本移動到不同的位置
        Keys.onRightPressed:x+=10;
        Keys.onUpPressed:y-=10;
        Keys.onDownPressed:y+=10;
    }
三:錨佈局

baseline:文本顯示基線

實例代碼:實現效果

矩形一 矩形的右邊和父窗口的右錨線對齊 頂部和父窗口的頂部錨線對齊
矩形二 始終在父窗口的心錨線位置
矩形三 頂部與中心矩形的底部對齊 右錨線和中心矩形的左錨線對齊 並留4個像素的空

Window
{
    visible: true;  //設置窗口爲可見的
    width:480;  //設置窗口的寬和高
    height:320;
    Rectangle  //矩形1 矩形的右邊和父窗口的右錨線對齊 頂部和父窗口的頂部錨線對齊
    {
        anchors.left: parent.Left;  //右邊與父窗口的右邊對齊
        anchors.top:parent.top;  //頂部和父窗口的頂部對齊
        width:50;   //設置寬度和高度
        height:30;
        color:"red"; //設置顏色爲紅色
    }

    Rectangle   //矩形二 始終在父窗口的心錨線位置
    {
        id:centerRect;
        anchors.centerIn: parent;
        width:80;
        height:80;
        color:"blue";
    }

    Rectangle  //矩形三 頂部與中心矩形的底部對齊 右錨線和中心矩形的左錨線對齊 並留4個像素的空白 
    {
        anchors.top:centerRect.bottom;  //對齊中心矩形的底部錨線
        anchors.right:centerRect.left;  //對齊中心矩形的左邊錨線
        anchors.margins: 4;  //四周留4個像素的空白
        width:80;   //設置寬度和高度
        height:80;
        color:"green";  //設置顏色
    }
}


博文索引  持續更新中。。。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章