QML基础

C++与QML交互
anchors.fill/cneterIn/
MouseArea--focus

Keys.***--focus
Behavior

Column/Row/Grid/Flow
引用另一个qml文件中组件：加入qrc，在调用方内实例化组件

引用组件：
（1）import  "./ComponentDir/SubDir"把被调用组件的相对路径加进来即可
（2）Component+Loader
（3）使用模块注册方式

1. 堆叠
Qt Quick 项目使用递归绘制算法来确定在发生碰撞时将哪些项目绘制在顶部。通常，项目按照创建顺序（或在 QML 文件中指定z属性：低于0的z值将堆叠在父级下方）绘制在其父项目之上。z值的越大，优先级越高，但仅限于同父级比较，如果父级优先级低于其他父级，即使子级z值极大，也不会比其他父级要高。
2. 注释
单行注释以 // 开头，在行尾结束。
多行注释以 /* 开头，以 */ 结尾

3. property

[default] [required] [readonly] property <propertyType> <propertyName>

property int myWidth:w

4. C++与QML交互

A。Qt 提供了两种在 QML 环境中使用 C++对象的方式∶

【QML与C++混合编程】在 QML 中使用 C++ 类和对象（一）_qml注册c++类_音视频开发老舅的博客-CSDN博客

【QML与C++混合编程】在 QML 中使用 C++ 类和对象（二）_音视频开发老舅的博客-CSDN博客

​ 方式1：C++实现一个类，注册为 QML 环境的一个类型，在 QML 环境中使用该类型创建对象。

​ 方式2：C++构造一个对象，设置为 QML 的上下文属性，在QML 环境中直接使用该属性。

​ 不管哪种方式，对要导出的 C++类都有要求，不是一个类的所有方法、变量都可以在 QML 语境中使用，定义可以导出的 C++类
前提条件
要想将一个类或对象导出到 QML 中，下列的前提条件必须满足∶

（1）从 QObject 或 QObject 的派生类继承，并使用Q_OBJECT宏，这和使用信号与槽的前提条件一样的，这两个条件是为了让一个类能够进入Qt强大的元对象系统（meta-object system）中，只有使用元对象系统，一个类的某些方法或属性才可能通过字符串形式的名字来调用，才可以在 QML 中被访问。

（2）成员函数想在qml中被调用，则需要在声明前加上Q_INVOKABLE

（3）槽函数可以用类对象在qml代码中直接调用

（4）C++的成员属性可以用Q_PROPERTY宏设置

（5）枚举体需要用Q_ENUMS导出

B。C++中使用QML对象

【QML与C++混合编程】在 C++ 使用 QML 对象_c++调用qml对象_音视频开发老舅的博客-CSDN博客

可以使用 QQmlComponent 或 QQuickView 来加载 QML 文档。

QQmlComponent将 QML 文档作为为一个 C++ 对象加载，然后可以从 C++ 代码进行修改。QQuickView也可以这样做，但由于 QQuickView 是一个基于 QWindow 的派生类，加载的对象也将可视化显示，QQuickView 通常用于将一个可视化的 QML 对象集成到应用程序的用户界面中。
 

5. Connections

可以使用多个Connections元素来连接多个信号和槽。注意，connections元素必须放在目标对象的作用域内，并且target属性必须指向源对象。

6. 处理键盘鼠标时，需要将组件设置focus:true

如果一个按键被处理，event.accepted 应该被设置为 true，以免它被继续传递。

7. Item

注意：

Item 通常被用来作为其它元素的容器使用，类似 HTML 语言中的 div 元素（div element）。
Item 的属性 opacity 可以指定一个图元的透明度，取值在 0.0 到 1.0 之间。
z 属性用来指定图元在场景中的 Z 序。z 属性的类型是 real，数值越小，图元就越垫底（远离我们）；数值越大，图元就越靠近我们。
虽然 Item 本身不可见，但你可以使用 Item 来分组其他的可视图元。分组后可以通过 Item 的 children 或 visibleChildren 属性来访问子对象元素。

8. QML文件引用另一个QML文件
    onClicked: {
        var component = Qt.createComponent("CountSetPage.qml");        
        if (component.status === Component.Ready) {
            var object = component.createObject(iotMainPage, {x:100, y:50,                                          width:400, height:320})
            // 4.使用connect连接信号槽
            object.clickBtnOk.connect(recvName2Date);
        }
    } 

9. Loader的大小行为
Loader 和其他任何可见的页面一样，必须对其进行位置和大小的设置，这样它才能成为可见的。

如果没有明确指定 Loader 的大小，那么 Loader 将会在组件加载完成后自动设置为组件的大小，如果通过设置 width 和 height 或者使用锚明确指定了 Loader 的大小和位置，那么被加载的项目将会改变为 Loader 的大小。
————————————————
版权声明：本文为CSDN博主「音视频开发老舅」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_60259116/article/details/129307669

————————————————
版权声明：本文为CSDN博主「音视频开发老舅」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_60259116/article/details/129265884

————————————————
版权声明：本文为CSDN博主「音视频开发老舅」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_60259116/article/details/129265500

————————————————
版权声明：本文为CSDN博主「音视频开发老舅」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_60259116/article/details/129324652
————————————————
版权声明：本文为CSDN博主「令狐掌门」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/yao_hou/article/details/115032268
————————————————
版权声明：本文为CSDN博主「苍穹之跃」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wenxingchen/article/details/128515623