尝试将弹出窗口居中时出现 QML 渐变边框颜色问题

Question

我正在尝试为弹出窗口上的按钮创建一个渐变颜色边框。如果我不尝试将弹出窗口居中，这似乎很好。我无法说出这个名字或描述这个问题。请查看附图和代码中“取消”按钮的边框。 （我使用的是Qt 6.3）

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
//import QtQuick3D
import Qt5Compat.GraphicalEffects

ApplicationWindow {
    id: root
    width: 666
    height: 777
    visible: true
    color: "grey"
    Button
    {
        width: 111
        height: 44
        text: "Show"
        onClicked: menu.open()
    }
    Popup {
        id: menu
        width: (559)
        height: (643)

        modal: true
        dim: false
        focus: true
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent

        background: Rectangle {
            //        color: "transparent"
            border.color: "transparent"
            LinearGradient {
                anchors.fill: parent
                start: Qt.point(0, 0)
                end: Qt.point(0, parent.height)
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "#29395D" }
                    GradientStop { position: 1.0; color: "#1C2341" }
                }
            }
        }

    //    Component.onCompleted: {
    //    x: (parent.width - width) / 2
    //    y: (parent.height - height) / 2
    ////            anchors.centerIn = parent
    ////                    anchors.centerIn = Overlay.overlay
    //    }
//        onAboutToShow: anchors.centerIn = Overlay.overlay
        anchors.centerIn : Overlay.overlay

        Button {
            id: okBt
            anchors.top: parent.top
            anchors.topMargin: (410)
            anchors.horizontalCenter: parent.horizontalCenter
            width: (276)
            height: (41)
            text: "OK"
//            font.family: FontModel.family
            font.pixelSize: (16)
            font.weight: Font.Normal    //400
            contentItem: Text {
                text: parent.text
                font: parent.font
                color: "#FFFFFF"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }
            flat: true
            background: Rectangle {
                implicitWidth: (276)
                implicitHeight: (41)
                radius: (6)
                border.width: 0
                gradient: Gradient {
                    orientation: Gradient.Horizontal
                    GradientStop { position: 1.0; color: "#2F3D6D" }
                    GradientStop { position: 0.0; color: "#3C5199" }
                }
            }
        }

        Button {
            id: cancelBt
    //        visible: false
            anchors.top: parent.top
            anchors.topMargin: (471)
            anchors.horizontalCenter: parent.horizontalCenter
            width: (276)
            height: (41)
            text: "Cancel"
//            font.family: FontModel.family
            font.pixelSize: (16)
            font.weight: Font.Normal    //400
            contentItem: Text {
                text: parent.text
                font: parent.font
                color: "#FFFFFF"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }
            flat: true
        }

        Rectangle {
            id: gradientBorder
            anchors.top: parent.top
            anchors.topMargin: (471)
            anchors.horizontalCenter: parent.horizontalCenter
            width: (276)
            height: (41)
            radius: (6)
            z: cancelBt.z + 11
            color: "transparent"
            Rectangle {
                id: bd
                anchors.fill: parent
                radius: parent.radius
                gradient: Gradient {
                    orientation: Gradient.Horizontal
                    GradientStop { position: 1.0; color: "#2F3D6D" }
                    GradientStop { position: 0.0; color: "#3C5199" }
                }
                layer.enabled: true
                layer.effect: OpacityMask {
                    invert: true
                    maskSource: Item {
                        width: bd.width
                        height: bd.height
                        Rectangle {
                            anchors.centerIn: parent
                            width: parent.width -2
                            height: parent.height -2
                            radius: gradientBorder.radius
                        }
                    }
                }
            }
        }
    }
}

Answer 1

您遇到的问题肯定与半像素舍入有关。在使用纹理/图层时，这尤其是一个问题，因为在从浮点定位/大小的项目创建纹理时，内部纹理大小 (

sourceSize

) 会四舍五入。当我创建评论时，我没有正确查看您的示例。

为了解决此问题，您应该调整尺寸以使项目像素对齐。在下面的示例中，我将所有奇数尺寸设置为偶数，以便锚定逻辑不会将项目放置在半像素上。

另外，我没有使用

OpacityMask

创建切口，而是使用了

LinearGradient

中的

Qt5Compat.GraphicalEffects

和被指定为

Rectangle

的不可见

source

。

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects

ApplicationWindow {
    id: root
    width: 666
    height: 777
    visible: true
    color: "grey"

    Button {
        width: 111
        height: 44
        text: qsTr("Show")
        onClicked: popup.open()
        anchors.centerIn: parent
    }

    Popup {
        id: popup
        width: 560
        height: 644
        modal: true
        dim: false
        focus: true
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
        anchors.centerIn : Overlay.overlay

        background: Rectangle {
            border.color: "transparent"

            LinearGradient {
                anchors.fill: parent
                start: Qt.point(0, 0)
                end: Qt.point(0, parent.height)
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "#29395D" }
                    GradientStop { position: 1.0; color: "#1C2341" }
                }
            }
        }

        Button {
            id: okBt
            anchors.top: parent.top
            anchors.topMargin: 410
            anchors.horizontalCenter: parent.horizontalCenter
            width: 276
            height: 42
            text: qsTr("OK")
            font.pixelSize: 16
            font.weight: Font.Normal
            flat: true

            contentItem: Text {
                text: parent.text
                font: parent.font
                color: "#FFFFFF"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }

            background: Rectangle {
                implicitWidth: okBt.width
                implicitHeight: okBt.height
                radius: 6

                gradient: Gradient {
                    orientation: Gradient.Horizontal
                    GradientStop { position: 1.0; color: "#2F3D6D" }
                    GradientStop { position: 0.0; color: "#3C5199" }
                }
            }
        }

        Button {
            id: cancelBt
            anchors.top: parent.top
            anchors.topMargin: 471
            anchors.horizontalCenter: parent.horizontalCenter
            width: 276
            height: 42
            text: qsTr("Cancel")
            font.pixelSize: 16
            font.weight: Font.Normal
            flat: true

            contentItem: Text {
                text: parent.text
                font: parent.font
                color: "#FFFFFF"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }

            Rectangle {
                id: dummy
                width: cancelBt.width
                height: cancelBt.height
                color: "transparent"
                border.width: 2
                radius: 6
                visible: false
            }

            background: LinearGradient {
                anchors.centerIn: parent
                //anchors.alignWhenCentered: false
                width: dummy.width
                height: dummy.height
                start: Qt.point(0, 0)
                end: Qt.point(dummy.width, 0)
                source: dummy
                gradient: Gradient {
                    GradientStop { position: 1.0; color: "#2F3D6D" }
                    GradientStop { position: 0.0; color: "#3C5199" }
                }
            }
        }
    }
}