Qml 和外部js文件协同工作

最新推荐文章于 2025-09-24 00:11:33 发布

原创

最新推荐文章于 2025-09-24 00:11:33 发布 · 9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#qt #qml #Javascript

本文介绍如何使用`import as`语句在Qml文件中引入外部JavaScript文件。示例展示了一个包含Item的Qml文件，该Item位于另一个Rectangle内部。通过示例，解释了如何进行坐标转换，如将鼠标在r2坐标系的位置转换为r1坐标系，以及使用`mapToItem`方法将r1坐标系的鼠标位置映射到r2坐标系，强调了理解坐标系统的正确转换方向的重要性。

可以用import as语句将外部js文件引入到qml文件中，下面定义了一个qml文件，里面只有一个Item.

import QtQuick 2.0
import "handler.js" as Handler

Item {
    id: top_item
    width: 380
    height: 200
    MouseArea { 
        anchors.fill: parent

        onPressed: Handler.onPressed(mouse);
    }

}

看一下handler.js文件：

function onPressed(mouse) {
    console.log(mouse.x, mouse.y);
}

当鼠标单击的时候，控制台将打印光标的位置。

再复杂一点，让qml的Item在另一个Rectangle里面, 然后转换坐标位置：

import QtQuick 2.0
import "handler.js" as Handler

Rectangle {
    id: r1
    width: 400
    height: 400
    Item {
        id: i1
        anchors.fill: parent.fill
        Rectangle {
            id: r2
            width: 200
            height: 200
            color: "red"
            anchors.left: parent.left
            anchors.leftMargin: 100
            anchors.t