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";  //设置颜色

    }

}

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