QML学习一

import QtQuick 2.12 //import 声明导入了一个指定的模块版本
import QtQuick.Window 2.12
Window
{
    id:testA 
    visible:true//是否可见
    height:200//高度
    width:height * 2//宽度
    title: qsTr("Hello World")//标题
    property int times:15//自定义属性
}

语法

使用// 可以进行单行注释  /**/可以进行多行注释
注意点
①每一个qml文件都需要一个根元素
②一个元素使用它的类型声明，然后使用{}进行包含
③元素拥有属性，他们按照name:value的格式来赋值
④任何在QML文档中的元素都可以使用它们的id进行访问（id是一个任意
的标识符)
⑤元素可以嵌套 一个父元素可以拥有多个子元素 子元素可以通过关键字parent来访问它们的父元素

⑥单行键值对的结尾可加可不加;  若是多个键值对在一行 则需要使用; 分开 x:10;y:10

属性

元素使用它们的元素类型名进行声明，使用它们的属性或者创建自定义属性来定义。一个属性对应一个值 例如 height:200  

属性绑定 一个属性依赖于其他的一个或者多个属性  参见上方中的width属性

添加自己定义的属性需要使用property修饰符 参见上方的time属性

基本元素

基础元素对象（Item Element）

元素可以被分为可视化元素与不可视化元素。一个可视化元素（例如矩形框Rectangle）有着几何形状并且可以在屏幕上显示。一个不可视化元素（例如计时器Timer）提供了常用的功能，通常用于操作可视化元素。

可视化元素共有的属性：

Geometry（几何属性）   x,y（坐标）定义了元素左上角的位置，width，height（宽和宽）定义元素的显示范围，z（堆叠次序）定义元素之间的重叠顺序。Layouthandling（布局操作）  anchors（锚定），包括左（left），右（right），上（top），下（bottom），水平与垂直居中（verticalcenter，horizontal center），与margins（间距）一起定义了元素与其它元素之间的位置关系。

Key handlikng（按键操作） 附加属性key（按键）和keyNavigation（按键定位）属性来控制按键操作，处理输入焦点（focus）可用操作。

Transformation（转换） 缩放（scale）和rotate（旋转）转换，通用的x,y,z属性列表转换（transform），旋转基点设置（transformOrigin）。

Visual（可视化）不透明度（opacity）控制透明度，visible（是否可见）控制元素是否显示，clip（裁剪）用来限制元素边界的绘制，smooth（平滑）用来提高渲染质量。

State definition（状态定义） states（状态列表属性）提供了元素当前所支持的状态列表，当前属性的改变也可以使用transitions（转变）属性列表来定义状态转变动画。

注意：Item（基本元素对象）通常被用来作为其它元素的容器使用（类似于Qt中的QWidget ？？？）。

其他基本元素

Rectangle （矩形框元素）

    Rectangle
    {
       id:rect1 //id名
       width:parent.width/2;//父对象宽度的一半
       height:parent.height/2//父对象高度的一半
       x:parent.width/2-width/2  //水平居中
       y:parent.height/2-height/2  //垂直居中
     color: "#00B000"//背景色
    }

Text（文本元素）

    Text {
        text: "Hello World!"//文字内容
        font.family: "Helvetica"//字体
        font.pointSize: 24//字体大小
        color: "red"//字体颜色
        x:rect1.x+10
        y:rect1.y+10//字体所在位置
        id:text1
    }

Image 图像元素

    Image {
    x: 12;
    y: 12
    width: 48
    height: 118
    source: "assets/rocket.png"
    }
    Image
    {
    x: 112
    y: 12
    width: 48
    height: 118/2
    source: "assets/rocket.png"
    fillMode: Image.PreserveAspectCrop
    clip: true
    }

  鼠标区域元素

为了与不同的元素交互，你通常需要使用MouseArea（鼠标区域）元素。这是一个矩形的非可视化元素对象，你可以通过它来捕捉鼠标事件。当用户与可视化端口交互时，mouseArea通常被用来与可视化元素对象一起执行命令。
 

import QtQuick 2.12
import QtQuick.Window 2.12

Window{
    id:testA
    visible:true
   width:100
   height:200
    title: qsTr("Hello World")
    Rectangle
    {
         id:rect1
       width:parent.width/2;
       height:parent.height/2
       x:parent.width/2-width/2
       y:parent.height/2-height/2
     color: "#00B000"
    }
    Text {
        text: "Hello World!"
        font.family: "Helvetica"
        font.pointSize: 24
        color: "red"
        x:rect1.x+10
        y:rect1.y+10
        id:text1
    }
    MouseArea
    {
     anchors.fill: parent;//可点击区域就是父对象的大小 此处是Window
     id:windowArea
     acceptedButtons: Qt.LeftButton| Qt.RightButton;//处理鼠标左键和右键
     onReleased://鼠标松开 改变文字
     {
        text1.text =  "Released Button"
     }
     onPressed://鼠标按下
     {
         if(mouse.button == Qt. LeftButton){
                     text1.text =  "Left Button"
                     }
        else if(mouse.button == Qt.RightButton){
                        text1.text =  "Right Button"
                     }
     }
    }
}

组件

一个组件是一个可以重复使用的元素。一个组件就是一个基础组件。一个以组件为基础的组件在组件中创建了一个QML元素，并且将组件以元素类型来命名（例如Button.qml）。

定义组件的文件首字母要大写

import QtQuick 2.0

Rectangle
{
     id:rect1
   width:parent.width/2;
   height:parent.height/2
   x:parent.width/2-width/2
   y:parent.height/2-height/2
 color: "#00ff00"
  property alias text: text1.text//将属性导出给外部使用
 Text {
     text: "Hello QML!"
     font.family: "Helvetica"
     font.pointSize: 24
     color: "yellow"
     x:rect1.x+10
     y:rect1.y+10
     id:text1
 }
}

property alias text: text1.text//将 属性导出给外部使用 text属性名绑定的是text1的text属性

以上文件命名为 FRect.qml

引用此qml文件

import QtQuick 2.12
import QtQuick.Window 2.12

Window{
    id:testA
    visible:true
   width:100
   height:200
    title: qsTr("Hello World")
     FRect
     {
       visible: true
     }
}

如上图 引用元素名称和qml文件名保持一致即可。且是大写字母开头。

bug 

使用Qt Creator编写qml程序的时候。发现有时候qml程序发生改动了之后。且进行了编译之后并没有效果。解决办法：
在.pro文件中添加这行：UI_DIR=./UI