qml整理

1、属性

//属性
//type可以为var 表示通用类型  也可以为具体类型 如int，long等
[default] property <type> <name> : <value>


//别名
property alias <name> : <reference>

属性可以定义信号

1.2、qml的类型

1. qml类型

类型	说明
bool
double
enumeration
int
list
read	实数
string
url
var
date
point/rect/size

3. js类型 var/Array等js标准类型
4. 对象类型 属性、信号、方法等

2、基本元素

可视元素:需要展示内容 如Text、Image
不可视元素:MouseArea

2.10 ListView

ListView主要使用代理 代理有两个常用属性 index、ListView.isCurrentItem
还可以设置页眉、页脚、元素高亮、添加/移除动画、形变代理(可伸缩树形列表[expanded状态实现])
列表分段(section.property、section.delegate) 类似首字母划分联系人的UI

2.11 PathView路径视图

2.12 支持粒子系统

2.13 支持glsl与qml混编

ShaderEffect将会使用自定义的着色器，能够应用自定义的着色器到它的矩形几何形状， 并且能够使用在着色器中操作资源

ShaderEffectSource可以将一个QML元素渲染为一个纹理然后再渲染这个纹理

2.14 Loader

占位用 动态加载qml文件 可以延迟加载内容
source用于动态加载
sourceComponent用于默认页面
onStatusChanged和onLoaded事件
配合Connections 可以接收qml文件的事件 target为loaderID.item

https://www.cnblogs.com/senior-engineer/p/6666590.html

3、组件

可以编写自定义的组件MyButton.qml 然后在别的qml文件中直接引用<MyButton>组件

https://blog.csdn.net/qq_40194498/article/details/79853776

4、定位器

Row/Column/Grid/Flow/Repeater

anchors属性可以具体定位一个元素 指定left/right/padding/margins等

5、输入

TextInput:单行输入框 支持焦点
TextEdit:富文本编辑区

6、动画

6.1 主要动画

常用动画：
PropertyAnimation（属性动画） - 使用属性值改变播放的动画
NumberAnimation（数字动画） - 使用数字改变播放的动画
ColorAnimation（颜色动画） - 使用颜色改变播放的动画
RotationAnimation（旋转动画） - 使用旋转改变播放的动画

其他动画：
PauseAnimation（停止动画） - 运行暂停一个动画
SequentialAnimation（顺序动画） - 允许动画有序播放
ParallelAnimation（并行动画） - 允许动画同时播放
AnchorAnimation（锚定动画） - 使用锚定改变播放的动画
ParentAnimation（父元素动画） - 使用父对象改变播放的动画
SmotthedAnimation（平滑动画） - 跟踪一个平滑值播放的动画
SpringAnimation（弹簧动画） - 跟踪一个弹簧变换的值播放的动画
PathAnimation（路径动画） - 跟踪一个元素对象的路径的动画
Vector3dAnimation（3D容器动画） - 使用QVector3d值改变播放的动画

动画元素：
PropertyAction（属性动作） - 在播放动画时改变属性
ScriptAction（脚本动作） - 在播放动画时运行脚本

6.2 状态（States）和过渡（Transitions）

qml的元素有state属性 可以自定义状态
transitions属性可以定义from-to 执行对应于state的动画

7、信号和槽

https://blog.csdn.net/gongjianbo1992/article/details/87937804

7.1 系统槽函数

系统信号和槽为on<Signal> Signal需要首字母大写

7.2 自定义信号和槽

//定义
signal signalA([参数])

signalA: {
	//处理函数
}
//触发
root.signalA()

7.3 属性改变信号

qml属性（property）值改变时，会自动触发信号
on<Property>Changed的形式改变 property的首字母必须大写

7.4 附加信号处理程序

Component.onCompleted

7.5 连接任意对象的信号

Connections类型以连接任意对象的信号

Connections{
	//target指定另一个对象作为onClicked的信号
    target: mouse_area
    //在外部连接MouseArea的点击信号
    onClicked:{
        console.log("clicked");
    }
}

7.6 信号到方法/信号的连接

信号可以connect()多个信号/方法

需要注意的是 槽的参数个数不能多于信号定义的个数，且从左至右一一对应

8、c++与qml交互

https://blog.csdn.net/gongjianbo1992/article/details/87965925

qml调用c++

QML可以访问由QObject派生类公开的任何功能
包括:属性(Q_PROPERTY修饰)、方法（需注册为public slots或是标记为Q_INVOKABLE）、信号、Q_ENUMS枚举

注入方式

template<typename T>
int qmlRegisterType(const char *uri, int versionMajor, int versionMinor, const char *qmlName);

template<typename T, int metaObjectRevision>
int qmlRegisterType(const char *uri, int versionMajor, int versionMinor, const char *qmlName);

//main.cpp
//cpp泛型类 需要是QObject子类
//第一个参数  packet_name的作用是在qml中import使用
//第二、三个参数为主副版本号 也是在import使用
//第四个参数表示在qml中的元素名称 首字母必须大写
qmlRegisterType<cpp类泛型>("packet_name", 1, 0, "ModuleName"/*必须大写*/);

//xx.qml
import packet_name 1.0

ModuleName {
id:cpp_obj
}

1. cpp类泛型必须为QObject子类
2. ModuleName必须大写
3. cpp和qml的信号和槽可以直接绑定
4. ModuleName的id cpp_obj相当于cpp类的实例 可以直接调用属性、方法、信号、槽等

c++调用qml
所有QML对象类型都是源自QObject类型
可以使用QQmlComponent或QQuickView加载QML文档
QQmlComponent将qml作为c++对象加载 然后可以使用c++修改对象的内容
QQuickView拥有QQmlComponent的功能 但是继承自QWindow 可以直接展示qml的页面

//使用QQuickView的实例 将qml转换为QQuickItem
QQuickView view(QUrl("qrc:/main.qml")); 
QObject *qmlObj=view.rootObject();
QQuickItem *item=qobject_cast<QQuickItem*>(qmlObj);

//2、使用QQuickItem的实例 可以查找子类、调用qml方法等

9、js与qml交互

使用import可以导入js
qml可以直接调用js方法

参考:

很好的入门教程:https://blog.csdn.net/qq_40194498/category_7580030.html

https://zhuanlan.zhihu.com/TaoQt
https://blog.csdn.net/gongjianbo1992/category_8746723.html
https://blog.csdn.net/foruok/article/details/32698603