QML语法基础四

事件处理

1.MouseArea

一般用来和一个可见的控件配合,提供鼠标处理
enable:

        设置是否启用鼠标处理

pressed 只读属性:

        用户是否在MouseArea上按住了鼠标按钮

containsMouse 只读属性:

        当前鼠标光标是否在MouseArea上,默认只有鼠标的一个按钮被按下时才可以被检测到 
获取鼠标按钮点击:

 onClicked()onDoubleClicked()
onPressed()onReleased()
onPressAndHold()onWheel()

获取鼠标位置

        设置 hoverEnabled 为true,之后可以获取鼠标位置,且containsMouse只读属性也可以在鼠标按钮没有按下的情况下检测到鼠标onPositionChanged()、onEntered()、onExited()

注:
        MouseArea与其他MouseArea重叠时,设置 propagateComposedEvents true 来传递 clicked doubleClicked 、pressAndHold等事件
        在MouseArea没接受事件时,才可以继续传递,即当一个事件在MouseArea中处理,需要在其他事件处理器中设置 MouseEvent.acepted=false,该事件才能继续传播
    例子

Rectangle{
        width:100;height:100;
        color:"yellow"
        MouseArea{            
            anchors.fill: parent    //使MouseArea填充整个yellow  Rectangle
            onClicked:{parent.color='red';console.log(" click")}     
            onDoubleClicked:console.log("double click")                  
        }
        Rectangle{
            width:50;height:50;
            color:"blue"
            MouseArea{            
            anchors.fill: parent    //使MouseArea填充整个 blue  Rectangle
            
            propagateComposedEvents:true    //设置为true,保证事件能传递
            
            onClicked:(mouse)=>{
                console.log(" click blue")
                mouse.acepted = false           //设置为false,该单击事件才会传递到yellow层
            }     
            
            onDoubleClicked:(mouse)=>{
                console.log(" double click blue")   
                mouse.acepted = false           //设置为false,该双击事件才会传递到yellow层
            }     
        }
        }
    }

2.鼠标事件MouseEvent、滚轮事件WheelEvent

    可视化的控件配合MouseArea获取鼠标相关的事件,通过信号与处理对数表进行交互
    2.1 、

        MouseArea包含一个mouse参数,该参数类型为MouseEvent,在该参数对象中设置accepted为true,防止鼠标事件传递到下层
    2.2

        根据 x、y获取鼠标位置,根据button或buttons获取按下的按键;button 和 buttons的取值Qt.LeftButton、Qt.RightButton、Qt.MiddleButton
    2.3

        根据modifiers获取按下的键盘修饰符
    modifiers的值是由多个键位组成的
    常用的有

Qt.NoModifier没有修饰键被按下
Qt.ShiftModifierShift键被按下
Qt.ControlModifierCCtrl键被按下
Qt.AltModifierAlt键被按下
Qt.MetaModifierMeta键被按下
Qt.KeypadModifier小键盘键被按下


    例子:

 Rectangle{
            width: 100;height:100;
            color:"green"
            Text{
                id:myText;                
                anchors.centerIn: parent;
                text:"Qt";
                
            }
            MouseArea{
                anchors.fill:parent
                acceptedButtons:Qt.LeftButton|Qt.RightButton
                onClicked:(mouse)=>{
                    if(mouse.button === Qt.RightButton)
                        parent.color='blue'
                    else
                        parent.color='red'
                }
                onDoubleClicked:(mouse)=>{
                    if((mouse.button===Qt.LeftButton) && (mouse.modifiers===Qt.ShiftModifier))
                        parent.color='green'
                }
                onWheel:(wheel)=>{
                    if(wheel.modifiers & Qt.ControlModifier){
                        if(wheel.angleDelta.y>0)
                            myText.font.pointSize +=1;
                        else
                            myText.font.pointSize -=1;
                    }
                }
            }
        }

3.拖放事件DragEvent

    实现拖放,需要使用MouseArea中的  drag属性
    drag.target         指定要拖动的控件id
    drag.active         指定目标控件当前是否可以被拖动  true false
    drag.axis           指定拖动方向        Drag.XAxis水平方向  Drag.YAxis垂直方向  Drag.XAndAxis水平和垂直方向
    drag.minimumX       水平方向最小拖动距离
    drag.minimumY       垂直方向最小拖动距离
    drag.maximumX       水平方向最大拖动距离
    drag.maximumY       垂直方向最大拖动距离
    drag.filterChildren 使子MouseArea也启用拖动     true false
    drag.smoothed       是否平滑拖动                true false
    drag.threshold      启动拖动阈值,超过该值才被认为是一次拖动

    实现复杂的拖拽事件用到DragEvent,通过x、y获取拖动的位置,使用keys识别数据类型和源的键列表
    通过hasColor、hasHtml、hasText、hasUrls确定拖动类型
    通过colorData、html、text、urls获取具体的数据类型
    formats属性获取拖动数据中包含的MIME类型格式列表
    drag.source获取拖动事件源

    DropArea是一个不可见区域
        当控件拖到上面时,可以接收相关事件
        通过drag.x drag.y获取拖放事件坐标,
        drag.source获取拖放源对象
        keys获取键列表
        当DropArea中有控件被拖进来时,调用 onEntered,
        当有drop事件时,调用onDropped,
        当拖放离开时,调用onExited
        当拖放位置改变时调用onPositionChanged

 4.键盘事件KeyEvent、焦点作用域FocusScope


    键盘事件是在键盘上按下一个键时就触发,控件的focus设置为true,该控件便有焦点
    4.1按键处理
        按下键后,Qt获取键盘动作并产生一个键盘事件
        若window是活动窗口,将键盘事件传递过去
        控件有焦点得到该键盘事件,没有焦点则忽略事件。若焦点控件接受了键盘事件,则事件传播到此结束
    4.2导航键
        KeyNavigation福附加属性,使用方向键或Tab键进行导航
        属性有  backtab(shift+Tab)  down  left  priority right tab up
    4.3查询活动焦点
        通过activeFocus属性进行查询
    4.4获取焦点和焦点作用域
        通过focus 设为 true来使其获得焦点
        通过 FocusScope创建焦点作用域,FocusScope是不可视的,他的子项目需要将属性暴露给FocusScope的父项目中
        例子:
           

 FocusScope{
                width: rect.width
                height:recct.height
                Rectangle{
                    id: rect
                    anchors.centerIn:parent
                    focus:true                     
                }
            }

5.定时器

定时器运行时改变其值,经过的时间会被重置
例如1000ms的定时器,经过了500ms,突然去改变repeat值,则之前的500ms会重置为0,再过1000ms后才能触发

 Item{
        Timer{
            interval:1000       //1000ms执行一次
            running:true           //为true开启定时器
            repeat:true             //为true时重复触发,false为才触发一次
            onTriggered:        //定时器触发时执行这个信号差处理器
                time.text= Date().toString()
            
        }
        Text{id:time}
    }

 6.Loader动态加载组件

    6.1 Loader动态加载QML组件,可以加载一个文件或者组件对象
        主要用于延迟组件的创建
       

 Item{
            width:100
            height:100
            Loader{id:pageLoader}
            MouseArea{
                anchors.fill:parent
                onCliked:pageLoader.sourcce ="Page.qml"
            }
        }

    6.2Loader加载可视化控件时会使用大小规则
        若没有明确指定loader的大小,则loader将会在组建加载完成后自动设置为组件的大小
        若设置了width、height或者使用锚确定了Loader的大小,那么被加载的控件会适配Loader的大小
       

Item{
            width:100;height:100;
            Loader{            
                anchors.fill: parent            
                //anchors.centerIn: parent  移除锚定,则显示在父Item中间
                sourceComponent:rect
            }
            Component{
                id:rect
                Rectangle{
                    width:50;height:50;
                }
            }
        }


    6.3接收信号
        从被加载的形目中发射的信号,可以用Connections进行接收
 

        Item{
            Loader{
                id:myLoader
                source:"MyItem.qml"
            }
            Connections{
                function onMessage(msg){console.log(msg)}
                target: myLoader.item
            }
        }

Rectangle{
            id:myItem            
            signal message(string msg)
            MouseArea{
                anchors.fill:parent
                onClicked:myItem.message("111")
            }
            
        }

QMLQt Modeling Language)是一种声明式语言,主要用于设计用户界面,它支持ECMAScript表达式,并且拥有高可读性、声明式、类CSS的语法[^1]。学习QML时,可以借鉴C++与STL的关系来理解QMLQt Quick的关系。如果你已经熟悉了Qt,那么学习QML将会相对容易一些。 ### QML模块基础语法QML中,`import`语句通常位于文件的开头部分,其作用类似于C++中的头文件引用,用来引入其他组件、QML代码文件或JavaScript代码文件[^2]。例如,你可以导入`QtQuick`和`QtQuick.Window`模块来创建一个窗口应用。 ### QML代码示例 下面是一个简单的QML代码示例,展示了如何创建一个包含图片和文本的窗口: ```qml import QtQuick 2.15 import QtQuick.Window 2.15 Window { visible: true width: 220 height: 260 title: "QML示例" Rectangle { id: root width: parent.width height: parent.height color: "#4A4A4A" Image { id: image x: (parent.width - width) / 2 y: 20 source: "../../images/pinwheel.png" } Text { y: image.height + image.y + 20 text: "大风车" color: "white" horizontalAlignment: Text.AlignHCenter width: parent.width } } } ``` ### QML语言特性 - **声明式语法**:QML语法设计使得UI布局更加直观和简洁。 - **动态性**:由于支持ECMAScript表达式,QML允许开发者编写动态的行为。 - **组件化**:通过导入不同的模块,可以轻松地复用和组合UI组件。 通过这些基本概念和示例,你可以开始探索更多关于QML的强大功能,比如动画、状态管理以及与C++后端的交互等高级主题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值