Flutter 组件淡入淡出

2,489 阅读1分钟

(一)简单实现组件淡入淡出动画

1,定义一个Container对象 2,定义一个StatefulWidget组件 3,定义一个button,切换Container显示还是隐藏 4,实现Container的淡出淡出

对以上步骤做简要说明 1,定义一个Container对象

2,定义一个StatefulWidget组件,因为需要管理Container显示还是隐藏动画,所以定一个StatefulWidget组件,StatefulWidget类创建了一个State对象,对象可以定义一些数据,然后方法可以更新这些数据,然后就可以告诉Flutter重新绘制UI,使用这些变化的数据,Android studio 和VSCode可以使用stful快捷键快速创建一个StatefulWidget组件

3,定义一个button,切换Container显示还是隐藏, 我们创建一个自己的Scaffold组件,在_MyScaffoldState类中返回一个Scaffold,使用命名可选参数floatingActionBar,定义一个button

4,实现Container的淡出淡出,要给Container包裹一个AnimatedOpacity组件,有两个必填的参数,opacity和duration,透明度和动画的时间

最后在代码中简单实现,如果组件是可兼得,动画从1.0到0.0不可见,如果组件是隐藏的,动画从0.0到1.0到显示可见

完整代码如下

显示效果如下图