Qt QML 第五章第三节：核心元素

申徒嘉

已于 2023-11-22 18:18:15 修改

阅读量368

点赞数

分类专栏： Qt 文章标签： qt ui c++

于 2022-11-05 21:39:57 首次发布

Qt 专栏收录该内容

18 篇文章 5 订阅

订阅专栏

核心元素

元素可以分为视觉元素和非视觉元素。视觉元素(如矩形)具有几何形状，通常在屏幕上显示一个区域。非可视化元素(如 Timer)提供通用功能，通常用于操作可视化元素。

目前，我们将集中在基本的视觉元素，如项目，矩形，文本，图像和鼠标区域。但是，通过使用 Qt Quick Controls 2模块，可以创建由标准平台组件(如按钮、标签和滑块)构建的用户界面。

Item Element 项目元素

Item 是所有可视元素的基元素，例如从 Item 继承的所有其他可视元素。它本身并不绘制任何东西，而是定义所有可视元素的共同属性:

Geometry - x和y定义左上角的位置，宽度和高度用于元素的展开，z用于堆叠顺序，将元素从其自然顺序向上或向下提升
Layout handling- 锚(左、右、上、下、垂直和水平中心)相对于具有可选边距的其他元素定位元素。
Key handling - 附加的Key和KeyNavigation属性来控制键处理，以及focus属性来首先启用键处理。
Transformation -缩放和旋转变换和x,y,z变换的通用变换属性列表，以及transformOrigin点。
Visual - 控制透明度、显示/隐藏元素、将绘制操作限制到元素边界、提高渲染质量
State definition -状态列表属性带有受支持的状态列表、当前状态属性和转换列表属性，以使状态更改具有动画效果

为了更好地理解不同的属性，我们将尝试在本章的元素上下文中介绍它们。请记住，这些基本属性在每个可视元素上都是可用的，并且在这些元素之间也是一样的。

提示

Item 元素通常用作其他元素的容器，类似于 HTML 中的 div 元素。

矩形元素

Rectangle扩展 Item 并向其添加填充颜色。此外，它还支持由 border.color 和 border.width 定义的边框。要创建圆角矩形，可以使用radius属性。

Rectangle {
    id: rect1
    x: 12; y: 12
    width: 76; height: 96
    color: "lightsteelblue"
}
Rectangle {
    id: rect2
    x: 112; y: 12
    width: 76; height: 96
    border.color: "lightsteelblue"
    border.width: 4
    radius: 8
}

运行结果：
在这里插入图片描述

有效的颜色值是来自 SVG 颜色名称的颜色(参见 ).您可以以不同的方式在 QML 中提供颜色，但最常见的方式是 RGB 字符串(‘ # FF4444’)或作为颜色名称(例如‘ white’)。

可以使用一些 JavaScript 创建随机颜色:

color: Qt.rgba( Math.random(), Math.random(), Math.random(), 1 )

除了填充颜色和边框，矩形还支持自定义渐变:

Rectangle {
    id: rect1
    x: 12; y: 12
    width: 176; height: 96
    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "slategray" }
    }
    border.color: "slategray"
}

运行结果：
在这里插入图片描述

渐变由一系列渐变止点定义。每个停止有一个位置和颜色。该位置标记 y 轴上的位置(0 = 顶部，1 = 底部)。GradientStop的颜色标记该位置的颜色。

TIP

小费

提示

没有宽度/高度设置的矩形将不可见。当几个矩形的宽度(高度)相互依赖并且在组合逻辑中出现错误时，这种情况经常发生。所以小心点！

提示

不可能创建成角度的梯度。为此，最好使用预定义的图像。一种可能性是仅仅使用渐变旋转矩形，但是要注意旋转矩形的几何形状不会改变，因此会导致混淆，因为元素的几何形状与可见区域不同。从作者的角度来看，在这种情况下最好使用设计好的渐变图像。

文本元素

要显示文本，可以使用 Text 元素。它最值得注意的属性是 string 类型的 text 属性。元素根据给定的文本和使用的字体计算其初始宽度和高度。可以使用字体属性组影响字体(例如 font.family、 font.pixelSize、 …)。要更改文本的颜色，只需使用颜色属性。

Text {
    text: "The quick brown fox"
    color: "#303030"
    font.family: "Ubuntu"
    font.pixelSize: 28
}

在这里插入图片描述

可以使用horizontalAlignment和verticalAlignment属性将文本对齐到每一边和中心。要进一步增强文本呈现，可以使用style和 styleColor 属性，该属性允许以大纲、凸起和凹陷模式呈现文本。

对于较长的文本，您通常希望定义一个中断位置，如 A 非常… 长的文本，这可以通过使用省略号属性来实现。elide 属性允许您将省略位置设置为文本的左侧、右侧或中间。

如果你不希望省略模式的“ …”出现，但仍然希望看到全文，你也可以使用 wrapMode 属性包装文本(只有在显式设置宽度时才有效) :

Text {
    width: 40; height: 120
    text: 'A very long text'
    // '...' shall appear in the middle
    elide: Text.ElideMiddle
    // red sunken text styling
    style: Text.Sunken
    styleColor: '#FF4444'
    // align text to the top
    verticalAlignment: Text.AlignTop
    // only sensible when no elide mode
    // wrapMode: Text.WordWrap
}

Text 元素只显示给定的文本，它所占用的剩余空间是透明的。这意味着它不会呈现任何背景装饰，所以如果需要的话，应该由您来提供合理的背景。

提示

请注意，Text 项的初始宽度取决于所设置的字体和文本字符串。没有宽度设置且没有文本的 Text 元素将不可见，因为初始宽度为0。

提示

通常，当您想要布局 Text 元素时，您需要区分对齐 Text 元素边界框中的文本和对齐元素边界框本身。在前一种情况下，您希望使用卧式对齐和垂直对齐属性，在后一种情况下，您希望操作元素几何图形或使用锚点。

Image Element 图像元素

Image 元素能够以各种格式显示图像(例如 PNG、 JPG、 GIF、 BMP、 WEBP)。有关支持的图像格式的完整列表，请参考 Qt 文档。除了提供图像 URL 的源属性之外，它还包含一个 filMode，用于控制调整大小的行为。

Image {
    x: 12; y: 12
    // width: 72
    // height: 72
    source: "assets/triangle_red.png"
}
Image {
    x: 12+64+12; y: 12
    // width: 72
    height: 72/2
    source: "assets/triangle_red.png"
    fillMode: Image.PreserveAspectCrop
    clip: true
}

在这里插入图片描述

URL 可以是带有正斜杠的本地路径(“./images/home.png” )或网页连结(例如 http://example.org/home.png )。

使用PreserveAspectCrop的图像元素还应该支持剪辑，以避免在 Image 边界之外呈现图像数据。默认情况下禁用剪辑(clip: false)。您需要启用裁剪(clip: true)来将绘制约束为元素的边框。这可以用在任何视觉元素上，但是应该谨慎使用
.

使用 C + + ，您可以使用 QQuickImageProvider 创建自己的图像提供程序。这允许您动态创建图像并使用线程图像加载。

MouseArea Element 鼠标区域元素

为了与这些元素交互，您通常会使用一个 MouseArea。这是一个长方形的不可见项目，您可以在其中捕获鼠标事件。当用户与可视部分交互时，鼠标区域通常与可视项一起使用，以执行命令。

Rectangle {
    id: rect1
    x: 12; y: 12
    width: 76; height: 96
    color: "lightsteelblue"
    MouseArea {
        id: area
        width: parent.width
        height: parent.height
        onClicked: rect2.visible = !rect2.visible
    }
}

Rectangle {
    id: rect2
    x: 112; y: 12
    width: 76; height: 96
    border.color: "lightsteelblue"
    border.width: 4
    radius: 8
}