Flutter绑定两个View，CompositedTransf

一、简介

CompositedTransformTarget 合成变换目标
CompositedTransformFollower 合成变换伴随者

举个例子，我们需要在输入框下给用户一个提示，然后页面很长，能够滚动。当我们使用TextField，然后使用overlay作为一个浮窗提示的时候，滚动界面overlay的位置不会变，需要我们动态的去计算位置。那么有没有简单的方式。

我们可以使用CompositedTransformTarget 包裹TextField，使用CompositedTransformFollower 包裹Overlay的布局，这样就可以绑定两个widget。滚动的时候就会一起滚动。

二、demo

class TipBox extends StatefulWidget {
  TipBox({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return TipBoxState();
  }
}

class TipBoxState extends State<TipBox> {
  final LayerLink layerLink = LayerLink();

  bool show = false;

  OverlayEntry? _overlayEntry;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: ()=> _toggleOverlay(context),
          child: CompositedTransformTarget(
            link: layerLink,
            child: Image.asset(
              "lib/assets/dog.jpg",
              width: 80,
              height: 80,
            ),
          ),
        ),
      ),
    );
  }

  void _toggleOverlay(BuildContext context) {
    debugPrint("_toggleOverlay");
    if (!show) {
      _showOverlay(context);
    } else {
      _hideOverlay();
    }
    show = !show;
  }

  void _showOverlay(BuildContext context) {
    _overlayEntry = _createOverlayEntry();
    OverlayState? overlayState = Navigator.of(context).overlay;
    debugPrint("overlayState $overlayState");
    overlayState?.insert(_overlayEntry!);


  }

  void _hideOverlay() {
    _overlayEntry?.remove();
  }

  OverlayEntry _createOverlayEntry() => OverlayEntry(
      builder: (BuildContext context) => UnconstrainedBox(
            child: CompositedTransformFollower(
              link: layerLink,
              ///主体的位置
              followerAnchor: Alignment.bottomCenter,
              ///这个是浮窗的位置
              targetAnchor: Alignment.topCenter,
              offset: Offset(0,-5),
              child: Material(
                child: Container(
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(5),
                  ),
                  padding: const EdgeInsets.all(10),
                  width: 50,
                  child: const Text(
                    "toly",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
          ));
}