1.基本知识

QML 元素可以有一个id属性,作为该元素的名字。以后我们可以直接用这个名字指代该元素,相当于该元素的指针。需要注意的是,id属性在整个 QML 文档中必须是唯一的。

QML 元素允许嵌套,一个 QML 元素可以没有、可以有一个或多个子元素。子元素可以使用parent关键字访问其父元素。**
分页面式窗口 SwipeView
property int alpha: xxx //声明一个变量
调用函数,使用id eg:在主窗口函数下建立的函数,调用时需要主窗口的id

声明自定义属性的语法是property :
另一个声明属性的方法是使用alias关键字(property alias: ). 该关键字允许我们转发一个属性或者转发一个属性对象本身到另一个作用域(即属性别名). 属性别名不需要类型, 它使用引用的属性类型或者对象类型.

有时候,选择一个组件的根元素很重要。比如我们的Button组件。我们使用Rectangle作为其根元素。Rectangle元素可以设置背景色等。但是,有时候我们并不允许用户设置背景色。所以,我们可以选择使用Item元素作为根。事实上,Item元素作为根元素会更常见一些。

2.qml中信号与槽机制

(1)qml已有的一些信号 直接使用on的信号处理程序
(2)这里介绍自定义信号

  1. 1. import QtQuick 2.9
  2. 2. import QtQuick.Window 2.2
  3. 3.
  4. 4. Window {
  5. 5. id:root
  6. 6. visible: true
  7. 7. width: 640
  8. 8. height: 480
  9. 9. title: qsTr("Hello World")
  10. 10.
  11. 11. Rectangle{
  12. 12. id:rect
  13. 13. anchors.fill: parent
  14. 14. color: "green"
  15. 15. //自定义属性
  16. 16. property int click_counts: 0
  17. 17. //自定义信号 使用signal关键字--无参信号可以省略括号
  18. 18. signal signalA
  19. 19. signal signalB(string str,int value)
  20. 20.
  21. 21. MouseArea {
  22. 22. anchors.fill: parent
  23. 23. onClicked: {
  24. 24. //按键点击,计数加一
  25. 25. rect.click_counts++;
  26. 26. //以调用函数的形式来触发信号
  27. 27. rect.signalB("signal counts",rect.click_counts);
  28. 28. if(rect.click_counts%5===0){
  29. 29. rect.signalA(); //点击五次触发
  30. 30. }
  31. 31. }
  32. 32. }
  33. 33. //信号处理函数
  34. 34. onSignalA: {
  35. 35. console.log("click 5");
  36. 36. }
  37. 37. onSignalB: {
  38. 38. //可以直接使用形参变量名
  39. 39. console.log(str,value);
  40. 40. }
  41. 41. }
  42. 42. }


使用signal关键字定义信号时小写

on+signal signal首字母大写
**

(3)另一种触发信号的方法 (
每一个属性都可以发出信号**,因而都可以关联信号处理函数。这个处理函数将在属性值变化时调用。这种值变化的信号槽命名为 on + 属性名 + Changed,其中属性名要首字母大写。
当属性值改变时,会发出信号,调用槽函数。
(4)附加信号处理
附加属性的语法格式为:.
附加信号处理程序的语法格式为:.on
//附加属性
Keys.enabled: true
//附加信号处理程序
Keys.onPressed: {
if(event.key===Qt.Key_0)
console.log(“key 0 pressed”);
}
(5)连接任意
对象的信号
QtQuick模块提供Connections类型以连接任意对象的信号。一个Connections对象可以接收来自它的指定目标(target)的任何信号。
MouseArea {
id:mouse_area
anchors.fill: parent
}
Connections{
target: mouse_area
//在外部连接MouseArea的点击信号
onClicked:{
console.log(“clicked”); //执行功能
}
(6)连接任意
方法/信号的信号
当信号连接到方法时,无论何时发出信号,都会自动调用该方法or发信号。该机制使得能够通过方法而不是信号处理器来接收信号。
可以一个信号connect()多个方法,并且可以对动态创建的对象使用connect(),也可以使用disconnect()方法来取消关联。
Component.onCompleted: {
//信号—方法
rect.signalA.connect(methodA)
//信号—信号
rect.signalA.connect(rect.signalB)
rect.signalB.connect(methodB)
rect.signalB.connect(methodC)
}*

附:如何寻找感兴趣的信号
https://blog.csdn.net/foruok/article/details/30028711

3.一些通用属性

布局 anchors(具有 left、right、top、bottom、vertical 和 horizontal center 等属性)用于定位元素相对于其它元素的margins的位置。
键盘处理 KeyKeyNavigation属性用于控制键盘;focus属性则用于启用键盘处理,也就是获取焦点。
可视化 opacity属性用于控制透明度;visible属性用于控制显示/隐藏元素;clip属性用于剪切元素;smooth属性用于增强渲染质量。
状态定义 提供一个由状态组成的列表states和当前状态state属性;同时还有一个transitions列表,用于设置状态切换时的动画效果。


QML 可以由这些基本元素组合成一个复杂的元素,方便以后我们的重用。这种组合元素就被称为组件。组件就是一种可重用的元素,比如我们常常会用到基于文件的组件。
基于文件的组件将 QML 元素放置在一个单独的文件(.qml)中,然后给这个文件一个名字。以后我们就可以通过这个名字来使用这个组件。(与main.qml在同一目录下无需其他操作,可直接使用)
eg: QGCToolBarbutton**

anchors.fill:parent, 是在子控件的大小设置与父控件大小一样,特别是mouseArea中经常使用anchors.fill:parent,这是为了指定鼠标事件接受的范围。如果是两个矩形控件,颜色不同,那么子控件会完全覆盖父控件,全是子控件的颜色显示。 还有一点,就是parent是指父类,直接相关的父类。anchors.fill指定的父类是必须是直接的父类,如果不是,会报错的。