Flutter知识点: Widget隐藏与显示

在Flutter中没有removeView,addView这种方式控制Widget Tree中的组件

场景: 根据状态显示隐藏widget

解决方案1(占位):

Widget _buildA() {
  var content;
  if (data?.isNotEmpty) {
    //如果数据不为空,则显示Text
      content = new Text('数据不为空');
  } else {
   //当数据为空我们需要隐藏这个Text
   //我们又不能返回一个null给当前的Widget Tree
   //只能返回一个长宽为0的widget占位
      content = new Container(height:0.0,width:0.0);
  }
  return content;
}

解决方案2(透明度):

class _HideAndShowPageState extends State<HideAndShowPage> {
bool visible = true;

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text('widget显示与隐藏'),
      centerTitle: true,
    ),
    body: new ListView(
      children: <Widget>[
        new Padding(
          padding: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
          child: new RaisedButton(
              textColor: Colors.black,
              child: new Text(visible ? '隐藏B    显示A' : '隐藏A   显示B'),
              onPressed: () {
                visible = !visible;
                setState(() {});
              }),
        ),
        new Padding(
          padding: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
          child: new Stack(
            children: <Widget>[
              new TestAWidget(
                visible: visible,
              ),
              new TestBWidget(
                visible: !visible,
              ),
            ],
          ),
        ),
      ],
    ),
  );
}
}

class TestAWidget extends StatelessWidget {
final bool visible;

const TestAWidget({Key key, this.visible}) : super(key: key);

@override
Widget build(BuildContext context) {
  return AnimatedOpacity(
    duration: Duration(milliseconds: 300),
    opacity: visible ? 1.0 : 0.0,
    child: new Container(
      color: Colors.blue,
      height: 100.0,
      child: new Center(
        child: new Text('TestAWidget'),
      ),
    ),
  );
}
}

class TestBWidget extends StatelessWidget {
final bool visible;

const TestBWidget({Key key, this.visible}) : super(key: key);

@override
Widget build(BuildContext context) {
  return AnimatedOpacity(
    duration: Duration(milliseconds: 300),
    opacity: visible ? 1.0 : 0.0,
    child: new Container(
      color: Colors.green,
      height: 100.0,
      child: new Center(
        child: new Text('TestBWidget'),
      ),
    ),
  );
}
}

解决方案3(Offstage):

class TestCWidget extends StatelessWidget {
 final bool visible;

 const TestCWidget({Key key, this.visible}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return new Offstage(
     offstage: visible,
     child:new Container(
       color: Colors.orange,
       height: 100.0,
       child: new Center(
         child: new Text('TestCWidget'),
       ),
     ),
   );
 }
}

showandhide.gif

ps:如果还有别的方案,麻烦告知下,谢谢!

已有项目集成到Flutter代码已经上传到我的GITHUB

知乎日报Flutter版代码已经上传到我的GITHUB

基础学习过程中的代码都放在GITHUB

每天学一点,学到Flutter发布正式版!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,360评论 25 709
  • 一日往市中心逛街,走得腿酸脚乏,胃袋空空,只想坐落吃东西。满街食肆招牌迎风闪亮,反叫人定不下该去何处。都说做人最怕...
    任宁阅读 446评论 1 5
  • 独自徘徊在悠长悠长又寂寥的长廊 回忆着我深思的同窗死党 清冷的夜有了思隐伤 停下的脚步 迷了彷徨 同桌死党 上班的...
    醽醁小姐阅读 276评论 1 8
  • 一粒孤独的种子 在一次偶然的梦呓中集结成玉 却被命运女神随手弃于泥潭 一颗七窍玲珑的心 不惧黑暗 不忧逆境 她有的...
    云水禅心千古情阅读 209评论 0 1
  • 她影唯一为女孩定制的泛电影文化平台原创文章,转载需联系公众号: 她影 herinfilm 面斥不雅 有个问题我思考...
    她影阅读 340评论 0 1