《Qt MOOC系列教程》第三章第三节：QML基本类型

1. Qt对象

Qt作为QML的类型为其提供了一个全局对象，用于引用Qt中的枚举和函数。如果要使用它，可以直接使用Qt对象调用全局的成员。例如:

import QtQuick 2.0

Text {
    color: Qt.rgba(1, 0, 0, 1)
    text: Qt.md5("hello, world")
}

请参阅有关Qt QML类型的文档，以及其提供的所有内容。

2. Rectangle

Rectangle类型用于用纯色或渐变色填充区域或提供矩形边框。

Rectangle要么使用实线填充颜色(使用color属性指定)，要么使用Gradient类型定义并使用gradient属性设置渐变。如果同时指定了颜色和渐变，则使用渐变。

您可以通过设置border.color和border.width属性，为具有自己的颜色和厚度的矩形添加可选边框。将颜色设置为transparent以绘制没有填充颜色的边框。

您也可以使用radius属性来创建圆角矩形。因为这会给矩形的四角引入曲线边，所以设置Item::antialiasing属性以改善其外观可能是合适的。

示例：

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100
    color: "red"
    border.color: "black"
    border.width: 5
    radius: 10
}

如果你需要的是不规则的形状而不是矩形，请查看Shape类型。我们将在第3.11章中讨论Shape。

3. Image

Image类型用于显示来自source属性中指定的URL的图像。它可以处理Qt支持的URL和图像类型（PNG，JPEG，SVG等）。

图像源可以小于或大于Image的尺寸。使用它的fillMode属性，可以设置在项目内部绘制图像时使用的策略。

默认情况下，从网络资源加载图像是通过单独的线程实现异步的。这样，如果网络缓慢将不会阻塞UI。而对于本地文件默认则是同步加载的，不过您也可以设置asynchronous属性为true来实现异步。如果有不需要立即在UI中显示的大文件，则异步加载会很有用。

要跟踪图像的状态，可以使用Image的progress和status属性。比如把它们绑定到UI中进行可视化。

在QML中使用图像通常是UI中最耗内存的。为了节省内存的使用，它们的大小应与sourceSize属性绑定。sourceSize代表所加载图像的实际宽度和高度，而width和height属性则包含图像将被缩放到的尺寸。

import QtQuick 2.0

Image {
    id: bigImage
    anchors.fill: parent
    asynchronous: true
    onStatusChanged: {
        if (bigImage.status == Image.Ready) console.log("Image loaded")
    }
    source: "bigImage.jpg"
    sourceSize.width: 1024
    sourceSize.height: 1024
}

图像数据在内部进行缓存并共享，因此当使用相同source的对象时，它们将使用相同的数据。

4. BorderImage

BorderImage用于通过缩放或平铺从图像的各个部分形成边界。

BorderImage 将源图像分成9个区域，像这样：

用border属性组来定义区域。将源图像形成的区域按以下方式进行缩放或平铺以创建显示的边界图像:

• 角（区域1、3、7和9）不做缩放处理。
• 区域2和8根据horizontalTileMode进行缩放。
• 区域4和6根据verticalTileMode进行缩放。
• 区域5作为中间区域根据horizontalTileMode和verticalTileMode缩放。

如果TileMode设置为Stretch，则如有需要，图像的各个部分将垂直/水平拉伸。如果将其设置为Repeat，则重复该部分。当边界区域2、4、6、8的宽度/高度不能以目标宽度/高度的精确倍数重复时，可以设置tilemode为BorderImage.Round缩放区域以适合目标。

用法示例：

BorderImage {
    width: 180; height: 180
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Repeat
    verticalTileMode: BorderImage.Repeat
    source: "pics/borderframe.png"
}

5. Text

Text类型可以显示纯文本或富文本（使用HTML标记）。要使用户可以编辑文本，可以使用TextEdit，它与Text非常相似。

import QtQuick 2.0

Text {
    text: "Hello <b>World</b>!"
    font.family: "Helvetica"
    font.pointSize: 24
    color: "red"
}

如果没有显式地设置width和height，Text默认尺寸为文本所占的尺寸。通常显式设置大小不是最优的，因为它会导致布局重新计算，所以只在需要时设置它。

要启用文本换行，需要设置wrapMode属性，否则文本为单行模式。

要自定义字体，可以修改font组属性:

• font.family 选择字体族
• font.pointSize 设置与设备独立的字体大小
• font.pixelSize 设置字体的像素大小

若要设置文本的样式，可使用属性style将样式更改为凸起（Raised）、轮廓（Outline）或凹形（Sunken）。使用styleColor更改添加样式的颜色。

Row {
    Text { font.pointSize: 24; text: "Normal" }
    Text { font.pointSize: 24; text: "Raised"; style: Text.Raised; styleColor: "#AAAAAA" }
    Text { font.pointSize: 24; text: "Outline";style: Text.Outline; styleColor: "green" }
    Text { font.pointSize: 24; text: "Sunken"; style: Text.Sunken; styleColor: "#AAAAAA" }
}

要缩放文字大小，您可以:

• 将font.pixelSize属性绑定到Text。

• 设置fontSizeMode缩放文字大小。

  Rectangle { 
      width: 400
      height: 400
      color: "lightblue" 
      
      Text { 
          x: parent.width * 0.25
          y: parent.height * 0.25 
          
          text: "Qt Quick"
          font {
              family: "Sans"
              pixelSize: parent.width * 0.1
          } 
      } 
  }
  

您还可以使用FontMetrics来使用特定的字体：

Rectangle {

    FontMetrics {
        id: metrics
        font.pointSize: 20
        font.family: "Courier"
    }

    width: 200
    height: metrics.height * 10
    
}

Source

获取更多信息，请关注作者公众号：程序员练兵场