用QML做简单图片查看器（主要介绍QML鼠标的一些操作）

最新推荐文章于 2025-09-27 16:21:47 发布

原创

最新推荐文章于 2025-09-27 16:21:47 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

本文通过QML实现了一个简单的图片查看器，重点介绍了如何利用MouseArea进行鼠标交互控制。通过将不同大小的MouseArea进行组合，使得在主MouseArea中可以响应特定区域外的事件，同时小范围的MouseArea则各自处理内部的交互事件。

用QML做了一个简单的图片查看器，麻雀虽小五脏俱全，其中涉及了鼠标大小区域覆盖问题，鼠标点击与鼠标点击移动问题，以及滚轮事件问题。

具体实现代码如下：

import Material 0.1
import QtQuick 2.4
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Window {
    id: win
    visible: true
    property string windowBgColor: "white"

    width: 300
    height:300
    x:100
    y:100

    MouseArea {
        id:fill_mouse
        anchors.fill: parent
        property point clickPos: "0,0"
        propagateComposedEvents: true
        onClicked: {
            rect.border.color = "black"
            console.log("onClicked:", mouse.x,mouse.y)
        }
        onPressed: {
            clickPos = Qt.point(mouse.x,mouse.y)
            console.log("onPressed:", mouse.x,mouse.y)
        }

        onWheel: {
            if (wheel.angleDelta.y > 0) {
                rect.width += 5;
                rect.x -= 2

                rect.height += 5;