qml概述

QML：用户界面的标记语言
是一种用于描述对象如何相互关联的声明式语言。

Projects--> OtherProject--> Qt Quick UI Prototype

property alias限定符：相当于取别名

property alias anotherTimes: thisLabel.times

text: qsTr("text") 文本翻译(国际化)

Text{
    id: thatLabel
    text:"thatLabel"
    focus:!thisLabel.focus;
    keyNavigation.tab: thisLabel
    color: focus? "red":"black"
}

Item 所有视觉元素的基础元素,基础类型是QtObject

几何属性：x，y，z，width，height
布局处理：anchor，margins
键盘处理：Key，KeyNavigation， focus
简单变换：scale，rotate，transform，transformOrigin
视觉：opacity透明度，visible显示隐藏，clip元素边界绘制，smooth增强渲染质量。
状态定义：states

Rectangle 矩形、
Text文本。
MouseArea 不可见的矩形，可以在其中捕获鼠标事件。
Component 组件的可重用元素。 *.qml
(NewFile-->Qt --> QML File--> ClickableImage.qml )
自定义的ClickableImage ，可以当成组件来使用。

//ClickableImage.qml
Image {
    id:root
    signal clicked
    MouseArea {
        anchor.fill: parent
        onClicked: root.clicked()
    }
}
// 引用,使用可复用的组件。
ClickableImage {
    id:qq1
    x:50; y:60
    source: "../images/qq.png"
    onClicked: {
        x += 10;
        rotation += 10;
        scale += 0.1;
    }
}

定位器：Row行，Column列，Grid网格，Flow流

anchor 锚定，用来布局项目。

QML项目：
OtherProject--> QtQuickUi Prototype-->

输入组件：
TextInput 文本输入组件。
KeyNavigation.tab:input2 Tab键切换焦点。
TextEdit 多行文本输入
// 左键点击事件,squre 子组件左移8像素。
Keys.onLeftPressd: square.x -= 8;

动画：
PropertyAnimation 属性动画
x位置，opacity透明度，rotation旋转
NumberAnimator on x{}
RotationAnimator on rotation {}
OpacityAnimator on apacity{}
- SequentialAnimation 顺序动画
- ParallelAnimation 并行动画
- NestedAnimation 嵌套动画

状态和状态的切换：states
eg: 红绿灯的go/stop 状态。
transitions/Transition 可设置状态的切换动画效果。

UI控件