美文网首页
flutter显示隐藏wiget

flutter显示隐藏wiget

作者: 旺仔_100 | 来源:发表于2020-08-15 10:26 被阅读0次

    解决方案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; }

    跟这种方法类似的是动态的改变wigdet的宽高来显示隐藏,不过没有实践过。

    解决方案2(透明度):

    这个是通过 Opacity 组建的opacity属性来控制显示和隐藏。

    @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'), ), ), ); }

    解决方案3(Offstage):这个是通过 Offstage 组件的 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'), ), ), ); } }

    个人推荐方案2和方案3 参考资料 https://www.jianshu.com/p/3caddaeb0f1b

    相关文章

      网友评论

          本文标题:flutter显示隐藏wiget

          本文链接:https://www.haomeiwen.com/subject/vooodktx.html