QML（Qt 5）：调整大小的图像左上角的叠加按钮

Question

我有这个代码（减少到最小）：

import QtQuick 2.0
import QtQuick.Controls 1.3

Item {
    Image {
        id: img
        source: "cluster.png"
        width: 150
        height: 150
        fillMode: Image.PreserveAspectFit
   }

   Button {
        id: butn
        anchors.left: img.left
        anchors.top: img.top
        width: 20
        height: 20
        text: "Push!"
   }
}

生成的图像类似于以下内容：

但是我想将按钮放在 resized 图片的左上角。

完整图片位于：http://susepaste.org/34762236

QML 可以吗？

Answer 1

您需要访问缩放图像的实际大小，以便有 paintedHeight property and paintedWidth。

这将导致

Item {
    Image {
        id: img
        source: "cluster.png"
        width: 150
        height: 150
        fillMode: Image.PreserveAspectFit
    }

    Button {
        id: butn
        anchors.left: img.left
        anchors.top: img.top
        anchors.leftMargin: (img.width - img.paintedWidth)/2
        anchors.topMargin: (img.height - img.paintedHeight)/2
        width: 20
        height: 20
        text: "Push!"
    }
}

您也可以使用 x 或 y 代替锚点和边距。