QML--集成JavaScript

原创已于 2023-02-23 14:32:10 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ui #前端

于 2020-07-03 16:41:48 首次发布

Qt Quick 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何在QML中集成JavaScript，实现用户界面逻辑。包括直接在QML代码中编写JavaScript函数，以及将JavaScript代码写入外部文件并通过import语句导入的方法。展示了通过JavaScript实现图形旋转的实例。

JavaScript代码可以被很容易地集成进QML，来提供用户界面（UI）逻辑、必要的控制及其他用途。QML集成JavaScript有两种方式：一种是直接在QML代码中写JavaScript函数，然后调用；另一种是把JavaScript代码写在外部文件中，需要时用import语句导入.qml源文件中使用。

一、调用JavaScript函数

示例：编写JavaScript函数实现图形的旋转，每单击一次鼠标，矩形就转动一个随机的角度：

（1）RotateRect.qml

import QtQuick 2.0

Rectangle {
    id: rect
    width: 60; height: 60
    gradient: Gradient {
        GradientStop { position: 0.0; color: "yellow" }
        GradientStop { position: 0.33; color: "blue" }
        GradientStop { position: 1.0; color: "aqua" }
    }
    function getRandomNumber() {
        return Math.random() * 360;
    }
    Behavior on rotation {
        RotationAnimation {
            direction: RotationAnimation.Clockwise
        }
    }
    MouseArea {
        anchors.fill: parent
        onClicked: rect.rotation = getRandomNumber();
    }
}

注意：由于Qt Quick 2.3及以上版本环境的MainForm.ui源文件不再支持在其中直接编写JavaScript代码，故遇到需要在程序中编写成段（一行以上）JavaScript代码的情况，一般都是通过定义组件的方式，在外部.qml文件中写JavaScript代码，而主窗体UI文件直接使用包括JavaScript的组件。

（2）MainForm.qml

import QtQuick 2.7

Rectangle {
    property alias mouseArea: mouseArea
    width: 360; height: 360
    color: "lightgray"

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }
    TextEdit {
        id: textEdit
        visible: false
    }
    RotateRect {
        x: 50; y: 50
    }

}

（3）运行效果
在这里插入图片描述

二、导入JS文件

首先新建JS File，取名为myscript.js
在这里插入图片描述

（1）myscript.js

function getRandomNumber() {
    return Math.random() * 360;
}

（2）RotateRect.qml

import QtQuick 2.0
import "myscript.js" as Logic

Rectangle {
    id: rect
    width: 60; height: 60
    gradient: Gradient {
        GradientStop { position: 0.0; color: "yellow" }
        GradientStop { position: 0.33; color: "blue" }
        GradientStop { position: 1.0; color: "aqua" }
    }

    Behavior on rotation {
        RotationAnimation {
            direction: RotationAnimation.Clockwise
        }
    }
    MouseArea {
        anchors.fill: parent
        onClicked: rect.rotation = Logic.getRandomNumber();
    }
}

（3）MainForm.qml

import QtQuick 2.7

Rectangle {
    property alias mouseArea: mouseArea
    width: 360; height: 360
    color: "lightgray"

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }
    TextEdit {
        id: textEdit
        visible: false
    }
    RotateRect {
        x: 50; y: 50
    }

}

（4）运行效果
在这里插入图片描述

当编写好一个JS文件后，其中定义的函数就可以在任何.qml文件中使用，只需在开头用一句import导入该JS文件即可，而在QML文档中无须再写JavaScript函数，这样就将QML的代码与JavaScript代码隔离开来了。
在开发界面复杂、规模较大的QML程序时，一般都会将JavaScript函数写在独立的JS文件中，再在组件的.qml源文件中import（导入）使用这些函数以完成特定的功能逻辑，最后直接在主窗体UI界面上布局这些组件即可。