QML MouseArea元素

使用Qt实现鼠标点击隐藏/显示矩形

最新推荐文章于 2025-09-28 09:38:32 发布

原创最新推荐文章于 2025-09-28 09:38:32 发布 · 277 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#qt

Qt 专栏收录该内容

22 篇文章

订阅专栏

这篇博客展示了如何在Qt环境中通过QML实现一个交互功能：当鼠标点击红色矩形时，绿色矩形会显示或隐藏，以此来探讨Qt的MouseArea组件和动态属性改变。

import QtQuick 2.12
import QtQuick.Window 2.12

//实现在矩形框1中点击鼠标，显示或隐藏矩形框2

Window {
    visible: true   //窗口可见
    width: 640      //窗口宽度
    height: 480     //窗口高度
    title: qsTr("Mouse Area")   //窗口标题

    //矩形框1
    Rectangle {
        id: rect1   //矩形框id
        x: 12; y: 12    //矩形框位置
        width: 78; height: 88   //矩形框宽、高
        color: "red"    //矩形框颜色

        //鼠标区域
        MouseArea {
            id: area    //鼠标区域id
            width: parent.width //鼠标区域宽度
            height: parent.height   //鼠标区域高度
            onClicked: rect2.visible = !rect2.visible   //鼠标区域点击操作
        }
    }

    //矩形框2
    Rectangle {
        id: rect2   //矩形框id
        x: 112; y: 12   //矩形框位置
        width: 78; height: 88   //矩形框宽、高
        border.color: "green"   //矩形框边框颜色
        border.width: 4 //矩形框边框宽度
        radius: 8   //圆角
    }
}