Flutter系列：幕后幽灵

flutter介绍我们在使用flutter的时候，有时候需要控制某些组件是否显示。一种方式是从rendertree中删除这个组件，这样这个组件就相当于看起来不一样了，但是有时候，我们只是不想显示这个widget，但是这个组件还存在，可以接受键盘输入，并且可以使用CPU。它与真实组件的唯一区别在于它是不可见的。这样的组件称为Offstage。今天就给大家详细介绍一下Offstage的使用方法。Offstage详解先来看一下Offstage的定义：接下来看它的构造函数：constOffstage({Key?key,this.offstage=true,Widget?child}):assert(offstage!=null),super(key:key,child:child);Offstage主要包含两个属性，是bool值offstage，表示是否处于offstage状态。如果offstage=true，offstage孩子将被隐藏。这时，孩子不会占用任何空间。剩下的属性是孩子。那么Offstage如何控制孩子是否在后台呢？我们看一下它的createRenderObject方法：RenderOffstagecreateRenderObject(BuildContextcontext)=>RenderOffstage(offstage:offstage);可以看到返回的是一个RenderOffstage对象，它接受一个offstage参数。如果你深入研究RenderOffstage，你会发现他的paint方法是这样的：voidpaint(PaintingContextcontext,Offsetoffset){if(offstage)return;super.paint（上下文，偏移量）；如果offstage为true，paint方法直接返回，不作任何绘制。这就是Offstage的秘密。Offstage的使用从上面解释的Offstage构造函数我们知道Offstage需要一个booloffstage属性。所以可以改变这个offstage属性来触发不同的offstage状态。因为offstage需要这样的状态，所以我们在使用offstage的时候，一般会创建一个StatefulWidget，在StatefulWidget中维护这样一个offstage属性。比如我们创建一个OffstageApp，它是一个StatefulWidget。在其createState方法中，返回一个State对象。在createState方法中，我们定义了一个_offstage属性。通过使用这个_offstage，我们可以创建Offstage如下：我们把Offstage的offstage设置为我们刚刚设置的_offstage。另外，为了展示方便，我们将Offstage的child设置为一个SizedBox，其中包含一个红色的Container。SizedBox中包含width和height属性，方便我们后续的测试。默认情况下，因为_offstage=true，所以这个Offstage是不可见的，那么如何让它可见呢？我们提供了一个ElevatedButton，在它的onPressed方法中，我们调用setState方法修改_offstage，如下：});},),另外我们还需要一个ElevatedButton来检测Offstage的大小，看看Offstage是否会随着_offstage的变化而变化。ElevatedButton(child:constText('DetectSizedBoxsize'),onPressed:(){ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:Text('SizedBoxis${_getSizedBoxSize()}'),),);})这里_getSizedBoxSize的实现如下：Size_getSizedBoxSize(){finalRenderBoxrenderBox=_key.currentContext!.findRenderObject()!作为渲染框；返回渲染框大小；我们通过Offstage的_key得到它的Context，从而找到对应的RenderBox并得到它的size。好了，我们的代码就这样写好了，最后将OffstageApp放到Scaffold中运行，可以得到如下界面：Offstage默认不会显示。如果我们点击下面的按钮检测SizeBox的大小，可以得到如下界面：可以看到Offstage虽然没有显示出来，但是还是获取到了它的大小。然后我们点击SwitchOffstage按钮，得到如下界面：界面完美显示。总结Offstage是一个非常好用的组件，可以用来隐藏我们不需要显示的组件，但仍然可以获取它的大小。本文示例：https://github.com/ddean2009/learn-flutter.git