【Qt Quick】QML语法

|本文大概阅读时间6分钟。
|版权说明：原创文章，如需转载，请标明文章出处。

---

一.前言

QML作为Qt Quick的开发语言，简单易学，本文案例部分来源于Qt官方文档，只做小的修改，增加部分注释。

1.基本元素

注释：// 单行注释，/**/多行注释

import 导入模块语句

import QtQuick 2.5

Item： 元素的类型声明块,基础元素对象，所有元素继承于它，相当于容器

Rectangle：矩形元素对象

    Rectangle{
        width: 100
        height: 100
        x:100
        y:100
        border.color: "black"
        border.width: 5
        radius: 5
        color: "red"
        gradient: Gradient{
            GradientStop{position: 0.0;color: "lightsteelblue"}
            GradientStop{position: 1.0;color: "blue"}
        }
    }

Text：文本元素

    Text {
        font.family: "Ubuntu"
        font.pixelSize: 20
        color: "red"
        text: "Text"
    }

Image：图像元素

	Image {
        width: 130
        height: 230 //图像尺寸重新定义
        source: "images/soccer_ball.png" //图片源文件
        fillMode: Image.PreserveAspectFit //显示合适尺寸的大小
    }

MouseArea：鼠标区域

	Rectangle {
          width: 100; height: 100
          color: "green"

          MouseArea {
              anchors.fill: parent
              acceptedButtons: Qt.LeftButton | Qt.RightButton
              onClicked: {
                  if (mouse.button == Qt.RightButton) //右键蓝色
                      parent.color = 'blue';
                  else
                      parent.color = 'red'; //左键红色
              }
          }
      }

	Rectangle {
          id: container
          width: 600; height: 200

          Rectangle {
              id: rect
              width: 50; height: 50
              color: "red"
              opacity: (600.0 - rect.x) / 600 //随着拖拽，透明度发生变化

              MouseArea {
                  anchors.fill: parent
                  drag.target: rect
                  drag.axis: Drag.XAxis //延x轴拖拽
                  drag.minimumX: 0
                  drag.maximumX: container.width - rect.width //定义最大的拖拽长度
              }
          }
      }

2.基本属性

不同元素的都有自己特定的属性，本文只讲述共有的可视化属性。

id:root 元素的属性，不同的元素拥有不同的属性

Geometry（几何属性）

width: height: 元素所占窗口的宽高 x: y: 元素左上角的x轴和y轴坐标

Transformation（翻转）

scale 缩放，通过比例进行（0-1） rotation 旋转，通过角度进行（0-360）

	Rectangle{
        id:rect1
        width: 100
        height: 100
        x:100
        y:100
        border.color: "black"
        border.width: 5
        radius: 5
        color: "red"
        gradient: Gradient{
            GradientStop{position: 0.0;color: "lightsteelblue"}
            GradientStop{position: 1.0;color: "blue"}
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
                rect1.scale -= 0.1 //设置缩放比例
                rect1.rotation += 20 //设置旋转角度
            }
        }
    }

Layout handing（布局操作）

anchors 锚定，锚定其他元素的位置 top、bottom、left、right 上下左右 verticalcenter、horizontalcenter 水平和垂直居中

    Item {
        Rectangle {
            id: pic
            width: 100
            height: 100
            color: "red"
        }
        Text {
            id: label
            anchors.horizontalCenter: pic.horizontalCenter //中心垂直
            anchors.top: pic.bottom //文本的顶部是矩形的底部
            anchors.topMargin: 5 //顶部间距 5
            text: "Lable"
        }
    }

        Rectangle {
            id: pic
            width: 100
            height: 100
            color: "red"
        }
        Text {
            id: label
            anchors.verticalCenter: pic.verticalCenter //水平中心对齐
            anchors.left: pic.right //文本的顶左边是矩形的右边
            anchors.leftMargin: 5 //左边间距 5
            text: "Lable"
        }

Key handing（按键操作）

key、keyNavigation 按键定位属性进行focus焦点操作

		focus: true
        Keys.onLeftPressed: rect1.x -= 5 //rect1为rectangle的id
        Keys.onRightPressed: rect1.x += 5 //按右键向右移动

Visual（可视化）

clip 裁剪，元素边界的绘制 opacity 控制透明度,拖拽部分已讲述 visible 控制元素的显示

        Rectangle {
            id: pic
            width: 100
            height: 100
            color: "red"
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    pic2.visible = !pic2.visible //鼠标点击第一个图，第二图消失
                }
            }
        }
        Rectangle {
            id: pic2
            width: 100
            height: 100
            color: "blue"
            anchors.horizontalCenter: pic.horizontalCenter //中心垂直
            anchors.top: pic.bottom //文本的顶部是矩形的底部
            anchors.topMargin: 5 //顶部间距 5

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    pic.opacity -= 0.2 //鼠标点击第二个图，第一图透明度增加
                }
            }
        }

State definition（状态定义）

states 当前元素的状态列表

    Rectangle {
          id: root
          width: 100; height: 100

          state: "red_color"
          states: [
              State {
                  name: "red_color"
                  PropertyChanges { target: root; color: "red" }
              },
              State {
                  name: "blue_color"
                  PropertyChanges { target: root; color: "blue" }
              }
          ]

          MouseArea{
              anchors.fill: parent
              onClicked: { //点击后根据状态进行改变颜色
                  parent.state=(parent.state=="red_color"?"blue_color":"red_color")
              }
          }
      }

---