原文在这里

作者简介:Jose,刚大学毕业,现带领团队负责维护Flutter的Material库,
Material是一个帮助团队建设高质量用户体验的设计体系。

假设你的ui里有一个widget,并且您希望在该widget的顶部覆盖一个浮动widget。
可能该widget被旋转或应用了其他转换,如何将widget的位置和转换信息传递到浮动widget呢?

你可以使用CompositedTransformTarget, CompositedTransformWidget、LayerLink、Overlay和OverlayEntry来完成上述操作。

在Flutter中,overlay允许您将视觉元素插入到overlay的堆栈中,从而将它们显示在其他widget的顶部。使用OverlayEntry将widget插入到overlay中,同时可以使用Positioned和AnimatedPositioned来定位你的widget。当你需要把一个widget浮动在另一个widget上面时,就可以使用这种方法,并且这些widget都可以复用。

在这一篇文章中,开发者想要对现有的TextField增加自动建议功能,我们当然可以使用Stack来实现这个功能,但这种方法并不友好,具有很强的侵入性,还需要将整个屏幕设计为Stack。如本文所述,建议使用Overlay来实现这种效果,这种场景非常常见。

直接使用使用Overlay表现的很直观,但在Flutter中实现起来却有限困难:使用一个builder回调函数来创建OverlayEntry实例,并把它插入到Overlay的堆栈中,同时你还需要持有该OverlayEntry实例的引用,可以方便的对该实例进行更新、删除操作。OverlayEntry的position、transformation依赖的widget必须也要存在于overlay中,否则就会发生冲突。因为overlay的MediaQuery的context不同于常规的contenxt。调用Overlay之前,在widget中使用padding或margin的时候就会发生类似问题。幸运的是,flutter已经为你处理了这些问题。(这一段还需要润色,要衔接上下文中心思想)

如果你的overlay entry所依赖的“target”不在overlay堆栈中,那么我们需要使用CompositedTransformTarget、CompositedTransformFollower和LayerLink将它们粘合在一起:

  • 用CompositedTransformFollower包装需要浮动的widget

  • CompositedTransformFollower必须是CompositedTransformTarget的子孙接点

  • 用CompositedTransformTarget包装你要跟随依赖的“target”

  • 使用LayerLink将CompositedTransformTarget和CompositedTransformFollower粘在一起

下图Gif中,蓝色的Container不在overlay中,而绿色的在overlay中。蓝色的Container作为CompositedTransformTarget的child节点,绿色的作为CompostedTransformFollower的child节点,他们通过LayerLink实例连接到一起。注意绿色overlay widget是如何知道蓝色widget的bounds数据,因为蓝色widget并不在overlay中:

建议你使用DartPad亲自尝试下。
下面是实例代码(作者Hans Muller):

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: Slide()));
}

class Indicator extends StatelessWidget {
  Indicator({ Key key, this.link, this.offset }) : super(key: key);

  final LayerLink link;
  final Offset offset;

  @override
  Widget build(BuildContext context) {
    return CompositedTransformFollower(
      offset: offset,
      link: link,
      child: Container(
        color: Colors.green,
      ),
    );
  }
}

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

  @override
  _SlideState createState() => _SlideState();
}

class _SlideState extends State<Slide> {
  final double indicatorWidth = 24.0;
  final double indicatorHeight = 300.0;
  final double slideHeight = 200.0;
  final double slideWidth = 400.0;

  final LayerLink layerLink = LayerLink();
  OverlayEntry overlayEntry;
  Offset indicatorOffset;

  Offset getIndicatorOffset(Offset dragOffset) {
    final double x = (dragOffset.dx - (indicatorWidth / 2.0)).clamp(0.0, slideWidth - indicatorWidth);
    final double y = (slideHeight - indicatorHeight) / 2.0;
    return Offset(x, y);
  }

  void showIndicator(DragStartDetails details) {
    indicatorOffset = getIndicatorOffset(details.localPosition);
    overlayEntry = OverlayEntry(
      builder: (BuildContext context) {
        return Positioned(
          top: 0.0,
          left: 0.0,
          child: SizedBox(
            width: indicatorWidth,
            height: indicatorHeight,
            child: Indicator(
                offset: indicatorOffset,
                link: layerLink
            ),
          ),
        );
      },
    );
    Overlay.of(context).insert(overlayEntry);
  }

  void updateIndicator(DragUpdateDetails details) {
    indicatorOffset = getIndicatorOffset(details.localPosition);
    overlayEntry.markNeedsBuild();
  }

  void hideIndicator(DragEndDetails details) {
    overlayEntry.remove();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Overlay Indicator')),
      body: Center(
        child: CompositedTransformTarget(
          link: layerLink,
          child: Container(
            width: slideWidth,
            height: slideHeight,
            color: Colors.blue.withOpacity(0.2),
            child: GestureDetector(
              onPanStart: showIndicator,
              onPanUpdate: updateIndicator,
              onPanEnd: hideIndicator,
            ),
          ),
        ),
      ),
    );
  }
}

上面例子展示了如何将浮动widget和它依赖的“target”粘合到一起使用。接下来我们要对CompositedTransformTarget做一些Transformation来展示这些widget的真正强大之处。你会注意到绿色的overlay widget也会自动被施加这些Transformation,这一切都得益于LayerLink。

下面的gif图中,蓝色的container依然是不在overlay,绿色在。这一次我们对CompositedTransformTarget(即蓝色container)做了一个旋转的Transformation,如你所见,尽管CompositeTransformFollower位于overlay中,它依然感知得到“target”的位置和被施加的transformations。

建议你使用DartPad亲自尝试下。
下面是实例代码(作者Hans Muller):

import 'dart:math' as math;

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: Slide()));
}

class Indicator extends StatelessWidget {
  Indicator({ Key key, this.link, this.offset }) : super(key: key);

  final LayerLink link;
  final Offset offset;

  @override
  Widget build(BuildContext context) {
    return CompositedTransformFollower(
      offset: offset,
      link: link,
      child: Container(
        color: Colors.green,
      ),
    );
  }
}

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

  @override
  _SlideState createState() => _SlideState();
}

class _SlideState extends State<Slide> {
  final double indicatorWidth = 24.0;
  final double indicatorHeight = 300.0;
  final double slideHeight = 200.0;
  final double slideWidth = 400.0;

  final LayerLink layerLink = LayerLink();
  OverlayEntry overlayEntry;
  Offset indicatorOffset;

  Offset getIndicatorOffset(Offset dragOffset) {
    final double x = (dragOffset.dx - (indicatorWidth / 2.0)).clamp(0.0, slideWidth - indicatorWidth);
    final double y = (slideHeight - indicatorHeight) / 2.0;
    return Offset(x, y);
  }

  void showIndicator(DragStartDetails details) {
    indicatorOffset = getIndicatorOffset(details.localPosition);
    overlayEntry = OverlayEntry(
      builder: (BuildContext context) {
        return Positioned(
          top: 0.0,
          left: 0.0,
          child: SizedBox(
            width: indicatorWidth,
            height: indicatorHeight,
            child: Indicator(
                offset: indicatorOffset,
                link: layerLink
            ),
          ),
        );
      },
    );
    Overlay.of(context).insert(overlayEntry);
  }

  void updateIndicator(DragUpdateDetails details) {
    indicatorOffset = getIndicatorOffset(details.localPosition);
    overlayEntry.markNeedsBuild();
  }

  void hideIndicator(DragEndDetails details) {
    overlayEntry.remove();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Overlay Indicator')),
      body: Transform.rotate(
        angle: -math.pi / 12.0,
        child: Center(
          child: CompositedTransformTarget(
            link: layerLink,
            child: Container(
              width: slideWidth,
              height: slideHeight,
              color: Colors.blue.withOpacity(0.2),
              child: GestureDetector(
                onPanStart: showIndicator,
                onPanUpdate: updateIndicator,
                onPanEnd: hideIndicator,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

总结

当你要实现一个widget浮动在另一个widget之上时,使用overlay,然后连接这些widget,非常简单易用。本文中,你学会了如何使用LayerLink来粘合这些widget。现在该你自己动手了。

想了解更多关于Jose,可以访问他的GitHub、LinkedIn
YouTubeInstagram