QML工作笔记-Image中fillMode的使用

目录

 

 

基本概念

博主例子（伪代码）

---

 

基本概念

这个功能非常常用，特意写一篇博文用于记录，方便自己以后快速查阅。

上次申请CSDN专家失败了，原因是CSDN说我这个是以功能点为主，缺乏综合实战！

我就是喜欢以功能点为主，方便自己查阅！

Image.Stretch：图片拉伸自适应；（默认的）
Image.PreserveAspectFit：按比例缩放，不裁剪
Image.PreserveAspectCrop：均匀缩放，必要时裁剪
Image.Tile：像贴瓷砖一样
Image.TileVertically：水平拉伸，垂直平铺
Image.TileHorizontally：垂直拉伸，水平平铺
Image.Pad：原始图像不做处理

 

博主例子（伪代码）

这里我就举两个例子，一个是Image.Stretch的情况，一个是Image.Pad情况

公共的代码：

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 500
    height: 900
    title: qsTr("九州修仙大陆")


    Login{

        id: login
        width: parent.width
        height: parent.height
    }

}

Image.Pad效果：

伪代码如下：

    Image {
        id: backImage
        source: "qrc:/img/loginbg.jpg"
        fillMode: Image.Pad
        smooth: true
        width: parent.width
        height: parent.height
    }

Image.Stretch效果如下：

伪代码如下：

    Image {
        id: backImage
        source: "qrc:/img/loginbg.jpg"
        fillMode: Image.Stretch
        smooth: true
        width: parent.width
        height: parent.height
    }