• QML事件处理 八


    1、MouseArea

    MouseArea 是一个不可见的项目,通常用来和一个可见的项目配合使用来为其提供鼠标处理。鼠标处理的逻辑可以包含在一个MouseArea项目中。

    MouseArea的enabled属性可以用来设置是否启用鼠标处理,值默认为true;

    只读属性pressed表明了是否用户在MouseArea按住了鼠标按钮,这个属性经常用于属性绑定,可以实现在鼠标按下时执行一些操作。

    只读的containsMouse属性表明了当前是否由鼠标光标在MouseArea上,默认的,只有鼠标的一个按钮处于按下状态才可以被检测到。

    对于鼠标的位置好按钮单击等信息是用过信号提供的,可以使用事件处理器来获取,最常用的有onClicked(),onDoubleClicked(),onPressed()

    onReleased()和onPressAndHold()等。

    默认情况下,MouseArea项目只报告鼠标单击而不报告鼠标光标的位置改变,这个可以通过设置hoverEnabled属性来进行更改。这样onPositionChanged()、onEntered()和onExited()等处理函数都可以使用了。而且这时containsMouse属性也可以在没有鼠标按钮按下的情况下进行检查了。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    Rectangle{
        color:"blue"
        border.color"red"
        border.width5
        radius: 10
        width:100;height:100
     
        MouseArea{
        anchors.fill:parent
        onClicked: {parent.color = "red"}
        }
        }

      方块从蓝变红。

    1.1 MouseEvent

    在很多MouseArea的信号中都包含了一个鼠标事件参数,例如MouseArea::onClicked(MouseEvent mouse)。在MouseEvent对象中,可以通过x和y属性获取鼠标的位置;通过button属性可以获取按下的按键;通过modifiers属性可以获取按下的键盘修饰符等。

    button值:Qt.LeftButton Qt.RightButton Qt.MiddleButton

    modifiers值:由多个按键进行位组合而成,在使用是需要将modifiers与这些特殊的按键进行按位与来判断按键,常用的按键由Qt.NoModifier没有修饰键、Qt.ShiftModifier Qt.ContralModifier Qt.AltModifier.例子如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    MouseArea{
    // mouse 作为clicked()信号传进来的参数,在onClicked中使用
     anchors.fill:parent
     acceptedButtons: Qt.LeftButton|Qt.RightButton
     onClicked: {
         if(mouse.button == Qt.LeftButton)
            {parent.color =  "blue";
             console.debug("左键");}
         else if((mouse.button == Qt.RightButton)
                 &&(mouse.modifiers & Qt.ShiftModifier))
            { parent.color = "green";
              console.debug("右键");}
         else
         {parent.color = "red";
          console.debug(mouse.button);}
     
     }
     }

      实现的功能是,当按下鼠标右键时,Rectangle变色。

    1.2 拖拽功能

    MouseArea中的drag分组属性提供了一个使项目可以拖拽的简便方法。

    drag.target属性用来指定拖动的项目id;

    drag.active属性获取项目当前是否正在被拖动的信息;

    drag.axis属性用来指定属性的拖动方向(水平方向:Drag.XAxis 和 Drag.YAxis 或者 Drag.XandYAxis);

    drag.minimum和drag.maximum限制了项目在指定方向上拖动的距离。

    举例如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    Rectangle{
         id:container
     color:"blue"
     width:400;height:200
    Rectangle{
    id:rect
    width:50height:20;
    color:"red"
    opacity:(container.width-rect.x)/container.width
     
    }
     MouseArea{
     anchors.fill:parent
     drag.target: rect
     drag.axis: Drag.XAxis
     drag.minimumX: 0
     drag.maximumX: contains.width-rect.width
     }

      drag作为mouse事件中的一个属性,可以指定一个目标,设定其可拖拽的功能。本例子中红色小方块可以进行水平拖动。并且在拖动的过程中,小方块的透明度会发生变化。

    2 按键处理(与鼠标对应)

    2.1按键处理概述

    当用户按下或者释放一个按键,会按以下步骤进行处理:

    第一步,Qt获取键盘动作并产生一个键盘事件

    第二步,如果包好QDeclarativeView的Qt部件具有焦点(focus),那么键盘事件会传递给它,否则将进行常规的按键处理。

    第三步,场景将键盘事件交给具有活动焦点的QML项目。如果没有项目具体活动焦点,键盘事件会被忽略,然后继续常规的按键处理。

    第四步,如果具有活动焦点的QML项目接接受了该键盘事件,那么传播将停止。否则,改时间会递归的传递到每一个项目的副项目,直到被接受,或者到达根项目。

    第五步,如果到达了根项目,该键盘事件会被忽略而继续常规的Qt按键处理。

    所有的基于Item的可见元素都可以通过keys附加属性来进行按键处理。Keys附加属性提供了基本的处理器,例如onPressed和onReleased,也提供了对特殊按键的处理器。例如onCancelPressed。例如下面的代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    Rectangle{
        width100height:100
        focus:true
        Keys.onPressed: {
        if(event.key == Qt.Key_A)
        {
            console.log("key A was pressed");
            event.accepted = true;
        }
        }
    }

      使用Keys附加属性进行处理。event.accepted设置为true可以防止事件想上层项目传播。

    活动焦点focus:当一个按键按下或者释放时,则产生一个键盘事件,并将其传递给获得由焦点的QML项目。

                         如果一个项目的focus属性为true,那么这个项目便会获得焦点。所以使用键盘事件前,先将focuss设置好。

    2.2查询活动焦点项目

    Item::activeFocus属性可以查询一个项目是否具有活动焦点。例如

    Text{text:activeFocus?"I have active focus":"I dont have active focus"}

    2.3 获取焦点和焦点作用域

    正常一个Item项目可以设置focus属性获得焦点。但是当其作为组件时(例如上述例子Key_A),简单的使用focus属性就不再有效。因为组件中的也存在focus为true的情况,所以引入焦点作用域FocusScope来解决该问题。在组件中使用FocusScope元素。

    3.定时器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    Timer{
        interval:500; running:true;
        repeat:true
        onTriggered: time.text = Date().toString()
    }
     
    Text{
        id:time}
    }

      定时器可以用来将一个动作在指定的事件间隔触发一次或者多次,在QML中使用Timer元素来表示一个定时器。例子中表示每隔500ms更新一次文本的显示。

    interval属性:设置时间间隔,单位ms,默认1000ms

    repeat属性:社则是否重复触发。如果是false则只触发一次并自动将running属性设置为false.默认值为false。

    running属性:true开启定时器。默认false。

    当定时器触发时会执行onTriggered()信号处理函数,在这里可以定义一些操作;

    Timer提供了一些函数,比如restart(),start()和stop()等。

    4使用Loader动态加载组件

    作用:对于拖延组件的创建是很用的。当一个组件需要在要求的时候被创建,或者当由于性能原因一个组件不应该被创建是。

  • 相关阅读:
    斐波那契数列
    斐波那契数列
    .NET (C#)ASP.NET 应用程序与页面生命周期
    .NET (C#) Internals: ASP.NET 应用程序与页面生命周期(意译)
    如何使用:before和:after伪元素?
    学习的网址
    css盒子(box)
    利用Asp.Net来实现“网络硬盘”功能
    Jtemplates ${} or {{html}}的区别
    Jtemplate
  • 原文地址:https://www.cnblogs.com/senior-engineer/p/7843144.html
Copyright © 2020-2023  润新知