QuickControls2 图像不会拉伸到父级的全宽

Posted

技术标签:

【中文标题】QuickControls2 图像不会拉伸到父级的全宽【英文标题】:QuickControls2 Image does not stretch to full width of parent 【发布时间】:2018-10-18 14:53:47 【问题描述】:

我有一个简单的 QuickControls2 QML 设计,其中图像应水平拉伸以填充应用程序窗口并保持其纵横比。但是当我运行我的程序时,图像不会缩放/拉伸。

是图片比当前窗口尺寸小,QT没有放大/增加图片尺寸的问题吗?是否有设置让 QT 调整图像大小以填充宽度而不考虑图像大小?

您能告诉我哪里出了问题以及如何解决吗?

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

ApplicationWindow 
    id: applicationWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Scroll")

    ColumnLayout 
        id: mainLayout
        anchors.fill: parent

        Image 
            id: imagePane
            Layout.fillWidth: true
            fillMode: Image.PreserveAspectFit
            source: "placeholder.jpg"
        
    

【问题讨论】:

【参考方案1】:

试试这个:

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

ApplicationWindow 
    id: applicationWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Scroll")

    ColumnLayout 
        id: mainLayout
        anchors.fill: parent

        Image 
            id: imagePane
            Layout.preferredWidth: parent.width
            Layout.preferredHeight: parent.height
            fillMode: Image.PreserveAspectFit
            source: "placeholder.jpg"
        
    

【讨论】:

【参考方案2】:

使用Image.PreserveAspectFit图像被统一缩放以适应不裁剪, 现在,由于您没有填充 Layout 高度,因此图像不能超出其隐式高度。

由于您的要求是让 QT 调整图像大小以填充 宽度 而不管图像大小意味着您接受裁剪图像超出高度限制,在这种情况下你需要使用:

fillMode: Image.PreserveAspectCrop

【讨论】:

以上是关于QuickControls2 图像不会拉伸到父级的全宽的主要内容,如果未能解决你的问题,请参考以下文章

停止:从传播到父级的活动状态

Vuejs 中从子级到父级的事件监听

从子级到父级的跨站点 iframe postMessage

具有到父级的相对包含路径的 C++ makefile

setSizePolicy() 与 QSizePolicy.Expanding 不起作用:子级没有扩展到父级的大小

包含到父级的JQuery Draggable和额外的一个