QtQuick 基础教程 第二课: QML类型系统

基本类型

类型	描述
int	整型
bool	布尔值
real	单精度浮点数
double	双精度浮点数
string	字符串
url	资源定位符
list	QML对象列表
var	通用属性类型
enumeration	枚举值

类型	描述
color	ARGB颜色值，可以用多种方法表示
font	QFont的QML类型，包含了QFont的属性值
matrix4x4	一个4行4列的矩阵
quaternion	一个四元数，包含一个标量以及x,y和z属性
vector2d	二维向量,包含x，y属性
vector3d	三维向量,包含x,y,z属性
vector4d	四维向量,包含x,y,z,w属性
date	日期值
point	点值,x，y属性
size	大小值，width，height属性
rect	矩形值，x，y，width，height属性

Qt全局对象提供的函数操作基本类型

    string atob(data)
    binding(function)
    string btoa(data)
    callLater(function, argument1, argument2, ...)
    callLater(function)
    color colorEqual(color lhs, string rhs)
    object createComponent(url, mode, parent)
    object createQmlObject(string qml, object parent, string filepath)
    color darker(color baseColor, real factor)
    exit(int retCode)
    font font(object fontSpecifier)
    list<string> fontFamilies()
    string formatDate(datetime date, variant format, variant localeFormatOption)
    string formatDateTime(datetime dateTime, variant format, variant localeFormatOption)
    string formatTime(datetime time, variant format, variant localeFormatOption)
    color hsla(real hue, real saturation, real lightness, real alpha)
    color hsva(real hue, real saturation, real value, real alpha)
    bool isQtObject(object)
    color lighter(color baseColor, real factor)
    locale(name)
    string md5(data)
    matrix4x4 matrix4x4(real m11, real m12, real m13, real m14, real m21, real m22, real m23, real m24, real m31, real m32, real m33, real m34, real m41, real m42, real m43, real m44)
    bool openUrlExternally(url target)
    point point(real x, real y)
    string qsTr(string sourceText, string disambiguation, int n)
    string qsTrId(string id, int n)
    string qsTrIdNoOp(string id)
    string qsTrNoOp(string sourceText, string disambiguation)
    string qsTranslate(string context, string sourceText, string disambiguation, int n)
    string qsTranslateNoOp(string context, string sourceText, string disambiguation)
    quaternion quaternion(real scalar, real x, real y, real z)
    quit()
    rect rect(real x, real y, real width, real height)
    url resolvedUrl(url url)
    color rgba(real red, real green, real blue, real alpha)
    size size(real width, real height)
    color tint(color baseColor, color tintColor)
    vector2d vector2d(real x, real y)
    vector3d vector3d(real x, real y, real z)
    vector4d vector4d(real x, real y, real z, real w)

对象特性

一个QML文档可以包含如下特性:

id特性

每一个Qml对象都可以指定一个唯一的id，就可以在其他对象中识别并引用该对象。

注意:id值必须使用小写字母或者下划线开头，并且不能使用字母，数字和下划线以外的字符。

import QtQuick 2.12

Item {
  Rectangle {
  anchors.fill: parent 
    color: "gray"
    Column 
    {
      anchors.fill: parent
      Text { 
        id: text1 
        text: "GrayCatQt"
      }
      
      Text {
        // 将id:text1的text绑定到这个Text
        text: text1.text
      }
    }
  }
}

属性(property)特性

属性是对象的一个特性，可以分配一个静态的值，也可以绑定一个动态表达式。属性的值可以被其他对象读取。

import QtQuick 2.12
import QtQml 2.12

Rectangle {
    id: root

    // 使用下面语法定义一个属性
    // [default] property <propertyType> <propertyName>: <value>
    property color defaultColor: "red" // 定义一个属性并赋初值

    // var 是一种万能类型
    property var varNumber: 1.0
    property var varString: "abc"
    property var varBool: false
    property var varList: [1, 2, "qt", true]
    property var varObject: Item { width: 100; height: 100 }

    // QML对象类型也可以作为一个属性类型
    property Item defaultItem

    /*
        列表类型属性
        [default] property list <<objectType>> <propertyName>: <value>
    */
    property list <QtObject> defaultListObject: [
        QtObject { objectName: "object0" },
        QtObject { objectName: "object1" },
        QtObject { objectName: "object2" }
    ]

    /*
        属性别名: 与普通的属性定义不同
        属性别名不需要分配一个新的唯一的存储空间，
        而是将新声明的属性(称为别名属性)作为一个已经存在的属性(被别名的属性)的直接引用
        [default] property alias <name>: <alias reference>
    */
    property alias defaultObjectName: objectN

    Item {
        id: objectN
    }

    /*
        默认属性
        对象定义可以有一个默认属性，默认属性至多有一个。
    */
    default property var defaultNumber


    /*
        只读属性
        readonly property <propertyType> <propertyName>: <initialValue>
    */
    readonly property int defaultId: 10 // 只读属性需要给定初值，或给定属性绑定


    property int defaultWidth: 400

    width: defaultWidth
    height: { width - 100 } // 绑定表达式初始化


    color: defaultColor // 鼎泰绑定自定义颜色属性

    /*
        声明一个自定义的属性，则会隐的为该属性创建一个值改变信号，以及一个信号处理器
        on<PropertyName>Changed
        并且自定义的属性或原生属性首字母要大写，才能使用信号处理器
    */
    onDefaultColorChanged: {
        console.log("defaultColor: " + root.defaultColor)
    }

    Component.onCompleted: {
        timer.start();
    }

    function testClass() {
        root.defaultColor = "gray"
        root.defaultWidth = 500

        console.log("root objectName: " + root.objectName)
        root.objectName = "rootName1"
        console.log("root objectName: " + root.objectName)

        // 打印列表类型里定义的对象名
        for(let i = 0; i < root.defaultListObject.length; i++)
        {
            console.log("listObjectname: " + root.defaultListObject[i].objectName)
        }
    }

    Timer {
        id: timer
        interval: 1000
        onTriggered: {
            testClass()
        }
    }

}
    

信号(signal)特性与信号处理器(signal handler)特性

QML对象声明时定义一个信号,并且同一个作用域中不能有两个同名的信号或方法，但是新的信号可以重用已有信号的名字。

import QtQuick 2.12


Item {
  id: root
  
  //signal <signalName> [([ <type> <parameterName>[, ...] ])] 信号定义
  
  // 无参数，可以省略括号
  signal defaultSignal
  signal defaultSignal1()
  signal defaultSignal1(string test)
  
  //on<Signal> 信号处理器，信号首字母大写
  
  onDefaultSignal: {
    console.log("root defaultSignal")
  }
  
  onDefaultSignal1: {
    console.log("root defaultSignal1")
  }
  
  onDefaultSignal1: {
    console.log("root defaultSignal1: " + test)
  }
  
  // Connections对象可以接收指定目标(target)的任意信号。
  Item {
    anchors.fill: parent 
    
    Connections {
      target: root 
      onDefaultSignal: {
        console.log("test defaultSignal")
      }
    }
  }
  
  function testClass()
  {
    root.defaultSignal()
    root.defaultSignal1()
    root.defaultSignal1("test")
  }
  
  Timer {
    id: timer
    interval: 1000
    onTriggered: {
      testClass()
    }
  }
  
  
  function testSignalConnect()
  {
    console.log("testSignalConnect")
  }
  Component.onCompleted: {
      root.defaultSignal.connect(testSignalConnect); // 连接信号与槽
      root.defaultSignal()
      root.defaultSignal.disconnect(testSignalConnect); // 断开信号与槽
  }
}

方法(method)特性

QML的方法可以用于定义相对独立的，可重用的JavaScript代码块，这些方法可以在内部调用，也可以被外部对象调用。方法的参数类型不需要明确指定，因为默认情况下这些参数都是var类型的。

import QtQuick 2.12

Item {
  id: root 
  
  function testClass()
  {
    return "testClass";
  }
  
  function testClass(str)
  {
    return "testClass: " + str;
  }
  
    Component.onCompleted: {
      root.testClass()
      root.testClass("Name")
  }
}

附加属性(attached properties)和附加信号处理器(attached signal handler)特性

附加属性和附加信号处理器是一种允许对象使用额外的属性或信号处理器的机制。

import QtQuick 2.12

Item {
    //anchors.fill: parent
    /*
      附加属性
    */
    ListView {
        anchors.fill: parent
        //width: 240; height: 320
        model: 4
        spacing: 10
        delegate: Item {
            width: 100; height: 30
            Rectangle {
                width: 100; height: 30
                // 附加属性
                color: ListView.isCurrentIndex ? "red" : "yellow"
            }
        }

        currentIndex: 1
    }

    /*
      附加信号处理器
      <ArrachingType>.on<SignalName>
    */
    Component.onCompleted: {
      console.log("Attached test component")
    }
  }

枚举(enumeration)特性

枚举(Enumeration)提供了一组固定的命名选择,可以在QML中通过enum关键字来声明。

// EnumTextClass.qml

import QtQuick 2.12

Item {
  id: root 
  
  enum ItemState {
    OK,
    NO
  }
  
  property int itemState: EnumTextClass.NO
  
  Component.onCompleted: {
    console.log("itemState: " + root.itemState)
    root.itemState = EnumTextClass.OK
    console.log("itemState: " + root.itemState)
  }
}