模拟应用程序逻辑
您可以使用 JavaScript 模拟应用程序逻辑,为您的 UI 带来生命力。
您需要以下文件
- 组件文件 (.qml),它将指定 UI 的 API。
- JavaScript 文件,为 UI 生成模拟数据。有关使用 JavaScript 的更多信息,请参阅集成 QML 和 JavaScript。
- 模块定义文件 (qmldir),用于声明 UI 文件中指定的组件(QML 类型)。有关更多信息,请参阅模块定义 qmldir 文件。
在此,您将创建一个基于 QObject 类的组件,并将其注册为单例类型。这允许在 UI 中使用全局属性值。
要创建必要的文件
- 在文件资源管理器中,在项目文件夹中的 imports 文件夹内创建一个用于模拟数据的新的文件夹(例如,Data)。
注意:确保将 Data 文件夹名称大写,因为您需要将其作为组件导入,组件名称必须大写。
注意:如果您将此文件夹放置在项目的其他位置,您需要将路径添加到导入列表。要做到这一点,在 Qt 设计工作室中,打开项目文件 (.qmlproject),然后将路径添加到传递给 QML 运行时的插件目录列表。例如,如果您将 Data 文件夹放置在项目根目录中名为 backend 的另一个文件夹内,您将需要添加以下内容
importPaths: [ "imports", "backend" ]
- 选择 文件 > 新建文件 > Qt Quick 文件 > Qt Quick 文件 > 选择,添加一个将指定 UI API 的 Qt Quick 文件。
- 按照向导的说明,在数据文件夹中创建 Qt Quick 文件。在这些说明中,文件被命名为 Values.qml。
注意:确保将文件名大写,因为它将成为一个自定义组件。
- 选择 文件 > 新建文件 > JavaScript > JavaScript 文件 > 选择 创建用于生成 UI 模拟数据的 JavaScript 文件。
- 按照向导说明在数据文件夹中创建 JavaScript 文件。在这些说明中,该文件称为 simulation.js。
- 在 JavaScript 文件中删除模板文本并保存文件。
- 在文本编辑器(如记事本)中创建一个名为 qmldir 的模块定义文件,包含以下内容,并将其放置在数据目录中
singleton Values 1.0 Values.qml
- 在 代码 视图中打开 Values.qml 进行编辑。
- 将以下代码添加到文件顶部以注册你将用作单例类型的全局属性的单继承自 QObject 类
pragma Singleton
- 将以下导入语句添加到导入 simulation.js 文件,以使用其提供的功能
import "simulation.js" as JS
- 将默认的 Item 声明替换为以下代码以创建一个继承自 QObject 的类,该类将列出你想要模拟的全局属性及其默认值
QtObject { id: values // property values to simulate property int name1: 5 property string name2: "foo" property real name3: 2.5 }
- 将以下代码添加以使用 Timer 组件来指定属性的值范围
property Timer name1Timer: Timer{ running: true repeat: true onTriggered: JS.name1Timer() interval: 10 }
这将每 10 毫秒执行一次为
onTriggered
定义的函数。在你的 JavaScript 函数中,你可以执行必要的操作以模拟所需的操作。有关更多详细信息,请参阅 在 QML 中导入 JavaScript 资源。注意:您必须在 JavaScript 文件中添加 JavaScript 方法
name1Timer()
。您还有选择在onTriggered
处理程序中直接添加此 JavaScript 代码。 - 打开将使用模拟数据的组件的 .ui.qml 文件,并将以下代码添加到文件的顶部以将数据文件夹视为 QML 模块导入
import Data 1.0
- 返回到 2D 视图,找到应绑定到模拟值属性的属性。选择 为该属性设置 绑定 并输入模拟值属性。例如,您可以为示例
name1
属性设置以下表达式以进行绑定Values.name1
在本项 Qt 许可证下可用。
了解更多信息。