矩形 QML 类型

用一个可选的边框绘制填充的矩形。更多...

导入语句	import QtQuick
继承	Item

所有成员列表，包括继承的成员

属性

antialiasing : bool
border
- border.color : color
- border.pixelAligned : bool
- border.width : int
bottomLeftRadius : real (自 6.7)
bottomRightRadius : real (自 6.7)
color : color
gradient : var
radius : real
topLeftRadius : real (自 6.7)
topRightRadius : real (自 6.7)

详细说明

矩形项用于用纯色或渐变填充区域，或提供矩形边框。

外观

每个矩形项要么使用一个固定的填充颜色绘制，该颜色通过 color 属性指定，要么使用一个渐变，该渐变通过渐变类型定义并通过 gradient 属性设置。如果同时指定了颜色和渐变，则使用渐变。

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

您还可以使用 radius 属性创建圆角矩形。由于这会在矩形的角落引入曲线边缘，因此可能需要将 Item::antialiasing 属性设置为改善其外观。要为不同的角落分别设置半径，您可以使用属性 topLeftRadius、topRightRadius、bottomLeftRadius 和 bottomRightRadius。

示例用法

以下示例展示了某些常见属性对矩形元素的影响，在这种情况下，使用这些属性来创建一个正方形。

import QtQuick

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

性能

使用Item::antialiasing属性可以提高圆角矩形的显示效果，但会牺牲渲染性能。对于运动中的矩形，应该考虑不设置此属性，只有当它们处于静止状态时才设置。

另请参阅 Image。

属性文档

antialiasing : bool

用于决定矩形是否使用抗锯齿。关于此属性的性能影响提供了信息。

对于带有圆角的矩形，默认值为true，否则为false。

边框组
border.color : color
border.pixelAligned : bool
border.width : int

用于绘制矩形边框的宽度和颜色。

宽度为1创建细线。对于没有线条，请使用宽度为0或透明颜色。

注意：如果使用锚点，矩形的边框宽度不会影响矩形本身的几何形状或其位置相对于其他元素。

边框将在矩形的边界内绘制。

如果pixelAligned为true（默认值），则在设备像素比缩放后会将渲染边框宽度四舍五入到整数像素数。将pixelAligned设置为false将允许使用分数边框宽度，在启用抗锯齿时可能是所需的。

bottomLeftRadius : real [since 6.7]

此属性包含用于绘制左下角半径的值。

如果没有设置bottomLeftRadius，将使用radius。如果bottomLeftRadius为零，则角将是尖的。

注意：此API被视为技术预览，未来版本的Qt中可能会更改或删除。

此属性自Qt 6.7开始引入。

另请参阅 radius，topLeftRadius，topRightRadius和bottomRightRadius。

bottomRightRadius : real [since 6.7]

此属性包含用于绘制右下角半径的值。

如果没有设置bottomRightRadius，将使用radius。如果bottomRightRadius为零，则角将是尖的。

注意：此API被视为技术预览，未来版本的Qt中可能会更改或删除。

此属性自Qt 6.7开始引入。

另请参阅 radius，topLeftRadius，topRightRadius和bottomLeftRadius。

color : color

此属性包含用于填充矩形的颜色。

默认颜色为白色。

以下示例显示了使用十六进制和颜色名称表示法指定的颜色的矩形。

Rectangle {
    color: "#00B000"
    width: 80; height: 80
}

Rectangle {
    color: "steelblue"
    y: 100; width: 80; height: 80
}

如果同时指定了渐变和颜色，则将使用渐变。

另请参阅 gradient。

gradient : var

用于填充矩形的渐变。

该属性允许构建简单的垂直或水平渐变。通过添加旋转，还可以形成其他渐变。

Rectangle {
    y: 0; width: 80; height: 80
    color: "lightsteelblue"
}

Rectangle {
    y: 100; width: 80; height: 80
    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "blue" }
    }
}

Rectangle {
    y: 200; width: 80; height: 80
    rotation: 90
    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "blue" }
    }
}

此属性还接受来自 QGradient::Preset 的渐变预设。但是请注意，由于矩形仅支持简单的垂直或水平渐变，任何不支持的角度的预设将回退到最接近的表示。

Rectangle {
    y: 0; width: 80; height: 80
    gradient: Gradient.NightFade
}

Rectangle {
    y: 0; width: 80; height: 80
    gradient: "NightFade"
}

如果同时指定了渐变和颜色，则将使用渐变。

另请参阅渐变和颜色。

radius : 实数

此属性保存用于绘制圆角矩形的边角半径。

如果半径不为零，则矩形将被绘制为圆角矩形，否则将按正常矩形绘制。也可以设置单个角的半径（见下文）。这些值会覆盖半径。如果它们未设置（将其设置为 undefined），则使用半径代替。

另请参阅左上角半径、右上角半径、左下角半径和右下角半径。

topLeftRadius : 实数 [since 6.7]

该属性保存用于绘制左上角的半径。

如果未设置 topLeftRadius，则使用 radius。如果 topLeftRadius 为零，则角将尖锐。

注意：此API被视为技术预览，未来版本的Qt中可能会更改或删除。

此属性自Qt 6.7开始引入。

另请参阅radius、右上角半径、左下角半径和右下角半径。

topRightRadius : 实数 [since 6.7]

该属性保存用于绘制右上角的半径。

如果未设置 topRightRadius，则使用 radius。如果 topRightRadius 为零，则角将尖锐。

注意：此API被视为技术预览，未来版本的Qt中可能会更改或删除。

此属性自Qt 6.7开始引入。

另请参阅radius、左上角半径、左下角半径和右下角半径。