【Flutter 组件集录】Offstage｜ 8月更文挑战

前言：

这是我参与8月更文挑战的第 11 天，活动详情查看：8月更文挑战。为应掘金的八月更文挑战，我准备在本月挑选 31 个以前没有介绍过的组件，进行全面分析和属性介绍。这些文章将来会作为 Flutter 组件集录 的重要素材。希望可以坚持下去，你的支持将是我最大的动力~

一、认识 Offstage 组件

大家可能知道 Offstage 组件可以让 child 组件显示/隐藏，但很少用它。毕竟想让一个组件显示/隐藏，我们有其他的手段。比如通过 if 判断，那 Offstage 组件的价值何在，为什么要有这个组件，它有哪些特性？带着这些问题，我们今天就来详细分析一下 Offstage 组件。

1. Offstage 基本信息

下面是 Offstage 组件类的定义和 构造方法，可以看出它继承自 SingleChildRenderObjectWidget。实例化时可以传入布尔型的 offstage 和 child 组件。

2. Offstage 的使用

Offstage 的使用非常简单，只需给定offstage 的值，就能对 child 组件进行显示或隐藏。其中 offstage:true 表示不在舞台上，即隐藏。源码注释中有个实例，我们就以此来认识 Offstage 的使用。

通过点击按钮切换 _offstage 的状态，来显示或隐藏 buildChild 构建的图标组件。可以看出一点：通过 Offstage 组件隐藏的子组件，不会在屏幕上占据位置。

class OffstageDemo extends StatefulWidget {
  @override
  _OffstageDemoState createState() => _OffstageDemoState();
}

class _OffstageDemoState extends State<OffstageDemo> {
  bool _offstage = true;
  
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          child: const Text('切换显隐'),
          onPressed: () {
            setState(() {
              _offstage = !_offstage;
            });
          },
        ),
        Offstage(
          offstage: _offstage,
          child: buildChild(),
        ),
        Text('图标是否隐藏: $_offstage'),
      ],
    );
  }

  Widget buildChild() => const Padding(
        padding: EdgeInsets.all(10),
        child: Icon(
          Icons.camera_outlined,
          color: Colors.green,
          size: 50,
        ),
      );
}
复制代码

3.Offstage 的特点

上面一个案例就能说明 Offstage 的使用和作用，很多人也就到这里浅尝辄止。但当我们查看渲染树时，可以发现被隐藏组件对应的渲染对象依旧在树上。也就是说，它虽然不可见，但它还在。

这样我们可以通过 GlobalKey 去获取渲染对象，拿到被隐藏的组件大小。注意：这个操作并不是在说组件尺寸要通过 Offstage 来获取，而是说 Offstage 可以获取隐藏组件大小。任何组件都可以通过 GlobalKey 来拿到渲染对象获取尺寸。这里只是在说明被 Offstage 隐藏的组件，对应的渲染对象依旧在树中。

final GlobalKey _key = GlobalKey();

Size _getSize() {
  final RenderBox box = _key.currentContext!.findRenderObject()! as RenderBox;
  return box.size;
}

Widget buildChild() =>  Padding(
  key: _key, //<--- 
  padding: const EdgeInsets.all(10),
  child: const Icon(
    Icons.camera_outlined,
    color: Colors.green,
    size: 50,
  ),
);
复制代码

由于这种特性，对于隐藏具有动画效果的组件要格外注意。拿 CupertinoActivityIndicator 举例，它是通过 CustomPaint 组件进行绘制的，其中会维护一个不停运动的动画控制器，用于触发画板的重绘。动画控制器会在 RenderCustomPaint 被监听，触发 markNeedsPaint 。

通过调试可以发现，即使 CupertinoActivityIndicator 被隐藏，但动画器仍会不断运行，RenderCustomPaint 监听动画器改变，也会不断触发 markNeedsPaint，这显然是不友好的。所以我们需要在隐藏 CupertinoActivityIndicator 的同时，关掉动画。那么问题来了，CupertinoActivityIndicator 组件的动画器是维护在组件状态内部的，我们如何控制，这里先按下不表，在后面的 TickerMode 组件一文中进行探讨。

Widget buildChild() =>  Padding(
  key: _key,
  padding: const EdgeInsets.all(10),
  child:CupertinoActivityIndicator(
    radius: 20,
  ),
);
复制代码

二、 Offstage 的源码实现

1. Offstage 源码分析

它继承自 SingleChildRenderObjectWidget 就说明，该组件需要维护一个 RenderObject 对象的创建及更新。

在 createRenderObject 方法中，创建 RenderOffstage ，offstage 作为构造入参。在 updateRenderObject 中，对 RenderOffstage 对象进行更新。也就是说，组件的显示/隐藏是在 RenderAnimatedOpacity 中进行的。

2. RenderOffstage 源码

RenderOffstage 作为一个 RenderObject ，负责布局与绘制。可以看到在源码的处理中，计算宽高时，当offstage 为 true ，会返回 0 ，这也是为什么在界面上不会显示的原因。

在 performLayout 中，如果 offstage 为 true ，子渲染对象会执行 layout 。说明即使是隐藏，子节点也会进行布局。

3. 点击和绘制

hitTest 用于点击处理，可以看出，如果 offstage 为 true 是不会响应点击的。paint 用于绘制，如果 offstage 为 true 直接返回，不会进行绘制。也就是说 offstage 为 true ，即使 CupertinoActivityIndicator 不停触发 markNeedsPaint ，也不会执行子渲染对象的绘制操作。

Offstage 的使用方式到这里就介绍完毕，那本文到这里就结束了，谢谢观看，明天见~