Question

我正在使用GridView创建一个图库图像，我从我计算机上的某个文件夹中显示这些图像。 图像具有不同的宽度*高度比。很少有肖像图像，其中图像的高度是宽度的3倍。有些图像是横向的，宽度约为高度的3倍。有些图像是平方的。

我的图库的问题是我的Image的每个GridView组件都有一个正方形，如下所示。这使肖像＆amp;由于网格中的每个块都是正方形，因此横向图像会被错误拉伸。从而导致图像的纵横比偏斜。

问题： 如何确保我同时显示肖像和图像？将风景图像放入我的方块而不会扭曲纵横比？我正在寻找在正方形的部分上放置一些黑色/灰色背景，这些部分在纵向或横向图像上是空白的？但可能还有其他一些技巧。

代码：

import QtQuick 2.5
import Qt.labs.folderlistmodel 2.1
import QtQuick.Controls 1.1
import QtQml.Models 2.1

GridView {
  cellHeight: height/2
  cellWidth: width/2
  clip: true

  FolderListModel {
    id: dir_model
    folder: "/path/to/images/folder"
    nameFilters: ["*.png"]
  }

  Component {
    id: file_delegate

    Image {
        width: (parent.width)/2
        height: (parent.width)/2
        source: fileURL
    }
  }

  model: dir_model
  delegate: file_delegate
}

Answer 1

只需将Image fillMode属性设置为Image.PreserveAspectFit 正如医生所说：

图像均匀缩放以适合不裁剪

如何同时显示肖像和将图像渲染到网格上的正方形而不会影响纵横比？

1 个答案: