Container 属性动画

196 阅读1分钟

完成此功能,需要三个步骤

  1. 创建一个StatefulWidget
  2. 创建一个AnimatedContainer
  3. 触发动画重新构建新的属性

对以上步骤做详细说明

1,创建一个StatefulWidget,新建一个类继承StatefulWidget,要实现抽象方法createState(),

createState要返回一个State对象,然后创建一个类继承自State对象,类名为MyAnimatedContainerState

2,创建一个AnimatedContainer,定义变量width, height,background color , border radius变量,赋值给AnimatedContainer的属性

3, 触发动画重新构建新的属性, 创建一个Scaffold对象,把创建的AnimatedContainer组件赋值给Scaffold对象的body属性,为了让动画在屏幕中间显示,选择Center组件包裹AnimatedContainer,创建一个FloatingActionBarButton对象,显示文本为Text 更新,实现点击onPress事件,动态的修改宽、高、颜色、以及corner,这些变化都应包含在setState函数当中,才会触发Flutter Engine重新初始化页面

下面是完整的代码

效果图如下