在 Flutter 中深刻领悟 Layer 树：趟过一个意外的坑

Android

2023-11-09 12:41:16

Flutter 开发者指南：揭开 Layer 树的神秘面纱

Layer 树：Flutter 幕后的魔术师

踏入 Flutter 开发的奇妙世界，你可能会与一个鲜为人知的概念相遇：Layer 树。它就像一个幕后的魔术师，默默地协调着 UI 元素的绘制和呈现，却鲜少受到关注。但当我们踏入一个关于 Layer 的坑时，它的重要性便不容忽视了。

意外之坑：Layer 的意外行为

我们以一个小说阅读器应用程序的改版为例。我们引入了一个新功能，允许用户突出显示文本并添加注释。为了实现这一功能，我们使用了 Flutter 内置的 TextSelectionOverlay 小部件，它可以轻松地实现文本选择和高亮。

然而，应用程序运行后，我们发现文本高亮出现了意外行为。当用户在文本的开头或结尾进行选择时，高亮文本会出现闪烁或错位的情况。经过一番深入调查，我们终于发现了罪魁祸首：Layer 树。

揭秘 Layer 树：幕后协调者

Layer 树是一个分层的结构，它定义了 UI 元素在屏幕上的绘制顺序和位置。每个 Flutter 小部件都会生成一个 Layer 对象，并将其添加到树中。通过这种方式，Flutter 可以有效地管理 UI 元素的绘制，避免重叠和冲突。

深入浅出：Layer 坑的成因

在小说阅读器中，文本高亮的闪烁和错位是由 TextSelectionOverlay 与周围文本的 Layer 交互造成的。当用户在文本开头或结尾进行选择时，TextSelectionOverlay 会创建一个新的 Layer 来覆盖文本。但是，由于 TextSelectionOverlay 的 Layer 在 Layer 树中的位置不正确，它会与周围文本的 Layer 发生冲突，导致闪烁和错位。

踏破迷雾：走出 Layer 困境

为了解决这个问题，我们不得不调整 TextSelectionOverlay 在 Layer 树中的位置。我们通过修改 TextSelectionOverlay 的 build 方法，将它的 Layer 插入到周围文本 Layer 的后面，确保它不会覆盖其他 Layer。

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ..._buildOtherLayers(), // 其他 Layer
        TextSelectionOverlayLayer(
          ...
        ), // TextSelectionOverlay Layer
      ],
    );
  }

这一修改确保了 TextSelectionOverlay 的 Layer 始终处于其他文本 Layer 的后面，解决了闪烁和错位的问题。

登高望远：从坑中汲取教训

这次 Layer 树的历险记让我们深刻领悟到以下几点：