Qt：QML应用

骑猪看日落 2022-11-07 05:46 258阅读 0赞

>  *  QML是一种声明性语言，它允许根据用户界面的视觉组件以及它们之间的交互方式和相互关系来描述用户界面。
>  *  它是一种高度可读的语言，旨在使组件能够以动态方式互连，并且允许在用户界面内轻松地重用和自定义组件。
>  *  使用该QtQuick模块，设计人员和开发人员可以轻松地在QML中构建流畅的动画用户界面，并可以选择将这些用户界面连接到任何后端C++库

# QML与Qt Quick #

## 什么是QML ##

*  QML是一种用户界面规范和编程语言。它使开发人员和设计师都可以创建高性能，流畅动画和视觉吸引力的应用程序。
 *  QML提供了一种高度可读的，声明性的，类似于JSON的语法，并支持将命令性JavaScript表达式与动态属性绑定结合在一起。
 *  Qt QML模块提供了QML语言和引擎基础结构。有关QML语言的详细信息，请参阅[Qt QML模块文档。][Qt QML]

import QtQuick
    import QtQuick.Controls
    
    ApplicationWindow {
        
        width: 400
        height: 400
        visible: true
    
        Button {
        
            id: button
            text: "A Special Button"
            background: Rectangle {
        
                implicitWidth: 100
                implicitHeight: 40
                color: button.down ? "#d6d6d6" : "#f6f6f6"
                border.color: "#26282a"
                border.width: 1
                radius: 4
            }
        }
    }

以下页面包含有关QML的更多信息：

*  [QML的第一步][QML]\-通过以下示例开始使用QML
 *  [在Qt Creator中创建Qt Quick项目][Qt Creator_Qt Quick]
 *  [QML参考][QML 1]\-有关QML构造和功能的参考
 *  [QML编码约定][QML 2]
 *  [QML术语表][QML 3]
 *  [所有QML API（按模块）][QML API]

## 什么是Qt Quick？ ##

*  **Qt Quick是QML类型和功能的标准库**。它包括视觉类型，交互类型，动画，模型和视图，粒子效果和着色器效果。
 *  QML应用程序开发人员可以通过一个import语句访问所有这些功能。
 *  该QtQuickQML库由提供Qt Quick的模块。
 *  有关Qt Quick提供的各种QML类型和其他功能的深入信息，请参阅[Qt Quick模块文档][Qt Quick]。
 *  除了来自Qt QML的标准QML类型之外，Qt Quick还添加了视觉类型，动画类型和其他QML类型。

以下页面包含有关Qt Quick的更多信息：

*  [QML中的视觉类型][QML 4]
 *  [响应QML中的用户输入][QML 5]
 *  [QML中的动画][QML 6]
 *  [在QML中显示文本][QML 7]
 *  [QML中的布局][QML 8]
 *  [样式和主题支持][Link 1]
 *  [在QML中集成JavaScript][QML_JavaScript]

# 按钮，菜单和其他控件 #

对于一组UI控件，“ [Qt快速控件][Qt]”模块实现了多个控件，例如按钮，菜单和视图。这些控件带有几种可以使用的内置样式，并且还支持创建自定义样式。

# Qt快速项目 #

Qt Creator为以下类型的Qt Quick应用程序设置项目环境：

*  滚动-基于滚动的导航
 *  堆栈-基于堆栈的导航
 *  滑动-具有滑动导航的基于页面的应用程序
 *  Python的- Qt的Python的项目可以有QML用户界面，并有Qt Creator的支持

有关Qt Quick应用程序的更多信息，请访问以下页面：

*  [创建Qt快速项目][Qt 1]
 *  [设计工具][Link 2]\-用于设计UI的工具

# 代码示例和演示 #

要了解有关QML代码使用的更多信息，有几个代码示例显示了如何使用QML类型。此外，还有几个演示，展示了如何在应用程序中使用QML代码。

*  [Qt Quick入门编程][Qt Quick 1]\-一个教程，展示了如何创建简单的QML文本编辑器。
 *  [Qt快速示例和教程][Qt 2]

# 高级应用程序开发主题 #

*  [集成QML和C ++][QML_C]
 *  部署QML应用程序
 *  QML和Qt Quick的最佳做法
 *  绩效考量和建议
 *  国际化和本地化
 *  测试与调试
    
     *  用qmlscene进行原型制作
     *  调试QML应用程序
     *  Qt快速测试：QML单元测试框架

# 相关话题 #

*  所有QML类型
 *  所有QML API（按模块）
 *  过时的QML类型

[Qt QML]: https://doc.qt.io/qt-5/qtqml-index.html
[QML]: https://doc.qt.io/qt-5/qmlfirststeps.html
[Qt Creator_Qt Quick]: https://blog.csdn.net/zhizhengguan/article/details/114667262
[QML 1]: https://doc.qt.io/qt-5/qmlreference.html
[QML 2]: https://doc.qt.io/qt-5/qml-codingconventions.html
[QML 3]: https://doc.qt.io/qt-5/qml-glossary.html
[QML API]: https://doc.qt.io/qt-6/modules-qml.html
[Qt Quick]: https://doc.qt.io/qt-5/qtquick-index.html
[QML 4]: https://doc.qt.io/qt-6/qtquick-usecase-visual.html
[QML 5]: https://doc.qt.io/qt-6/qtquick-usecase-userinput.html
[QML 6]: https://doc.qt.io/qt-6/qtquick-usecase-animations.html
[QML 7]: https://doc.qt.io/qt-6/qtquick-usecase-text.html
[QML 8]: https://doc.qt.io/qt-6/qtquick-usecase-layouts.html
[Link 1]: https://doc.qt.io/qt-6/qtquick-usecase-styling.html
[QML_JavaScript]: https://doc.qt.io/qt-6/qtquick-usecase-integratingjs.html
[Qt]: https://doc.qt.io/qt-6/qtquickcontrols-index.html
[Qt 1]: http://doc.qt.io/qtcreator/quick-projects.html
[Link 2]: https://doc.qt.io/qt-6/topics-app-development.html#design-tools
[Qt Quick 1]: https://doc.qt.io/qt-6/qtdoc-tutorials-alarms-example.html
[Qt 2]: https://doc.qt.io/qt-6/qtquick-codesamples.html
[QML_C]: https://doc.qt.io/qt-6/qtqml-cppintegration-topic.html