是否可以显示 QML 控件边界？答案

【问题标题】：Is it possible to show QML controls boundaries?是否可以显示 QML 控件边界？
【发布时间】：2020-03-12 01:48:58
【问题描述】：

在开发 QML 应用程序时，如果我能够设置一些设置来勾勒所有视觉元素的边界，我认为它有时会很有用。例如，Qt Quick Controls 2.x 中的控件可能包含几个部分，如背景、内容项、指示器等。在调整这些部分的大小时，我希望看到每个部分的边界。

Qt/QML 中有这样的功能吗？

【问题讨论】：

您是否尝试为每个控件定义样式并设置类似border.color: "black"; border.width: 5; 的内容？
@DuKes0mE：我希望有更通用的东西，例如可以设置为以 3D 显示所有 QML 组件的 QSG_VISUALIZE=overdraw。

标签： qml qt5

【解决方案1】：

三年后，人们（特别是：我）仍在为此进行网络搜索:)

就像评论者 @DuKes0mE 所建议的那样，我已经通过即时为事物添加边框然后从最终代码中删除它们来“做事”。

和 OP 一样，我现在已经厌倦了这样做。

我最近想到的一个策略是在我的项目中添加一个DebugRectangle.qml 自定义元素：

import QtQuick 2.12

Rectangle {
  property var toFill: parent          // instantiation site "can" (optionally) override
  property color customColor: 'yellow' // instantiation site "can" (optionally) override
  property int customThickness: 1      // instantiation site "can" (optionally) override

  anchors.fill: toFill
  z: 200
  color: 'transparent'
  border.color: customColor
  border.width: customThickness
}

然后我可以像这样将它添加到现有元素中，以调试它们：

      Label {
        text: 'Lorem ipsum dolor sit amet'
      }
      Label {
        text: 'quis nostrud exercitation'
        DebugRectangle {}  // Adds "debug border" to this Label
      }

当我完成后，我什至可以将嵌套的DebugRectangle 留在代码中，但可以像这样切换它的可见性：

      Label {
        text: 'quis nostrud exercitation'
        DebugRectangle {
          visible: false
        }
      }

Complete sample project 已在 GitHub 上分享。

【讨论】：

【解决方案2】：

有一个名为 GammaRay 的工具（除其他外）允许调查 QtQuick 2 应用程序，请参阅： http://doc.qt.io/GammaRay/gammaray-qtquick2-inspector.html

设置说明在这里： https://github.com/KDAB/GammaRay

如果您运行的是 Linux，很可能您的发行版已经附带了 GammaRay 软件包。

【讨论】：

我不想挑剔，因为 GammaRay 是一款出色的工具，而且是免费的……不过，恕我直言，您应该更清楚地说明您的隶属关系，而不仅仅是 我们以及您的雇主在您的个人资料中的评论。
@kfunk：我知道 GammaRay 存在，但还没有使用它。从我从上面的链接中可以看出，它似乎可以做我想做的事。我会试试看。
@derM：这是一个考虑到 FOSS 原则编写的工具，仅根据我的经验提出建议。我没有在 SO 上营销 GammaRay 的报酬——这是肯定的。我已将 we 替换为 I，这样更清楚。