QML基础 1 --结构、语法、元素等

QML基础 1

QML文档构成

QML程序的源文件又叫“QML文档”，以“.qml”为文件名后缀,每个QML文档都由两部分构成: import和对象声明。
import部分

此部分导入需要使用的 Qt Quick库,这些库由Qt5提供,包含了用户界面最通用的类和
,如本程序main.qml文件开头的两句:
import QtQuick 2.12 //导入 QT Quick2.12库
import QtQuick.Controls 2.5 //提供了多种组件
导入这些库后,用户就可以在自己编写的程序中访问 Qt Quick所有的QML类型、接口和功能

对象声明

这是一个QML程序代码的主体部分,它以层次化的结构定义了可视场景中将要显示的元素,如矩形、图像、文本及获取用户输入的对象……它们都是 Qt Quick为用户界面开发提供的基本构件。例如, main.qml的对象声明部分:

Window {	
	      //对象
	      visible: true
		  //属性
			width: 640 
			height: 480 
			title: qsTr("Hello World") 
			MainForm{//   子对象
			……
			}
		}

其中包含了两个对象:一个 Window对象和它的子对象 Main Form。

QML基本语法

子对象 MainForm的详细代码在 MainForm.i.qml件中,它也是一个QML文档,在编程设计UI界面时主要使用的就是这个文件。
对象和属性：每个QML文档只有一个根对象，根对象可以有多个子对象，可以层层嵌套 ，属性以键值对“属性：值”的形式给出。例如：MouseArea{}是可以响应鼠标事件的区的对象，Text是文本对象等；
对象标识符
每个对象都可以指定一个唯一的ID 值，方便在其他对象中引用该对象。
属性别名：
使用alias关键字声明属性的别名：“property alias 别名：属性名”，例如：

property alias mouseArea : mouseArea
property alias text：text

目的为了在外部的QML文档能够访问到该属性。

QML可视化元素

QT Quick 预定义了一些基本的可视化元素，自己编程可以直接使用它们来创建程序界面。

Rectangle（矩形）元素

可使用纯色或渐变色来填充；
添加边框、指定颜色和宽度；
设置透明度、可见性、旋转和缩放等效果。

Rectangle{
        id: rectangle_1
        opacity : 0.6 //设置透明度60%
        scale: 0.8   //缩小原尺寸的80%
        rotation:45 //旋转45度
        x : 100
        y : 100
        width :100
        height :100

        radius: 8    //绘制圆角矩形
        gradient: Gradient{
            GradientStop{ position:0.0; color:"aqua"}
            GradientStop{ position:1.0; color:"teal"}
            }
        border{width: 3; color: "blue"}//为矩形添加一个3像素宽的蓝色边框  }

gradient: Gradient{
            GradientStop{ position:0.0; color:"aqua"}
            GradientStop{ position:1.0; color:"teal"}
            }

以垂直方向的渐变色填充矩形，gradient属性要求一个Gradient对象,该对象需要一个 Gradient Stop的列表。可以这样理解渐变：渐变指定在某个位置上必须是某种颜色,这期间的过渡色则由计算而得。 GradientStop对象就是用于这种指定的,它需要两个属性:position和color。前者是一个0.0-1.0的浮点数,说明y轴方向的位置,例如元素的顶部是0.0，底部是1.0，介于顶部和底部之间的位置可以用这样一个浮点数表示,也就是一个比例;后者是这个位置的颜色值,例如上面的 GradientStop{ position: 1.0; color:"teal}说明在从上往下到矩形底部位置范围内都是蓝绿色。

Image(图像)元素

1、 在项目工程目录中建一个文件夹，命名为“24frame”，放入需要的图片；
2、 右击项目视图“资源”->“qml.qrc”下的“/”节点，选择“添加现有文件……”项，从弹出的对话框中选择事先准备好的图片文件并打开，将其加载到项目中。

使用方法：

fillMode: Image.PreserveAspectFit
fillMode 属性设置图片的填充模式，Image.PreserveAspectFit（等比缩放）/Stretch（拉伸）/ PreserveAspectCrop（等比缩放,最大化填充Image，必要时裁剪图片），Image.Tile(水平和垂直两个方向平铺)/TileVertically（垂直平铺）/TileHorizontally（水平平铺）/Pad（保持原样）。
Text（文本）元素
文本元素有很多属性，包括颜色、字体、字号、加粗、倾斜等；还支持富文本显示，文本样式设计、以及长文本省略和换行等功能。

Text {
        id: name
        x:60
        y:100
        color: "green"
        font.pointSize: 24 //设置字号
        font.family: "Helvetica"//设置字体
        horizontalAlignment:Text.AlignLeft //在窗口中左对齐
        verticalAlignment: Text.AlignTop //在窗口中顶端对齐
        text: qsTr("<b>text</b>")//用HTML类型标记定义富文本
    }

自定义元素组件（按钮组件）

常用的是基于文件的组件，将QML元素放置在一个单独的文件中，然后给该文件一个名字，之后便可以根据具体情况拖拽使用该组件。
注意：刚定义好的组件，程序未识别到，得等段时间时间便可以进行拖拽。

import QtQuick 2.0

Rectangle {
    id: btn
    width: 100
    height: 62
    color: "teal"
    border.color: "aqua"
    border.width: 3
    Text {
        id: label
        anchors.centerIn: parent
        font.pointSize: 16
        text: qsTr("开始")
    }
    MouseArea{
        anchors.fill: parent
        onClicked: {
            label.text="被按下"
            label.font.pointSize=11
            btn.color="aqua"
            btn.border.color="teal"
        }
    }
}

相当于像用QML基本元素一样直接使用这个组件。