Question

每当我将蒙版应用于图像以使其成为圆形时，UI元素的对齐就会中断。图像向右偏移了一定数量的像素。

// main.qml
import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.1

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Example")

    Page1Form {

    }
}

// Page1Form.qml
import QtQuick 2.8
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.1

Item {
   RowLayout {
        id: playerRowLayout

        Layout.alignment: Qt.AlignLeft

        Layout.fillWidth: true

        RoundedImage {
            id: displayImage

            width: 50
            height: 50

            Layout.preferredWidth: 50
            Layout.preferredHeight: 50

            source: "Images/DisplayPicture.jpeg"

            sourceSize.width: width
            sourceSize.height: height
        }

        Text {
            id: playerText
            text: qsTr("Hameer Abbasi (Pro)")
            font.family: "Source Sans Pro"
            font.pixelSize: 12
        }
    }
}

// RoundedImage.qml
import QtQuick 2.8
import QtGraphicalEffects 1.0

Image {
    id: img
    property bool rounded: true
    property bool adapt: true

    layer.enabled: rounded
    layer.effect: OpacityMask {
        maskSource: Rectangle {
            anchors.centerIn: parent
            width: adapt ? img.width : Math.min(img.width, img.height)
            height: adapt ? img.height : Math.min(img.width, img.height)
            radius: Math.min(width, height)*0.5
        }
    }
}

当我将RoundedImage更改为Image时，错位会消失，如下所示：

此外，当我向anchors.fill: img添加anchors.centerIn: img或OpacityMask时，我得到以下结果（正如您所看到的，未对齐并未消失但只是移动了）：

不知何故。有人可以帮我弄清问题在哪里以及＆＃34;适当的＆＃34;解决这个问题的方法是什么？

Answer 1

我无法解释你为什么这件事正在发生。对我来说，它看起来像一个错误。

似乎有一个简单的解决方法：不要在Image内直接使用Layout。将RoundedImage.qml更改为此：

// RoundedImage.qml
import QtQuick 2.7
import QtGraphicalEffects 1.0

Item {
    id: img
    property bool rounded: true
    property bool adapt: true
    property alias source: image.source
    property alias sourceSize: image.sourceSize
    Image {
        id: image

        width: img.width
        height: img.height
        layer.enabled: rounded
        layer.effect: OpacityMask {
            maskSource: Rectangle {
                width: adapt ? img.width : Math.min(img.width, img.height)
                height: adapt ? img.height : Math.min(img.width, img.height)
                radius: Math.min(width, height)*0.5
            }
        }
    }
}

并且奇怪的行为消失了。

将蒙版应用于图像会破坏对齐

1 个答案: