时间戳

首页 > 解决方案 > 行布局内的 QML 发光

qt - 行布局内的 QML 发光

问题描述

我正在使用 Qt 5.15 Quick 2 QML 在窗口中创建一行自定义按钮。当我有一个独立的自定义按钮时，事情似乎可以正常工作，但是当我将它们放入时RowLayout，似乎存在严重的剪切和伪影问题。

一个最小的可重现示例可能如下所示：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    RowLayout
    {

        anchors.fill:parent
        anchors.margins: 25
        Button
        {
            text: "Click Me"
            Layout.fillWidth: true
        }

        CustomButton
        {
            text: "That Boy Don't Glow Right"
        }

        Button
        {
            x: 100; y:100
            text: "Click Me"
            Layout.fillWidth: true
        }
    }
}

使用自定义控件

import QtQuick 2.0
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15

Button {
    id: control
    text: "Click Me"

    Glow {
        anchors.fill: control
        radius: 64
        spread: 0
        samples: 128
        color: "red"
        source: control
        visible: true
    }
}

带有示例输出：

在此处输入图像描述

一种可能的解决方法是添加Glow更改

Glow {
        anchors.fill: control
        width: parent.width
        height:parent.height
        x:control.x
        y:control.y
        parent: control.parent
       ...

在此处输入图像描述

但这似乎不对。首先，对我来说，在哪里parent.width和从哪里绑定control.x以及control.parent在单嵌套和多嵌套中会发生什么对我来说并不明显。如果将 aCustomButton放在另一个带有 id 的控件中control，它会重新绑定该属性吗？如果将 RowLayout 放置在 RowLayout 中，那么它似乎需要parent: control.parent.parent. 在我的实际代码中，也有一些重要的定位来允许阴影的边距，并且 CustomButton 在另一个容器中，所以实际工作的代码是：坦率地说x:control.x + parent.pad/2，parent:control.parent.parent.parent这是荒谬的，并假设非标准字段在父级中始终可用。

有没有更好的办法？希望我能保持按钮发光的能力。

标签： qtqml

解决方案

根据文档：

"注意：不支持让效果包含自身，例如通过将源设置为效果的父级。

所以很幸运，你能够让你的例子发挥作用。避免将父对象用作源的一种方法是将 Glow 对象指向 Button 的背景对象：

Button {
    id: control

    Glow {
        source: control.background
    }
}

推荐阅读