Rectangle QML Type
绘制带边框的填充矩形。更多
Import Statement: | import QtQuick |
Inherits: |
属性
- antialiasing : bool
- border
- border.color : color
- border.pixelAligned : bool
- border.width : int
- bottomLeftRadius : real
(since 6.7)
- bottomRightRadius : real
(since 6.7)
- color : color
- gradient : var
- radius : real
- topLeftRadius : real
(since 6.7)
- topRightRadius : real
(since 6.7)
详细说明
矩形项用于用纯色或渐变填充区域,和/或提供矩形边框。
外观
每个矩形项都使用color 属性指定的纯色填充,或使用梯度类型定义并使用gradient 属性设置的梯度填充。如果同时指定了颜色和渐变,则使用渐变。
通过设置border.color 和border.width 属性,可以为矩形添加可选的边框,边框有自己的颜色和厚度。将颜色设置为 "透明",可绘制无填充色的边框。
您还可以使用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 |
用于决定矩形是否应使用抗锯齿。Antialiasing提供了有关此属性对性能影响的信息。
有半径的矩形默认为 true,否则为 false。
用于绘制矩形边框的宽度和颜色。
宽度为 1 时会创建一条细线。宽度为 0 或透明色则无线条。
注意: 如果使用锚点,矩形边框的宽度不会影响矩形本身的几何形状或与其他项目的相对位置。
边框将在矩形的边界内呈现。
如果pixelAligned
为true
(默认值),则在按设备像素比例缩放后,渲染的边框宽度将四舍五入为整数像素。将pixelAligned
设置为false
将允许使用小数边框宽度,这在启用antialiasing
时可能比较理想。
bottomLeftRadius : real |
该属性保存用于绘制左下角的半径。
如果未设置 bottomLeftRadius,则将使用radius 代替。如果 bottomLeftRadius 为零,则左下角将是锐角。
注意: 此 API 被视为技术预览版,可能会在未来的 Qt 版本中更改或删除。
此属性在 Qt 6.7 中引入。
另请参阅 radius,topLeftRadius,topRightRadius, 和bottomRightRadius 。
bottomRightRadius : real |
该属性保存用于绘制右下角的半径。
如果未设置 bottomRightRadius,则将使用radius 代替。如果 bottomRightRadius 为零,该角将是锐角。
注意: 此 API 被视为技术预览版,可能会在未来的 Qt 版本中更改或删除。
此属性在 Qt 6.7 中引入。
另请参阅 radius,topLeftRadius,topRightRadius, 和bottomLeftRadius 。
color : color |
gradient : var |
用于填充矩形的渐变色。
使用该属性可以构建简单的垂直或水平渐变。其他渐变可通过在矩形中添加旋转来形成。
Rectangle { width: 80; height: 80 color: "lightsteelblue" } Rectangle { width: 80; height: 80 gradient: Gradient { GradientStop { position: 0.0; color: "lightsteelblue" } GradientStop { position: 1.0; color: "blue" } } } Rectangle { width: 80; height: 80 gradient: Gradient { orientation: Gradient.Horizontal GradientStop { position: 0.0; color: "lightsteelblue" } GradientStop { position: 1.0; color: "blue" } } } Rectangle { width: 80; height: 80 rotation: 90 gradient: Gradient { GradientStop { position: 0.0; color: "lightsteelblue" } GradientStop { position: 1.0; color: "blue" } } }
该属性也接受来自QGradient::Preset 的渐变预设。但请注意,由于矩形只支持简单的垂直或水平渐变,任何不支持角度的预设都将还原为最接近的表示。
Rectangle { width: 80; height: 80 gradient: Gradient.NightFade } Rectangle { width: 80; height: 80 gradient: "SunnyMorning" }
如果同时指定了渐变和颜色,则将使用渐变。
radius : real |
该属性保存用于绘制圆角矩形的角半径。
如果半径不为零,矩形将绘制为圆角矩形,否则将绘制为普通矩形。也可以设置单个角半径(见下文)。这些值将覆盖半径。如果未设置(将其设置为undefined
),则将使用半径代替。
另请参阅 topLeftRadius,topRightRadius,bottomLeftRadius, 和bottomRightRadius 。
topLeftRadius : real |
该属性保存用于绘制左上角的半径。
如果未设置 topLeftRadius,则将使用radius 代替。如果 topLeftRadius 为零,则角将是锐角。
注意: 此 API 被视为技术预览版,可能会在未来的 Qt 版本中更改或删除。
此属性在 Qt 6.7 中引入。
另请参阅 radius,topRightRadius,bottomLeftRadius, 和bottomRightRadius 。
topRightRadius : real |
该属性保存用于绘制右上角的半径。
如果未设置 topRightRadius,则将使用radius 代替。如果 topRightRadius 为零,则将使用锐角。
注意: 此 API 被视为技术预览版,可能会在未来的 Qt 版本中更改或删除。
此属性在 Qt 6.7 中引入。
另请参阅 radius,topLeftRadius,bottomLeftRadius, 和bottomRightRadius 。
© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.