基本元素(Basic Elements)
元素可以被分为可视化元素与非可视化元素。一个可视化元素(例如矩形框Rectangle)有着几何形状并且可以在屏幕上显示。 一个非可视化元素(例如计时器Timer) 提供了常用的功能, 通常用于操作可视化元素。
现在我们将专注于几个基础的可视化元素, 例如Item(基础元素对象),Rectangle(矩形框),Text( 文本), Image(图像) 和MouseArea(鼠标区域) 。
基础元素对象(Item Element)
Item( 基础元素对象) 是所有可视化元素的基础对象, 所有其它的可视化元素都继承自Item。 它自身不会有任何绘制操作, 但是定义了所有可视化元素共有的属性:
Group( 分组) | Properties( 属性) |
---|---|
Geometry (几何属性) | x,y(坐标) 定义了元素左上角的位置, width,height(长和宽) 定义元素的显示范围, z(堆叠次序)定义元素之间的重叠顺序。 |
Layout handling(布局操作) | anchors(锚定),包括左(left),右(right),上(top),下(bottom),水平与垂直居中(vertical center, horizontal center),与margins(间距)一起定义了元素与其它元素之间的位置关系。 |
Key handlikng (按键操作) | 附加属性key(按键)和keyNavigation(按键定位)属性来控制按键操作,处理输入焦点(focus)可用操作。 |
Transformation (转换) | 缩放(scale)和rotate(旋转) 转换,通用的x,y,z属性列表转换(transform),旋转基点设置(transformOrigin) 。 |
Visual(可视化) | 不透明度(opacity)控制透明度,visible(是否可见)控制元素是否显示,clip(裁剪)用来限制元素边界的绘制, smooth(平滑) 用来提高渲染质量。 |
State definition (状态定义) | states(状态列表属性) 提供了元素当前所支持的状态列表, 当前属性的改变也可以使用transitions(转变) 属性列表来定义状态转变动画。 |
矩形框元素(Rectangle Element)
Rectangle(矩形框) 是基本元素对象的一个扩展, 增加了一个颜色来填充它。 它还支持边界的定义, 使用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 // 圆角
}
Rectangle {
id: rect3
x: 12; y: 110
width: 176; height: 96
gradient: Gradient {
GradientStop { position: 0.0; color: "lightsteelblue" }
GradientStop { position: 1.0; color: "slategray" }
}
border.color: "slategray"
}
效果图:
图像元素( Image Element)
一个图像元素( Image Element) 能够显示不同格式的图像( 例如PNG,JPG,GIF,BMP) 。 想要知道更加详细的图像格式支持信息, 可以查看Qt的相关文档。 source属性( source property) 提供了图像文件的链接信息, fillMode( 文件模式) 属性能够控制元素对象的大小调整行为。
Image {
x: 50; y: 60
source: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1739514725,2209449237&fm=26&gp=0.jpg"
}
Image {
x: 112; y: 12
width: 48
height: 118/2
source: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1739514725,2209449237&fm=26&gp=0.jpg"
// fillMode: Image.PreserveAspectCrop
clip: true
}
Image {
x: 50; y: 200
width: 48
height: 118/2
source: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1739514725,2209449237&fm=26&gp=0.jpg"
fillMode: Image.PreserveAspectCrop
clip: false
}
效果图(红色白框手动框选,为了凸显):
图像元素(Image element) 使用PreserveAspectCrop可以避免裁剪图像数据被渲染到图像边界外。 默认情况下裁剪是被禁用的(clip:false) 。 你需要打开裁剪(clip:true) 来约束边界矩形的绘制。 这对任何可视化元素都是有效的。