QML入门

最新推荐文章于 2025-03-18 11:40:27 发布

amos.yang

最新推荐文章于 2025-03-18 11:40:27 发布

阅读量565

点赞数

分类专栏： Qt6权威指南

本文链接：https://blog.youkuaiyun.com/Y03977211367Y/article/details/112002708

版权

本文介绍了QML，一种用户界面标记语言，支持CSS语法和JavaScript逻辑。内容涵盖import语句、对象声明、子对象、对象属性，以及JavaScript脚本、注释和控制台操作。通过示例展示了如何创建QML对象树，以及如何使用JavaScript函数响应用户交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

QML是一种用户界面标记语言，文件格式以.qml结尾。语法类似CSS，同时支持JavaScript逻辑控制，并且可以与C++进行交互。

import

在QML文件中可能存在一个或多个导入。导入可以是以下任一项：

已注册并具有版本号和命名空间的类型。
一个包含类型定义的相对目录。
一个JavaScript文件。

导入JavaScript文件时必须对其进行限定，以便可以访问它提供的属性和方法。

各种导入的通用形式如下：

    import Namespace VersionMajor.VersionMinor
    import Namespace VersionMajor.VersionMinor as SingletonTypeIdentifier
    import "directory"
    import "file.js" as ScriptIdentifier

示例：

    import QtQuick 2.0
    import QtQuick.LocalStorage 2.0 as Database
    import "../privateComponents"
    import "somefile.js" as Script

对象声明

对象由它们的类型指定，后跟一对大括号。对象类型始终以大写字母开头。对象是使用对象声明定义的，对象声明描述了要创建的对象类型以及要赋予对象的属性。下面是一个简单的对象声明示例：

    Rectangle {
   
        width: 100
        height: 100
        color: "red"
    }

这里我们声明了一个Rectangle类型的对象，后面紧跟着一组花括号，里面包含了为该对象定义的属性。通过Qt文档可以查到Rectangle类型由QtQuick模块提供，并具有width、height、color等属性。

小贴士：如果对象只定义了少量的属性，则可以将其写在一行，并用分号分隔属性：Rectangle { width: 100; height: 100; color: "red" }

结合上面import语法，修改代码如下：

最低0.47元/天解锁文章