修复项目组件中图像的大小

Posted 2023-02-16

【中文标题】修复项目组件中图像的大小

【英文标题】：Fixing size of image within an item component

【发布时间】：2019-04-04 15:00:11

【问题描述】：

我想固定一个项目中图像的大小，并在它的右侧有一个更高的矩形。

这是我的组件的声明

import QtQuick 2.9
import QtQuick.Controls 2.5

Item 
    id: button
    width: 100
    height: 200
    signal clicked

    Image 
        id: backgroundImage
        anchors.fill: parent
        source: (button.enabled ? "images/simulation.png" : "images/simulation.png")
        width: 100
        height: 100
    

    Rectangle 
        color: "#22add8"
        anchors.left: backgroundImage.right
        anchors.leftMargin: 10
        width: 5
        height: 200
    

    //Mouse area to react on click events
    MouseArea 
        anchors.fill: button
        onClicked: 
            console.log("clicked")
            button.clicked()
        
        onPressed: 
            console.log("pressed")
            backgroundImage.source = "images/simulation.png" 
        onReleased: 
            console.log("released")
            backgroundImage.source = (button.enabled ? "images/simulation.png" : "images/simulation.png")
        
    

图像总是占据项目的高度

如何固定图片的大小？

【参考方案1】：

这是罪魁祸首：

Image 
    // ...
    anchors.fill: parent    //  <-- THIS
    // ...

这会绑定图像的区域以填充其父级。删除该行，您应该会得到一个 100x100 的固定图像。