QML基础模型(Basic Model)

这篇具有很好参考价值的文章主要介绍了QML基础模型(Basic Model)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一 QML介绍

二 QML的使用场合

三 实例演示


一 QML介绍

QML是Qt Quick的缩写,它是一种新型的、面向对象的、跨平台的脚本语言,可以用来描述用户界面或应用程序的交互逻辑。QML可以在Qt应用程序中使用,也可以在其他JavaScript应用程序中使用。

QML使用XML语法来描述应用程序的用户界面,其中包括各种组件、布局、控件和事件处理程序等。这种语言非常易于学习和使用,因为它具有简单的语法、清晰的结构和易于理解的类型系统。此外,QML还支持自定义组件和自定义控件,使开发人员能够根据需要灵活地设计和重构用户界面。

QML可以帮助开发人员快速构建原生桌面应用程序、移动应用程序和Web应用程序等。由于它是Qt框架的一部分,因此可以利用Qt提供的丰富功能和工具,如Qt Creator、Qt Widgets等。因此,使用QML可以大大提高开发效率和应用程序的质量。

二 QML的使用场合

QML是一种用于描述应用程序用户界面的声明式编程语言,主要应用于移动应用程序、桌面应用程序和Web应用程序等领域。以下是QML主要应用场景:

  1. 移动应用程序:QML可以帮助开发人员快速构建原生移动应用程序,如游戏、音乐播放器、地图应用等。由于QML可以将用户界面分解为一个个小的元素,并且可以对这些元素进行美化和自定义,因此非常适合构建移动应用程序。
  2. 桌面应用程序:QML可以用于开发桌面应用程序,如窗口管理器、文本编辑器、数据分析工具等。QML可以将界面分解为各个小的部件,并且可以使用Qt提供的各种组件和工具来构建高效的桌面应用程序。
  3. Web应用程序:QML可以用于开发Web应用程序,如网页浏览器、表单验证器、媒体播放器等。由于QML可以将界面分解为小的元素,并且可以使用JavaScript来操作这些元素,因此非常适合构建Web应用程序。

QML是一种非常灵活和易于使用的编程语言,可以帮助开发人员快速构建高效的用户界面,并且可以在不同的应用程序领域中使用。

三 实例演示

最基本的分离数据与显示的方法是使用Repeater元素。它被用于实例化一组元素项,并且很容易与一个用于填充用户界面的定位器相结合。

最基本的实现举例,repeater元素用于实现子元素的标号。每个子元素都拥有一个可以访问的属性index,用于区分不同的子元素。在下面的例子中,一个repeater元素创建了10个子项,子项的数量由model属性控制。对于每个子项Rectangle包含了一个Text元素,你可以将text属性设置为index的值,因此可以看到子项的编号是0~9。

import QtQuick 2.0

Column {
    spacing: 2

    Repeater {
        model: 10

        Rectangle {
            width: 100
            height: 20

            radius: 3

            color: "lightBlue"

            Text {
                anchors.centerIn: parent
                text: index
            }
        }
    }
}

QML基础模型(Basic Model)

这是一个不错的编号列表,有时我们想显示一些更复杂的数据。使用一个JavaScript序列来替换整形变量model的值可以达到我们的目的。序列可以使用任何类型的内容,可以是字符串,整数,或者对象。在下面的例子中,使用了一个字符串链表。我们仍然使用index的值作为变量,并且我们也访问modelData中包含的每个元素的数据。

import QtQuick 2.0

Column {
    spacing: 2

    Repeater {
        model: ["Enterprise", "Colombia", "Challenger", "Discovery", "Endeavour", "Atlantis"]

        Rectangle {
            width: 100
            height: 20

            radius: 3

            color: "lightBlue"

            Text {
                anchors.centerIn: parent
                text: index +": "+modelData
            }
        }
    }
}

QML基础模型(Basic Model)

将数据暴露成一组序列,你可以通过标号迅速的找到你需要的信息。想象一下这个模型的草图,这是一个最简单的模型,也是通常都会使用的模型,ListModel(链表模型)。一个链表模型由许多ListElement(链表元素)组成。在每个链表元素中,可以绑定值到属性上。例如在下面这个例子中,每个元素都提供了一个名字和一个颜色。

每个元素中的属性绑定连接到repeater实例化的子项上。这意味着变量name和surfaceColor可以被repeater创建的每个Rectangle和Text项引用。这不仅可以方便的访问数据,也可以使源代码更加容易阅读。surfaceColor是名字左边圆的颜色,而不是模糊的数据序列列i或者行j。

import QtQuick 2.0

Column {
    spacing: 2

    Repeater {
        model: ListModel {
            ListElement { name: "Mercury"; surfaceColor: "gray" }
            ListElement { name: "Venus"; surfaceColor: "yellow" }
            ListElement { name: "Earth"; surfaceColor: "blue" }
            ListElement { name: "Mars"; surfaceColor: "orange" }
            ListElement { name: "Jupiter"; surfaceColor: "orange" }
            ListElement { name: "Saturn"; surfaceColor: "yellow" }
            ListElement { name: "Uranus"; surfaceColor: "lightBlue" }
            ListElement { name: "Neptune"; surfaceColor: "lightBlue" }
        }

        Rectangle {
            width: 100
            height: 20

            radius: 3

            color: "lightBlue"

            Text {
                anchors.centerIn: parent
                text: name
            }

            Rectangle {
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: 2

                width: 16
                height: 16

                radius: 8

                border.color: "black"
                border.width: 1

                color: surfaceColor
            }
        }
    }
}

QML基础模型(Basic Model)

repeater的内容的每个子项实例化时绑定了默认的属性delegate(代理)。这意味着例1(第一个代码段)的代码与下面显示的代码是相同的。注意,唯一的不同是delegate属性名,将会在后面详细讲解。

 复制代码文章来源地址https://www.toymoban.com/news/detail-431254.html

import QtQuick 2.0

Column {
    spacing: 2

    Repeater {
        model: 10

        delegate: Rectangle {
            width: 100
            height: 20

            radius: 3

            color: "lightBlue"

            Text {
                anchors.centerIn: parent
                text: index
            }
        }
    }
}

到了这里,关于QML基础模型(Basic Model)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [因果推断] 增益模型(Uplift Model)介绍(三)

    增益模型(uplift model):估算干预增量(uplift),即 干预动作(treatment) 对 用户响应行为(outcome) 产生的效果。 这是一个 因果推断(Causal Inference) 课题下估算 ITE (Individual Treatment Effect)的问题——估算同一个体在 干预与不干预 (互斥情况下)不同outcome的差异。为了克

    2024年02月06日
    浏览(31)
  • Keras 的模型(Model)和层(Layers)的介绍

    我们来做个 TensorFlow 的快速入门模型分享。 这次的学习目标就是模型构建的一些相关 API,其中模型的构建,包括 Model 和 layers,然后我们模型的损失函数、优化器、损失等等,主要包括 losses、optimizer、metrics。其中这个 optimizer 呢,之前我们刚刚接触过,已经讲解过了。 接着

    2024年02月09日
    浏览(35)
  • qml ParticleSystem3D使用介绍

    作者:令狐掌门 技术交流QQ群:675120140 csdn博客:https://mingshiqiang.blog.csdn.net/ 在 Qt Quick 3D 中,ParticleSystem3D 是用来创建和控制3D粒子系统的元素。粒子系统是图形编程中用于模拟液体、烟雾、火、星空等现象的技术,它通过生成大量小粒子来模拟这些效果。ParticleSystem3D 提供了

    2024年02月03日
    浏览(39)
  • qml View3D使用介绍

    在Qt Quick 3D中, View3D 是一个用于展示 3D 内容的 QML 类型。 View3D 允许你将 3D 场景集成到 Qt Quick 2D 用户界面中,这意味着你可以在传统的 2D UI 元素(如按钮、文本和图像)与 3D 图形之间无缝地进行整合。 View3D 提供了一个视口,用于渲染 3D 场景。它可以包括多个 3D 对象,如

    2024年02月03日
    浏览(74)
  • 96.qt qml-http之XMLHttpRequest介绍详解使用

    在QML中我们可以通过XMLHttpRequest 来实现http/https访问网络接口,接下来我们先来学习XMLHttpRequest类的常用部分、 由于QML的XMLHttpRequest少部分参数是没有的,所以本章来单独讲解下。 下章我们来实现旋转请求按钮以及通用的JSON请求模板方法 首先推荐一个http测试工具httpbin,该服务

    2024年02月08日
    浏览(34)
  • CSS基础学习--8 盒子模型(Box Model)

    一、介绍         所有HTML元素可以看作盒子,在CSS中,\\\"box model\\\"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。         盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

    2024年02月09日
    浏览(48)
  • AI最新进展介绍——大世界模型Large World Model (LWM)

    UC Berkeley    大世界模型( LWM )是一种通用的大型上下文多模态自回归模型。它使用 RingAttention 在一个包含各种长视频和书籍的大型数据集上进行训练,可以进行语言、图像和视频的理解和生成。   目前的语言模型在理解“世界上难以用言语描述的方面”存在不足,而且

    2024年03月10日
    浏览(60)
  • 【小黑嵌入式系统第十二课】μC/OS-III程序设计基础(二)——系统函数使用场合、时间管理、临界区管理、使用规则、互斥信号量

    上一课: 【小黑嵌入式系统第十一课】μC/OS-III程序设计基础(一)——任务设计、任务管理(创建基本状态内部任务)、任务调度、系统函数 下一课: 【小黑嵌入式系统第十三课】PSoC 5LP第二个实验——中断控制实验 1.1 时间管理 1.1.1 控制任务的执行周期 在任务函数的代码

    2024年02月04日
    浏览(53)
  • pytorch 测量模型运行时间,GPU时间和CPU时间,model.eval()介绍

    time.time() time.perf_counter() time.process_time() time.time() 和time.perf_counter() 包括sleep()time 可以用作一般的时间测量,time.perf_counter()精度更高一些 time.process_time()当前进程的系统和用户CPU时间总和的值 测试代码: 测试结果: 更详细解释参考 Python3.7中time模块的time()、perf_counter()和proce

    2024年02月06日
    浏览(45)
  • 2. QML使用View3D控件显示三维模型

    1. View3D介绍 View3D控件和QML中其它控件类似,只是在其中可以显示三维模型,类似在界面中创建一个场景,所有的模型将在这个场景中被加载出来。 效果展示: View3D三维模型加载 1.1 常用属性介绍 camera :相机(三维场景中加入相机,才能显示三维模型,控制相机的姿态进而控

    2024年02月02日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包