AnimatedContainer(//动画速率curve:Curves.easeInBack,//动画执行结束的回调onEnd:(){},//子Widget对齐方式alignment:Alignment.center,width:300,//高度height:200,//背景颜色// color: Colors.deepPurple,//内边距padding:EdgeInsets.all(0),//复杂装饰样式decoration:BoxDecoration(//背景色color:Colors.red,//...
隐式动画有一个特点,那就是它们都是以「Animated」开头。 ❞ 基本使用 AnimatedContainer的使用非常简单,甚至和普通的Container没有太大的区别,代码如下所示。 AnimatedContainer( margin: EdgeInsets.only(top:20), width: size, height: size, decoration: BoxDecoration( color: color, borderRadius: BorderRadius...
❝ 隐式动画有一个特点,那就是它们都是以「Animated」开头。 ❞ 基本使用 AnimatedContainer的使用非常简单,甚至和普通的Container没有太大的区别,代码如下所示。 AnimatedContainer( margin: EdgeInsets.only(top: 20), width: size, height: size, decoration: BoxDecoration( color: color, borderRadius: Borde...
animated_container_3.png示例4 属性decoration属性decoration会在子部件后面添加一些装饰,举个小例子,添加圆角半径,圆角等于正方形边长一半时就变成了圆。 注:AnimatedContainer的color属性与decoration属性不能同时存在,decoration中含有一个color属性。关于Decoration会在后面再讲。
比如AnimatedContainer,这一类小部件都以Animated开头,示例如下: AnimatedContainer(duration:constDuration(seconds:3),width:300,height:300,color:Colors.blue,) 将上面的颜色换成其他颜色然后热更新一下,就会有颜色过渡动画。这一类的动画小部件只对自己的属性起到动画效果,他不能控制自己的child也执行动画。
Flutter 中,Container是一个用于布局和装饰的组件,可以类比于 CSS 中的某些元素。 类似于 CSS 中的div元素 BoxDecoration的一些常用属性包括: -color:用于设置背景颜色。 -border:用于设置边框样式,可以指定边框的宽度、颜色和圆角。 -borderRadius:用于设置边框的圆角半径。 -gradient:用于创建渐变背景效果,可以是线性...
duration:constDuration(seconds: 1),//时间opacity: flag ? 1 : 0.3,//透明度child: Container( width:300, height:300, color: Colors.blue, ), ), ), ); } } AnimatedDefaultTextStyle classMyHomePageextendsStatefulWidget {constMyHomePage({Key? key}) :super(key: key); ...
( animation: _colorAnimation, builder: (context, child) { return Container( width: 200, height: 200, decoration: BoxDecoration( border: Border.all(color: _colorAnimation.value), ), ); }, ); } } void main() { runApp(MaterialApp( home: Scaffold( body: Center( child: AnimatedBorderColor(...
Text("Hello World").animate().custom( duration: 300.ms, builder: (context, value, child) => Container( color: Color.lerp(Colors.red, Colors.blue, value), padding: EdgeInsets.all(8), child: child, // child is the Text widget being animated ) ) 通过.custom 来自定义动画,builder 中...
(parent:_controller,curve:Curves.easeIn,); @overridevoiddispose(){_controller.dispose();super.dispose();} @override Widgetbuild(BuildContext context){returnContainer(color:Colors.white,child:FadeTransition(opacity:_animation,child:constPadding(padding:EdgeInsets.all(8),child:FlutterLogo()),)...