检测Flutter小部件树中的用户创建小部件

Question

我今天一直在解决一个问题，需要检测widget tree中特定的小部件，所以我一直在尝试使用context.visitChildElements和element.visitChildren。我可以看到树中所有的小部件，但是数量太多了。

我查看了flutter小部件检查器的工作方式，他们有一些内部期望，在其他用户代码库中可能不存在。例如，我有一个页面，包含一个Center小部件和一个Material button小部件。将上下文传递给我的函数会打印出大约200多个小部件，并散布着这三个小部件。我希望只打印出这三个小部件，或者至少消除Flutter自动创建的小部件，而不是由用户提供的代码创建的。

List<WidgetInfo> getElements(BuildContext context) {
 var widgetsOfInterest = <WidgetInfo>[];
 widgetsOfInterest.clear();

 int indentation = 0;

 void visitor(Element element) {
  indentation++;

  Key? key = element.widget.key;
  String className = element.widget.runtimeType.toString();

  while (element.findRenderObject() is! RenderBox) {}
  RenderBox box = element.findRenderObject() as RenderBox;
  var offset = box.getTransformTo(null).getTranslation();

  final indent = ' ' * indentation;
  // Here I want to check if this is a widget we created and print its name and offset
  if (debugIsLocalCreationLocation(element)) print('$className $offset');

    if ((MaterialButton).toString() == className) {
     widgetsOfInterest.add(WidgetInfo(
       indentation: indentation,
       size: box.size,
       paintBounds: box.paintBounds.shift(
         Offset(offset.x, offset.y),
       ),
       key: key,
       className: className,
      ));
    }

     element.visitChildren(visitor);
   }

 context.visitChildElements(visitor);

 return widgetsOfInterest;
}

如果有任何了解Flutter组件树并能指引我方向的经验与见解，我将不胜感激。

- Filled Stacks

Answer 1

显然这里并不是最好的解决方案（而且会增加不必要的代码），但这可能有效。

您可以创建一个自定义小部件键，其中包含一些前缀，并在希望检测到它的每个组件中使用它。

例如

//1
Appbar(key: FSKey())
//2
Center(key:FSKey("awesome_widget"))

如果您在迭代元素时可以访问这些键，则可以使用您设置的前缀检测这些小部件。

实际键值

//1
"fskey_1273zj72ek628"
//2
"fskey_awesome_widget"

再次强调，这可能不是最优解决方案，但它可以让您控制树的哪些部分需要被检测，如果没有其他方法，这将起作用。

- Amr Ahmed

---

嘿，谢谢你的评论。我很感激。我尝试了这个解决方案，但我们需要在不要求开发人员更改任何代码的情况下完成它。Flutter小部件检查器可以做到这一点，我们也应该能够做到这一点。 - Filled Stacks