doc: update docs/flutter.md #830

Author: jaywcjlove

docs/flutter.md

@@ -41,6 +41,7 @@ $ sudo softwareupdate --install-rosetta --agree-to-license
 <!--rehype:className=style-timeline-->
 
 ### Windows 操作系统上安装和配置
+<!--rehype:wrap-class=col-span-2-->
 
 > 完整教程请参阅 Flutter 中文社区的 [安装和环境配置](https://docs.flutter.cn/get-started/install)
 
@@ -783,7 +784,8 @@ ListView.separated(
 ```
 
 ### GridView
-<!--rehype:wrap-class=col-span-2-->
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
 `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<HomeState>{
 ```
 
 #### AnimatedPadding
-> 通过配置padding值的改变，引起组件的移动动画效果,同样支持curve和duration的配置
+
+通过配置padding值的改变，引起组件的移动动画效果,同样支持curve和duration的配置
 
 ```dart
 class _HomeState extends State<HomeState>{
@@ -979,7 +985,8 @@ class _HomeState extends State<HomeState>{
 ```
 
 #### AnimatedAlign
-> 通过配置alignment值的改变，引起组件的对齐动画效果,同样支持curve和duration的配置
+
+通过配置alignment值的改变，引起组件的对齐动画效果,同样支持curve和duration的配置
 
 ```dart
 class _HomeState extends State<HomeState>{
@@ -1017,7 +1024,7 @@ class _HomeState extends State<HomeState>{
 
 #### AnimatedOpacity
 
->通过配置opacity值的改变，引起组件的透明度变化动画效果,同样支持curve和duration的配置
+通过配置opacity值的改变，引起组件的透明度变化动画效果,同样支持curve和duration的配置
 
 ```dart
 class _HomeState extends State<HomeState>{
@@ -1052,9 +1059,10 @@ class _HomeState extends State<HomeState>{
   }
 }
 ```
+
 #### AnimatedPositioned
 
-> 通过配置top,left,right,bottom值的改变，引起组件的距离变化动画效果,同样支持curve和duration的配置
+通过配置top,left,right,bottom值的改变，引起组件的距离变化动画效果,同样支持curve和duration的配置
 
 ```dart
 class _HomeState extends State<HomeState>{
@@ -1094,12 +1102,13 @@ class _HomeState extends State<HomeState>{
 ```
 
 ### 2.显示动画
+<!--rehype:wrap-class=col-span-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<Boxed> with SingleTickerProviderStateMixin{
@@ -1111,7 +1120,7 @@ class _Boxed extends State<Boxed> with SingleTickerProviderStateMixin{
     _controller = AnimationController(
         vsync: this,
         duration: const Duration(seconds: 1)
-    )..repeat(); //让程序和手机的刷新频率统一
+    )..repeat(); // 让程序和手机的刷新频率统一
   }
 
   @override
@@ -1129,18 +1138,6 @@ class _Boxed extends State<Boxed> with SingleTickerProviderStateMixin{
 
 #### AnimationController
 
-> controller的播放方式
->
-> repeat 重复 
->
-> forward 播放一次
->
-> reverse 倒序播放
->
-> stop 停止
->
-> reset 重置
-
 ```dart
 class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
 
@@ -1149,37 +1146,38 @@ class _HomeState extends State<HomeState> 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(
               title: const Text("测试"),
             ),
             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<HomeState> with SingleTickerProviderStateMixin {
 
 #### FadeTransition
 
->RotationTransition实现透明度变化动画,opacity为AnimationController,可以在initState初始化的时候设置vsync,duration来让程序和手机的刷新频率统一,同时controller为0-1的值,因此opacity会发生从透明到实体的过程,如果要实现实体逐渐到透明可以使用reverse()倒序播放
+`FadeTransition` 实现透明度变化，`opacity` 为 `AnimationController`。可以通过 `reverse()` 实现从实体逐渐变透明。
 
 ```dart
 class _HomeState extends State<HomeState> with SingleTickerProviderStateMixin {
@@ -1202,8 +1200,8 @@ class _HomeState extends State<HomeState> 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<HomeState> 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<HomeState> 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