解决方案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
网友评论