diff --git a/docs/flutter.md b/docs/flutter.md index 2d4195a..b6b5b68 100644 --- a/docs/flutter.md +++ b/docs/flutter.md @@ -41,6 +41,7 @@ $ sudo softwareupdate --install-rosetta --agree-to-license ### Windows 操作系统上安装和配置 + > 完整教程请参阅 Flutter 中文社区的 [安装和环境配置](https://docs.flutter.cn/get-started/install) @@ -783,7 +784,8 @@ ListView.separated( ``` ### GridView - + + `GridView`可将元素显示为二维网格状的列表组件，并支持主轴方向滚动。 使用GridView() 构造函数，需要传入gridDelegate和children。Flutter中已经提供了两种实现方式，分别是: @@ -892,14 +894,17 @@ PageView.builder( ), ), ``` -## flutter动画组件 + +Flutter 动画组件 +--- ### 1.隐式动画 -> 在动画组件内，直接配置curve和duration属性 +在动画组件内，直接配置curve和duration属性 #### AnimatedContainer -> 使用AnimatedContainer组件，配置curve曲线过渡和duration过渡时间 + +使用AnimatedContainer组件，配置curve曲线过渡和duration过渡时间 ```dart class HomeState extends StatefulWidget{ @@ -942,7 +947,8 @@ class _HomeState extends State{ ``` #### AnimatedPadding -> 通过配置padding值的改变，引起组件的移动动画效果,同样支持curve和duration的配置 + +通过配置padding值的改变，引起组件的移动动画效果,同样支持curve和duration的配置 ```dart class _HomeState extends State{ @@ -979,7 +985,8 @@ class _HomeState extends State{ ``` #### AnimatedAlign -> 通过配置alignment值的改变，引起组件的对齐动画效果,同样支持curve和duration的配置 + +通过配置alignment值的改变，引起组件的对齐动画效果,同样支持curve和duration的配置 ```dart class _HomeState extends State{ @@ -1017,7 +1024,7 @@ class _HomeState extends State{ #### AnimatedOpacity ->通过配置opacity值的改变，引起组件的透明度变化动画效果,同样支持curve和duration的配置 +通过配置opacity值的改变，引起组件的透明度变化动画效果,同样支持curve和duration的配置 ```dart class _HomeState extends State{ @@ -1052,9 +1059,10 @@ class _HomeState extends State{ } } ``` + #### AnimatedPositioned -> 通过配置top,left,right,bottom值的改变，引起组件的距离变化动画效果,同样支持curve和duration的配置 +通过配置top,left,right,bottom值的改变，引起组件的距离变化动画效果,同样支持curve和duration的配置 ```dart class _HomeState extends State{ @@ -1094,12 +1102,13 @@ class _HomeState extends State{ ``` ### 2.显示动画 + -> 使用显示动画,定义AnimationController,在组件上with SingleTickerProviderStateMixin +使用显示动画时，定义 `AnimationController`，并在组件中使用 `SingleTickerProviderStateMixin`。 #### RotationTransition ->RotationTransition实现旋转动画,turns为AnimationController,可以在initState初始化的时候设置vsync,duration来让程序和手机的刷新频率统一,使用..联级操作调用repeat函数让动画重复运动 +`RotationTransition` 实现旋转动画，`turns` 为 `AnimationController`。在 `initState` 中设置 `vsync` 和 `duration`，使用 `..repeat()` 实现动画循环。 ```dart class _Boxed extends State with SingleTickerProviderStateMixin{ @@ -1111,7 +1120,7 @@ class _Boxed extends State with SingleTickerProviderStateMixin{ _controller = AnimationController( vsync: this, duration: const Duration(seconds: 1) - )..repeat(); //让程序和手机的刷新频率统一 + )..repeat(); // 让程序和手机的刷新频率统一 } @override @@ -1129,18 +1138,6 @@ class _Boxed extends State with SingleTickerProviderStateMixin{ #### AnimationController -> controller的播放方式 -> -> repeat 重复 -> -> forward 播放一次 -> -> reverse 倒序播放 -> -> stop 停止 -> -> reset 重置 - ```dart class _HomeState extends State with SingleTickerProviderStateMixin { @@ -1149,15 +1146,15 @@ class _HomeState extends State with SingleTickerProviderStateMixin { @override void initState() { super.initState(); - _controller = - AnimationController(vsync: this, duration: const Duration(seconds: 1));//让程序和手机的刷新频率统一 + // 让程序和手机的刷新频率统一 + _controller = AnimationController(vsync: this, duration: const Duration(seconds: 1)); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( - floatingActionButton:FloatingActionButton(onPressed: (){ + floatingActionButton:FloatingActionButton(onPressed: () { _controller.repeat(); //重复播放 },child:const Icon(Icons.add),) , appBar: AppBar( @@ -1165,21 +1162,22 @@ class _HomeState extends State with SingleTickerProviderStateMixin { ), body: Center( child: Column( - children: [RotationTransition( - turns: _controller, - child: const FlutterLogo(size: 60), - ), - ElevatedButton(onPressed: (){ - _controller.forward(); //播放一次 - }, child:const Icon(Icons.refresh)), + children: [ + RotationTransition( + turns: _controller, + child: const FlutterLogo(size: 60), + ), ElevatedButton(onPressed: (){ - _controller.reverse(); //倒序播放 + _controller.forward(); // 👈 播放一次 }, child:const Icon(Icons.refresh)), ElevatedButton(onPressed: (){ - _controller.stop(); //停止 + _controller.reverse(); // 👈 倒序播放 }, child:const Icon(Icons.refresh)), ElevatedButton(onPressed: (){ - _controller.reset(); //重置 + _controller.stop(); // 👈 停止 + }, child:const Icon(Icons.refresh)), + ElevatedButton(onPressed: (){ + _controller.reset(); // 👈 重置 }, child:const Icon(Icons.refresh)), ] ) @@ -1192,7 +1190,7 @@ class _HomeState extends State with SingleTickerProviderStateMixin { #### FadeTransition ->RotationTransition实现透明度变化动画,opacity为AnimationController,可以在initState初始化的时候设置vsync,duration来让程序和手机的刷新频率统一,同时controller为0-1的值,因此opacity会发生从透明到实体的过程,如果要实现实体逐渐到透明可以使用reverse()倒序播放 +`FadeTransition` 实现透明度变化，`opacity` 为 `AnimationController`。可以通过 `reverse()` 实现从实体逐渐变透明。 ```dart class _HomeState extends State with SingleTickerProviderStateMixin { @@ -1202,8 +1200,8 @@ class _HomeState extends State with SingleTickerProviderStateMixin { @override void initState() { super.initState(); - _controller = - AnimationController(vsync: this, duration: const Duration(seconds: 1));//让程序和手机的刷新频率统一 + //让程序和手机的刷新频率统一 + _controller = AnimationController(vsync: this, duration: const Duration(seconds: 1)); } @override @@ -1227,22 +1225,20 @@ class _HomeState extends State with SingleTickerProviderStateMixin { } ``` -> 也可以通过lowerBound和upperBound来配置controller的最低和最高值 +也可以通过 lowerBound 和 upperBound 来配置 controller 的最低和最高值 #### ScaleTransition -> ScaleTransition实现放大缩小动画,scale为AnimationController,可以在initState初始化的时候设置vsync,duration来让程序和手机的刷新频率统一,同时controller为0-1的值,因此scale会发生从小到大的过程,如果要实现大逐渐到小可以使用reverse()倒序播放 +`ScaleTransition` 实现缩放动画，`scale` 为 `AnimationController`，可以通过 `reverse()` 实现从大到小的动画效果。 ```dart class _HomeState extends State with SingleTickerProviderStateMixin { - late AnimationController _controller; - @override void initState() { super.initState(); - _controller = - AnimationController(vsync: this, duration: const Duration(seconds: 1));//让程序和手机的刷新频率统一 + // 让程序和手机的刷新频率统一 + _controller = AnimationController(vsync: this, duration: const Duration(seconds: 1)); } @override