flutter显示隐藏wiget

2020-08-15  本文已影响0人  旺仔_100

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

上一篇下一篇

猜你喜欢

热点阅读