Qt Quick 示例 - 图片元素

这是有关图像类型的 QML 示例集。

Image Elements（图像元素）是与图像类型有关的小型 QML 示例集。更多信息，请访问Use Case - Visual Elements In QML。

运行示例

要从 Qt Creator，打开Welcome 模式，从Examples 选择示例。更多信息，请参阅Qt Creator: Tutorial：构建并运行。

使用 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
        }
    }

动画结束时，小熊会恢复到初始状态。

示例项目 @ code.qt.io

© 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.