QML学习笔记（七）QML的基本数据类型

前言

在本节中，我们将探索QML的基本数据类型。这些类型将为你的QML应用程序提供底层的支持。如果没有对此有基本的认识，我们是无法继续学习下去的。
此前，我们已经使用过整数来控制窗口的宽度和高度，也简单使用过字符串类型来控制窗口中的文本内容。然而除此之外，QML其实还提供了大量丰富的数据类型，允许我们在代码中使用。例如：颜色、矩形、点、尺寸、数组等等，这些数据类型都类似于QWidget中的实现，我们无需太过担心。
想要完全掌握所有的数据类型，一定是任重而道远的，但没关系，我们可以一点一点，一个一个地学会它。
在此之前，我们先通过帮助文档，看一下它是怎么说的？



帮助文档里列出了这么多基础类型，很多看着就觉得熟悉，只是还不知道具体怎么用。像什么bool布尔值，double小数，整数int，list列表，string字符串这些类型。
在这里，我先建立一个叫做QmlExploringDataTypes的空工程，然后开始学习吧。

一、设置属性

QML中，我们想要创建一个变量的话，需要理解为“为组件新增一个属性”，所以一般来说会解释为设置属性、新增属性。
既然是属性，就必须先给一个叫property的标志，然后再进行具体的类型tyepe和初始化值。
这里我们按照步骤，初始化一系列属性：

	property string     mString:    "https://www.baidu.com/"
    property int        mInt:       45
    property bool       isFemale:   true
    property double     mDouble:    77.5
    property url        mUrl:       "https://www.bilibili.com/"

大部分都没什么好说的，但初学的话建议还是手敲一下。这里初始化赋值的时候不用=，用的是:冒号，这一点和直接给组件设置属性是一样的，比如x:20这种。

二、应用属性

接下来，我们新增一个Rectangle，尝试应用这些值。
代码如下：

	Rectangle{
   
   
        width: 200
        height: 200 + mInt
        anchors.centerIn: parent
        color: "blue"

        Text {
   
   
            id: mTextId
            anchors.centerIn: parent
            text: mString
            font.bold: isFemale ? true : false
        }
    }

运行结果：

代码中，我们首先在高度上应用了int型：
width: 200
height: 200 + mInt
从效果图中可以看到，高度是明显高于宽度的，也就说明这里的赋值能够成功应用上。
然后是文本：
text: mStirng
显然，这串网址也成功显示出来了。看来只要类型相同，就可以进行简单的运算和直接赋值了。
我们再看这一句：font.bold: isFemale ? true : false
首先，font是Text的一个属性，我们可以修改font的子属性来控制字体相关的表现效果，bold正是其中一种，代表是否加粗。
然而我们讨论的是isFemale这种，事实上直接赋值也未尝不可，但这里使用了三元运算符，代表它作为bool类型，是可以像在C++代码中一样进行简单运算的。
虽然图片上不太明显，但我可以告诉你字体确实是加粗了。

三、通用属性类型

可以看到var能帮我们初始化很多类型，其中也包括刚才的int、bool、string（并不推荐）。除此之外，我们可以利用var来设置颜色、矩形、向量、尺寸，甚至可以设置数组，设置由不同内容组成的对象，还可以设置函数。
接下来，我们将这一大段代码复制到我们自己的代码中。
对了，在正式开始应用之前，我们先在Window这个最顶层元素的最下方，插入一段代码：

Component.onCompleted: {
   
   
        console.log("app is running...")
    }

这个东西我们还没有深入了解，我