DevTools中Flutter的大绿色向右箭头（-->）是什么意思？

Question

在Flutter的DevTools中，大绿色向右箭头（-->）代表什么意思？

我猜它与可交互区域有关，但我不确定。

代码与Flutter, Page two can't click when it's on Page 1中相同。这是简化过的代码：

PageController _controller = PageController(initialPage: 0, viewportFraction: 0.5);

@override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: PageView(
        controller: _controller,
        children: <Widget>[
          Center(
            child: FlatButton(
              onPressed: () {},
              color: Colors.red,
              child: Text('First Tab'),
            ),
          ),
          Center(
            child: FlatButton(
              onPressed: () {},
              color: Colors.blue,
              child: Text('Second Tab'),
            ),
          ),
          Center(
            child: FlatButton(
              onPressed: () {},
              color: Colors.green,
              child: Text('Third Tab'),
            ),
          ),
        ],
      ),
    );
}

- JerryZhou

---

如果你想知道为什么箭头会这样移动，你可能需要分享你的小部件树。 - creativecreatorormaybenot

啊，这段代码和https://stackoverflow.com/questions/56508079/一样，我只是以为那是第二个问题，所以才提出了这个问题。我把它的简单代码移动到这里了。 - JerryZhou

此处是在RenderSliver#debugPaint中完成的 - 它调用了_debugDrawArrow方法两次以绘制两个并行的绿色箭头 - 请查看其调用参数。 - pskink

Answer 1

这个所谓的“Debug Paint”中的绿色箭头表示滚动视图。

箭头的方向显示滚动视图的扩展方式，即箭头将指向右侧或向下。例如，ListView、SingleChildScrollView等均会出现此情况。

了解有关Flutter中可视化调试的更多信息，请点击这里。

- creativecreatorormaybenot

---

@JerryZhou 我不确定这一点。我猜可能是因为还没有渲染后面的页面，所以无法确定 PageView 的大小。如果你滚动到最右边，你会发现箭头停在了最后一个项目的末尾。我认为这可以称之为“bug”。如果需要更多信息，你可以联系 Flutter 团队，例如通过 GitHub 提交问题，询问为什么箭头会“扩展”。 - creativecreatorormaybenot

我刚刚阅读了https://flutter.dev/docs/testing/debugging#visual-debugging，它只提到了与内容基线相关的绿色箭头和与对齐相关的黄色箭头，似乎没有提到任何与滚动视图相关的绿色右箭头。 - JerryZhou

@JerryZhou，是的，我发现文档缺少这一部分。我已经在GitHub上创建了一个问题。不过，我提供的链接肯定是文档中适当的部分。你可以将debugPaintSizeEnabled = true;添加到你的代码中，你也会看到箭头。 - creativecreatorormaybenot

我发现这与Inkwell区域有关：Inkwell not working properly with PageView.builder。 - JerryZhou