Qt Quick 示例 - 图像元素
本页面汇集了与图像类型相关的 QML 示例。
“图像元素”是一组与图像类型相关的小型 QML 示例。如需了解更多信息，请访问“用例 - QML 中的视觉元素”。
运行示例
您可以通过以下方式运行示例：
- Qt Creator
打开Welcome 模式，并从Examples 中选择该示例。如需了解更多信息，请参阅Qt Creator ：教程：构建与运行。
- Qt Extension for Visual Studio Code
在“Command Palette ”中运行Qt: Open Qt examples 命令，并从列表中选择该示例。有关更多信息，请参阅Qt Extension for Visual Studio Code ：教程：构建和运行。
使用 BorderImage 进行缩放
BorderImage通过设置其 horizontalTileMode 和 verticalTileMode 属性，展示了BorderImage 类型的各种缩放模式。
图像填充
“图像”演示了Image 类型的各种填充模式。
阴影效果
“阴影”演示了如何使用BorderImage 为矩形项目创建投影效果：
BorderImage {
anchors.fill: rectangle
anchors {
leftMargin: -6
topMargin: -6
rightMargin: -8
bottomMargin: -8
}
border {
left: 10
top: 10
right: 10
bottom: 10
}
source: "pics/shadow.png"
}使用 AnimatedSprite 实现精灵动画
AnimatedSprite演示了如何使用AnimatedSprite 对象显示一个简单的动画：
AnimatedSprite {
id: sprite
anchors.centerIn: parent
source: "pics/speaker.png"
frameCount: 60
frameSync: true
frameWidth: 170
frameHeight: 170
loops: 3
}该精灵动画将循环播放三次。
使用 SpriteSequence 实现精灵动画
SpriteSequence演示了如何使用精灵序列绘制一只会动且可交互的小熊。SpriteSequence 对象定义了五个不同的精灵。小熊初始处于静止状态：
Sprite {
name: "still"
source: "pics/BearSheet.png"
frameCount: 1
frameWidth: 256
frameHeight: 256
frameDuration: 100
to: {"still":1, "blink":0.1, "floating":0}
}当点击场景时，动画会将精灵序列切换至下落状态，并驱动小熊的 y 属性发生变化。
SequentialAnimation {
id: anim
ScriptAction { script: image.goalSprite = "falling" }
NumberAnimation {
target: image
property: "y"
to: 480
duration: 12000
}
ScriptAction {
script: {
image.goalSprite = ""
image.jumpTo("still")
}
}
PropertyAction {
target: image
property: "y"
value: 0
}
}动画结束时，小熊将恢复到初始状态。
© 2026 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.
