QML界面的小总结
最近在用QML完成一个展示界面，类似于Photoshop那样的一个界面，用到了许多组件，在这里总结一下遇到的困难和解决方法，方便以后查阅。
想到哪儿就写到哪儿吧，博客的最后附上界面截图。
1、Windows窗口
（1）Window对象的visibility属性用来设置这个窗口的显示状态，可以取下列值：
Window.Windowed，窗口占屏幕的一部分，窗口管理系统支持同时显示多窗口时才有效。
Window.Minimized，最小化到任务栏上的一个图标。
Window.Maximized，最大化，占用任务栏之外的所有屏幕空间，标题栏依然显示。
Window.FullScreen，全屏显示，占用整个屏幕，标题栏隐藏。
Window.AutomaticVisibility，给Window一个默认的显示状态，它的实际值与平台实 现有关。
Window.Hidden，隐藏，窗口不可见，与visible属性的效果一样。资料链接：https://blog.csdn.net/kanchuan1905/article/details/53762788
（2）flag属性
在QT帮助文档里面搜索Qt::WindowFlags可以看到许多窗口的属性，在此不一一列举了
本次界面需要自定义标题栏，并且有最小化按钮，所以主要使用下面的语句：
flags:Qt.FramelessWindowHint |Qt.WindowMinimizeButtonHint |Qt.Window（3）如何拖动窗口
MouseArea {
property point clickPoint: "0,0"
anchors.fill: parent
acceptedButtons: Qt.LeftButton
onPressed: {
clickPoint = Qt.point(mouse.x, mouse.y)
}
onPositionChanged: {
var offset = Qt.point(mouse.x - clickPoint.x, mouse.y - clickPoint.y)
vparentWindow.setX(vparentWindow.x+offset.x);
vparentWindow.setY(vparentWindow.y+offset.y);
}
}（4）如何保证界面在不同分辨率的显示器中都可以完美显示
在Window中定义两个变量如下：
property var nRatioWidth: Screen.desktopAvailableWidth / 1920;
property var nRatioHeight: Screen.desktopAvailableHeight / 1080;在下面定义各组件的位置和大小时，都可以在数字后面乘以nRarioWidth和nRatioHeight
2、Image组件
当图像的大小与组件大小不同时，可以用fillmode决定填充方式，有以下值：
Image.Stretch：图片拉伸自适应；（默认的）
Image.PreserveAspectFit：按比例缩放，不裁剪
Image.PreserveAspectCrop：均匀缩放，必要时裁剪
Image.Tile：像贴瓷砖一样
Image.TileVertically：水平拉伸，垂直平铺
Image.TileHorizontally：垂直拉伸，水平平铺
Image.Pad：原始图像不做处理资料链接：https://blog.csdn.net/qq78442761/article/details/89891547
3、Canvas画布
这个界面只使用了画布画了直线
Canvas{
width: parent.width;
height: parent.height;
onPaint: {
var ctx = getContext("2d");
ctx.strokeStyle="#666666";
ctx.beginPath()
ctx.moveTo(54*nRatioWidth+text1.width,5);
ctx.lineTo(54*nRatioWidth+text1.width,15);
ctx.stroke();
}
}定位画笔的起始点和终止点坐标是相对于画布的位置来说的，而画布左上角的(x,y）就是父组件左上角的(x,y）
之后要求我们能够在图片上进行涂鸦绘图，类似于PS的画笔功能。一开始在绘制的过程中总是停留不住已有的轨迹，卡了我一整天才想出来哪儿不对，具体的相关知识在下面的链接里。
资料链接：https://www.devbean.net/2015/11/qt-study-road-2-qml-canvas-2/
又遇到画笔画拐弯的曲线断裂的问题，解决办法：
资料链接：https://www.cnblogs.com/mysnk/p/6362245.html
4、状态机
这个主要是可以自定义状态，通过状态变化来改变一些属性值，定义如下：
states: [
State{
name: "pressed";
PropertyChanges{
target: vButtonImage;
source: sPressImage;
}
},
State{
name: "hover";
PropertyChanges{
target: vButtonTool;
color: "black";
}
}
]
name为状态名称，target指向需要改变的目标id，然后定义需要改变的属性和值
注意states是一个数组，里面的各个状态之间别忘记使用逗号进行分隔
5、视图、数据、模型、代理
这块内容比较多并且具有一定的逻辑性，待我梳理好再来填上
6、MouseArea
（1）鼠标区域拖拽（drag group）
drag.target : Item
drag.active : bool (read-only)
drag.axis : enumeration //Drag.XAxis或者Drag.YAxis
drag.minimumX : real //x方向可移动距离的最小值
drag.maximumX : real //x方向可移动距离的最大值
drag.minimumY : real
drag.maximumY : real
（2）鼠标区域放大缩小
主要通过改变图像的scale值，可以通过鼠标点击（类似于放大镜）和滚轮实现
这里主要贴一下通过鼠标滚轮实现放大缩小的代码：
onWheel: {
//每次滚动都是120的倍数
var datla = wheel.angleDelta.y/120;
if(datla > 0){
parent.scale = parent.scale/0.9
}
else{
parent.scale = parent.scale*0.9
}
}（3）信号响应事件
除了常用的onClick()、onPressed()、onReleased()、onEntered()、onExited()事件之外，这里主要记录onPositionChanged()
当鼠标位置发生改变时会调用，比如可以用在自定义鼠标样式或者拖动进度条（用来实时计算进度值）时使用，这里就不放具体例子了
（4）鼠标样式
Qt5.6提供的鼠标宏及样式有下面这些：
如果使用上述的鼠标样式只需加上下面的语句：
cursorShape：Qt.ClosedHandCursor如果使用自定义图片的话贴上大佬的代码：
MouseArea{
anchors.fill: parent;
cursorShape：Qt.BlankCursor;
onPositionChanged:{
img.x=mouseX;
img.y=mouseY;
}
}资料链接：https://blog.csdn.net/u014597198/article/details/52597939
7、文件对话框FileDialog
下面这段代码主要是添加文件名到列表中
FileDialog {
id: fileDialog
title: "Please choose a file"
folder: shortcuts.home
//selectMultiple: false; //可以选择是多选还是单选
nameFilters: [ "Image files (*.jpg *.png *.gif *.bmp *.ico)", "All files (*)" ]
onAccepted: {
filepath = new String(fileUrls);
pathList=filepath.split(',');
for(var i=0;i8、Grid布局
之前主要用的都是Column、Row布局，这次用到了Grid布局，贴上部分代码：
Grid{
id:grid;
columns: 2
rows: 2
rowSpacing: 2*nRatioHeight //行与行之间的距离
anchors.left: rect.left;
anchors.top: rect.bottom;
anchors.topMargin: 8*nRatioHeight;
verticalItemAlignment: Grid.AlignVCenter; //每一个网格内内容的布局
Image{
width: 10*nRatioWidth;
height: 10*nRatioHeight;
source: "Image/Circle_default.png"
}
Colorvalue{
itemname:"R:";
bgimg: "Image/Colorvalue.png";
}
Image{
width: 10*nRatioWidth;
height: 10*nRatioHeight;
source: "Image/Circle_default.png"
}
Colorvalue{
itemname:"G:";
bgimg: "Image/Colorvalue.png";
}
}9、定时器Timer
资料链接：
https://www.cnblogs.com/suRimn/p/10178930.html
https://blog.csdn.net/DreamSonGO/article/details/72846409?utm_source=blogxgwz7
11、ListView
资料链接：
https://www.cnblogs.com/SaveDictator/p/8192391.html
10、其他
（1）自定义按钮
（2）自定义下拉列表