qt动画效果_第12篇 Qt Quick入门教程之图形动画（二）图片和边界图片

最新推荐文章于 2025-06-13 09:34:10 发布

weixin_39882870

最新推荐文章于 2025-06-13 09:34:10 发布

阅读量516

点赞数 1

CC 4.0 BY-SA版权

文章标签： qt动画效果

本文链接：https://blog.youkuaiyun.com/weixin_39882870/article/details/111295498

本文深入介绍了QtQuick中的Image和BorderImage类型，讲解了如何使用Image显示本地和网络图片，调整图片大小和填充模式，并展示了BorderImage如何创建边框效果及其实现各种自定义布局的技巧。同时，文章提供了丰富的代码示例帮助读者理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导语

在界面编程中经常会使用图片，前面章节中我们已经使用过图片类型，这一篇将具体来讲一下图片使用的相关内容，其中还会涉及到边界图片的知识。

下面我们开始。

图片

在Qt Quick中的Image类型用来显示一张图片。要显示图片，只需要通过source属性指定图片的路径。例如：

Window {
    visible: true
    width: 200 ; height: 200

    Image {
        source: "qt-logo.png"
    }
}

这里将图片放到了资源文件中，所以可以直接使用。效果如下图所示。

但是一般情况下，我们还会指定图片的显示大小，比如，这里设置为整个窗口的大小：

Image {
    anchors.fill: parent
    source: "qt-logo.png"
}

效果如下图所示。

可以看到，设置Image的大小，图片的显示大小也会随之改变。默认情况下图片会被拉伸。如果要更改默认的显示效果，那么可以使用fillMode属性来设置填充模式，常用的有：

Image.Stretch - 将图片进行拉伸来适应指定的大小；
Image.PreserveAspectFit - 图片保持宽高比进行缩放来填充，不会进行裁剪；
Image.PreserveAspectCrop - 图片保持宽高比进行缩放来填充，必要时进行裁剪；
Image.Tile - 水平和垂直方向均进行平铺；
Image.TileVertically - 水平方向拉伸，垂直方向平铺；
Image.TileHorizontally - 水平方向平铺，垂直方向拉伸。

例如：

Image {
    anchors.fill: parent
    source: "qt-logo.png"

    fillMode: Image.Tile
}

效果如下图所示。

其他选项的效果可以参照下图。

有的读者可能会说，当图片平铺时，图片是在中间，然后向四周平铺，怎么能让其从左上角开始呢？其实只需设置对齐方式即可，例如：

Image {
    anchors.fill: parent
    source: "qt-logo.png"

    fillMode: Image.Tile
    horizontalAlignment: Image.AlignLeft
    verticalAlignment: Image.AlignTop
}

效果如下图所示。

除了使用本地的图片，Image还可以直接指定网络图片，例如：

Window {
    visible: true
    width: 600 ; height: 400

    Image {
        x: 50; y: 50
        source: "http://qter-images.qter.org/homepage/test.png"
        sourceSize.width: 200; sourceSize.height: 200
    }

    Image {
        x: 200; y: 50
        source: "http://qter-images.qter.org/homepage/test.png"
        sourceSize.width: 200; sourceSize.height: 200
        mirror: true
    }

    Image {
        x: 350; y: 50
        source: "http://qter-images.qter.org/homepage/test.png"
        width: 200; height: 200
    }
}

这里设置了3个Image，都使用了相同的网络图片，在第一个当中指定了sourceSize，它用来设置内存中保存的图片的原始大小，对于较大的图片，建议指定该属性；在第二个当中设置了mirror属性，可以实现图片水平翻转的镜面效果；在第三个当中，指定的是图片的显示大小。可以看到，当指定sourceSize时图片是保持宽高比进行缩放的。代码运行效果如下。

另外，对于初学者，建议以后在程序中尽可能使用PNG格式图片，因为Qt对PNG格式是原生支持的。

边界图片

在Qt Quick中还有一个特殊的图片类型BorderImage，从名字来看，它是一个边框图片类型，顾名思义，该类型可以将图片设置为边框，当然，了解了该类型的特性后，也可以实现其他一些效果。

BorderImage类型通过border属性将一个图片分为9部分，如下图所示：

这里的border是一个属性组，分为border.left、border.right、border.top和border.bottom，即上图中的左、右、上、下四条线，它们指定了从该线到相应图片边界的偏移像素。当图片缩放时，图中的9部分，会进行不同的操作，具体来说：

四个角1、3、7、9不进行缩放；
2和8会通过horizontalTileMode属性指定的方式进行缩放；
4和6通过verticalTileMode属性指定的方式进行缩放；
而中间的区域5会结合horizontalTileMode和verticalTileMode进行缩放。

这里的horizontalTileMode和verticalTileMode可取的值均为：BorderImage.Stretch、BorderImage.Repeat和BorderImage.Round。

下面通过一个例子来理解。

Window {
    visible: true
    width: 750; height: 350

    Image {
        x:10; y:100;
        source: "colors.png"
    }

    BorderImage {
          x:150; y:100; width: 180; height: 180
          border { left: 30; top: 30; right: 30; bottom: 30 }
          horizontalTileMode: BorderImage.Stretch
          verticalTileMode: BorderImage.Stretch
          source: "colors.png"
      }

    BorderImage {
          x:350; y:100; width: 165; height: 180
          border { left: 30; top: 30; right: 30; bottom: 30 }
          horizontalTileMode: BorderImage.Repeat
          verticalTileMode: BorderImage.Stretch
          source: "colors.png"
      }

    BorderImage {
          x:550; y:100; width: 165; height: 180
          border { left: 30; top: 30; right: 30; bottom: 30 }
          horizontalTileMode: BorderImage.Round
          verticalTileMode: BorderImage.Repeat
          source: "colors.png"
      }
}

这里第一个显示的是原始图片，后面是边界图片的不同效果，如下图所示，大家自己体会下。

使用边界图片可以实现的效果有很多，比如实现Item项目的阴影，来看一个例子：

Window {
    visible: true
    width: 300; height: 300

    Rectangle {
        anchors.centerIn: parent; width: 250; height: 250

        BorderImage {
            anchors.fill: parent
            anchors { leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 }
            border { left: 10; top: 10; right: 10; bottom: 10 }
            source: "shadow.png"
        }

        Rectangle { id: rectangle; anchors.fill: parent ; color: "lightsteelblue"}
    }
}