在实际的开发中，我们有时会需要在某个Widget（A）之上或者旁边展示Widget(B),该场景尝尝通过计算A的位置，然后去调整B的位置来实现，简单的常见还可以，如果实现复杂的常见，通常这样的计算处理逻辑会比较复杂。
今天我们介绍CompositedTransformTarget和CompositedTransformFollower来实现类似的效果，
今天我们会介绍一下几个类
CompositedTransformTarget
CompositedTransformFollower
LayerLink
CompositedTransformTarget
可以让CompositedTransformFollower定位的小部件。
当在合成阶段合成该该小部件时，他会在同一帧中更新设置相同LayerLink的CompositedTransformFollower，并将自己定位在同一个屏幕上。
const CompositedTransformTarget({
Key? key,
required this.link,//不能 为空，并且该LayerLink不能再被其他CompositedTransformTarget使用
Widget? child,
})
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,
})
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 将会根据该空间位置的变化而变化"),
),
),
],
)
(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(),
),
)
],
)
（3）展示效果如下
该中实现方式单一，下面我们看一下稍微复杂的示例。
CompositedTransformTarget+Overlay实现悬浮窗
当点击FlutterLogo时，在其右边显示一个浮层。
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;
}
}
}
