Flutter Widget之CompositedTransformTarget+CompositedTransformFollower（例如：功能引导指示，跟随弹窗等功能。）

场景

在实际的开发中，我们有时会需要在某个Widget（A）之上或者旁边展示Widget(B)。

例如：功能引导，跟随弹窗等功能。

主要介绍：
CompositedTransformTarget
CompositedTransformFollower
LayerLink
OverlayEntry

CompositedTransformTarget

可以让CompositedTransformFollower定位的小部件。

当在合成阶段合成该该小部件时，他会在同一帧中更新设置相同LayerLink的CompositedTransformFollower，并将自己定位在同一个屏幕上。

  const CompositedTransformTarget({
    Key? key,
    //不能 为空，并且该LayerLink不能再被其他CompositedTransformTarget使用
    required this.link,
    Widget? child,
  }) 
1
2
3
4
5
6

CompositedTransformFollower

CompositedTransformTarget 之后的小部件。

在合成阶段（在绘制阶段之后，如 WidgetsBinding.drawFrame 中所述）合成此小部件时，它会应用一个转换，将链接的 CompositedTransformTarget 的 targetAnchor 和此小部件的 followerAnchor 结合在一起。

这两个锚点将具有相同的全局坐标，除非 offset 不是 Offset.zero，在这种情况下，followerAnchor 将在链接的 CompositedTransformTarget 的坐标空间中偏移偏移量。

用作链接的 LayerLink 对象必须与提供给匹配 CompositedTransformTarget 的对象相同。

CompositedTransformTarget 在绘制顺序中必须早于此 CompositedTransformFollower。

仅当目标位置在此小部件的父级认为可命中的框内时，此小部件的后代的命中测试才有效。如果父级覆盖屏幕，这很容易实现，所以这个小部件通常用作应用程序范围的 Overlay 中的 OverlayEntry 的根（例如，由 MaterialApp 小部件的导航器创建）。

  const CompositedTransformFollower({
    Key? key,
    required this.link,
    this.showWhenUnlinked = true,
    this.offset = Offset.zero,
    this.targetAnchor = Alignment.topLeft,
    this.followerAnchor = Alignment.topLeft,
    Widget? child,
  })
1
2
3
4
5
6
7
8
9

LayerLink

LeaderLayer 可以注册的对象。

应提供此类的实例作为 LeaderLayer.link 和 FollowerLayer.link 属性，以使 FollowerLayer 跟随 LeaderLayer。

CompositedTransformTarget用例一
该用例来实现一个在控件之上显示一个FlutterLogo widget,使用Stack+Position可以实现该效果，但是今天我们使用此Widget来实现相同的效果。

(1) 首先定义要显示的第一层Widget

Stack(
      children: [
        CompositedTransformTarget(
          link: _layerLink,
          child: Container(
            height: 100,
            color: Colors.green,
            child: const Text("Flutter logo 将会根据该空间位置的变化而变化"),
          ),
        ),
      ],
    )
1
2
3
4
5
6
7
8
9
10
11
12

(2) 使用CompositedTransformFollower配置显示在第一层之上的空间，并且距离第一Widget的左上角偏离20像素。完整代码如下：

Stack(
      children: [
        CompositedTransformTarget(
          link: _layerLink,
          child: Container(
            height: 100,
            color: Colors.green,
            child: const Text("Flutter logo 将会根据该空间位置的变化而变化"),
          ),
        ),
        CompositedTransformFollower(
          link: _layerLink,
          offset: const Offset(20, 20),
          child: Container(
            color: Colors.orange,
            child: const FlutterLogo(),
          ),
        )
      ],
    )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

CompositedTransformTarget + OverlayEntry实现悬浮窗

class _CompositedOverlyEx extends StatelessWidget {
  final LayerLink _layerLink = LayerLink();
  OverlayEntry? _overlayEntry;

  @override
  Widget build(BuildContext context) {
    return Container(
    //1 Flutter Logo
      child: CompositedTransformTarget(
        link: _layerLink,
        child: GestureDetector(
          onTap: () {
          /// 2点击展示Overlay
            showOverlay(context);
          },
          child: const FlutterLogo(
            size: 100,
          ),
        ),
      ),
    );
  }

///创建展示OverLay
  void showOverlay(BuildContext context) {
    if (_overlayEntry != null) {
      _overlayEntry?.remove();
      _overlayEntry = null;
      return;
    }
    OverlayState? overlayState = Overlay.of(context);
    _overlayEntry = OverlayEntry(builder: (ctx) {
    
    ///使用CompositedTransformFollwer,在Target右边展示浮层。
      return CompositedTransformFollower(
        link: _layerLink,
        targetAnchor: Alignment.centerRight,
        // followerAnchor: Alignment.bottomLeft,
        child: GestureDetector(
            onTap: () {
              if (_overlayEntry != null) {
                _overlayEntry?.remove();
                _overlayEntry = null;
                return;
              }
            },
            child: const Text(
              "Hello Flutter Logo.",
              style: TextStyle(fontSize: 16),
            )),
      );
    });
    _overlayEntry?.addListener(() {
      print("-----${_overlayEntry}");
      // dismiss();
    });
    overlayState?.insert(_overlayEntry!);
  }

  dismiss() {
    if (_overlayEntry != null) {
      _overlayEntry?.remove();
      _overlayEntry = null;
      return;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67