Flutter-offStage

介绍:
作用很简单,通过offsatge字段控制child是否显示,比较常用的控件;

布局行为:
offstage的布局行为完全取决于offstate参数,offstage默认为true,不显示;

• 当offstage为true,child不会绘制到屏幕上,不会响应点击事件,也不会占用空间;
• 当offstage为false,child绘制到屏幕上;
  注意,当offstage不可见,如果child有动画,应该手动停止动画,offstage不会停止动画;

继承关系

Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > Offstage

构造函数

Offstage({Key key, bool offstage: true, Widget child })

常用属性:

• offstage → bool

  控制child显示隐藏;

• child → Widget

  子child;

示例代码:

class MyOffStage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyOffStageState();
  }
}

class MyOffStageState extends State<MyOffStage> {
  bool _offStage;


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        centerTitle: true,
        title: Text('OffStage'),
      ),
      body: Container(
        color: Colors.white,
        child: Column(
          children: <Widget>[
            _firstWidget(),
            _secondWidget()
          ],
        ),
      ),
    );
  }

  _firstWidget() {
    return FlatButton(
      onPressed: () {
        setState(() {
         _offStage = !_offStage;
        });

      },
      child: Text('$_offStage'),
      color: Colors.green,
    );
  }

  _secondWidget(){

    return Offstage(offstage: _offStage,child: Container(
      width: 50.0,
      height: 50.0,
      color: Colors.blueAccent,
    ),);

  }


}

如果offstage为true,child自身的最小最大宽度返回0.0;而且也不会绘制child,也不会加载到内存中;offstage并不是通过插入或者删除widget tree的节点来实现显示隐藏效果,而是通过自身尺寸,不响应hitTest以及不绘制,来达到展示与隐藏的效果;