Flutter - Framework

线程模型

Flutter是运行Engine上来实现跨平台的，Dart支持通过isolate实现异步处理的逻辑。但是线程的管理和创建并不是有Engine负责，而是交由Embedder去实现，除了线程之外Embedder还负责了事件循环、平台插件等相关逻辑，Embedder就是Flutter和运行平台之间的中间层架构，他们的关系如下图：

架构图

在Flutter Engine中需要运行四个任务，分别是：UI Task Runner、Platform Task Runner、GPU Task Runner、I/O Task Runner，这四个任务运行在不同的线程之上。

UI Task Runner

UI Task Runner其实就是Flutter的UI运行任务，也就是我们所说的UI线程，因为UI Task Runner会执行的Dart的root isolate去齐总运行App main方法，并且为其绑定了UI渲染提交的回调等。这也是为什么称Flutter是单线程应用的原因，这里指的就是UI Task Runner。UI Task Runner除了处理UI之外还处理了microTasks、插件消息的响应处理等相关逻辑。

UI Task Runner

谷歌官方的UI渲染绘制流程：

image-20210318151533200.png

GPU Task Runner

当UI Task Runner生成Layer Tree之后，接下来的处理就会给GPU Task Runner处理，GPU Task Runner会把Layer Tree转化为Skia所需要的绘制指令，通过延迟调度和Buffer来保证绘制任务的流程运行，下图就是GPU的整个流程

image-20210318152725197.png

I/O Task Runner

I/O Task Runner就是顾名思义具备读写能力线程，比如图片数据的获取、解析成渲染数据等耗时操作，这些都属于耗时操作，交给其他三个Task Runner处理明显不合适，所以对于需要耗时的操作，一般都是通过对I/O Task Runner处理。

Platform Task Runner

Platform Task Runner是Flutter Engine的主线程，在Flutter 中所有和Engine调用都会通过Platform Task Runner，之所以这样子做是为了保证线程安全。但是也带来了一个弊端，某个任务的处理造成了严重堵塞的时候，可能会引发应用的ANR奔溃。

那么对与一些耗时的操作，我们应该放到哪里去处理呢？答案就是isolate

isolate

isolate运行我们开辟一个线程，由于isolate的特性（数据不能互通），所以也不要锁。在实际开发中比如json等一些耗时操作我们就可以使用isolate去处理。

isolate对比传统的线程最大区别是：

• 数据不共享
• 只能通过port进行通信
• 每个isolate都有自己的内存和任务管理

单线程运行

之说以说Flutter是单线程应用，是因为Dart数据单线程运行机制，而这个机制主要是通过消息循环机制和任务调度处理，其中有两个任务队列：microTask queue和Event queue。

其中microTask优先级高于Event queue，从下面的运行流程图就可以很明显的看出。

实际开发中也要注意由于microTask的特性（优先级高），如果频繁把任务插入到microTask中去执行，就可能会造成UI卡顿和掉帧的现象。

[图片上传失败...(image-ff934f-1616915674307)]

async/await、Future

通常我们使用async/await和Future来实现异步的操作，但实际上这并不是真正的异步，而是在单线程上的任务调度，也称之为协程。协程是不具备线程一样并发执行的能力。简单的说就是当程序执行被标注了async方法，运行到await的时候，表示这个方法需要等待结果，此时就会跳过这个片段代码继续执行其他逻辑，然后在程序在下一次轮询的时候，在判断是否有了返回结果，如果就执行，没有就继续等待下一个轮询。

比如我们要在StatefulWidget中的initState方法中通过context获取一些数据，如果我们直接使用，就会抛出异常，但是我们使用Future.delay(duration: Duration(seconds: 0)).then(() {...})方法包装起来之后，则不会出现该问题。这是因为获取context的逻辑会被放到下一个轮询中 被执行。

动画

我们知道，动画其实是由帧构成的，每一帧都是一张图片，多张图片连续执行，就形成了动画。

普通动画

之前我们说过Widget是不可变的，那么Widget是如何产生动画的呢？

我们用一个示例来看看，一个简单的放大动画的实现。

示例代码

class AnimationControllerPage extends StatefulWidget {
  @override
  _AnimationControllerPageState createState() =>
      _AnimationControllerPageState();
}

class _AnimationControllerPageState extends State
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  double size = 100;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      lowerBound: 100,
      upperBound: 200,
      duration: Duration(milliseconds: 500),
    );
    _animationController.addListener(() {
      setState(() {
        size = _animationController.value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AnimationController"),
      ),
      body: Center(
        child: InkWell(
          onTap: () {
            if (_animationController.value == 200) {
              _animationController.reverse();
            } else {
              _animationController.forward();
            }
          },
          child: Container(
            width: size,
            height: size,
            color: Colors.yellow,
            child: Center(
              child: Text(_animationController.value == 200 ? "点我缩小" : "点我放大"),
            ),
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}

实现分析

当我们要实现一个从100→200的矩形变大动画的时候，最重要的就是每一帧都让这个矩形变大一点，每一帧变大多少，就通过动画总时长和矩形大小的比（不考虑Curve)，然后得到每一帧的宽高值，在把值设置给矩形。

所以我们需要三个条件：

• 可以更新
• 并且是每一帧都会有回调
• 能帮我们计算没帧的宽高值的对象

分析上面的代码

• 首先这个是StatefulWidget

  这里使用它的关键地方就是他可以使用setState进行跟新UI操作

• 其次我们混入了SingleTickerProviderStateMixin

  提供了每一帧的绘制回调Tick

• 然后我们使用了AnimationController

  通过TickerProviderStateMixin每一帧的回调，在使用AnimationController内部的simulation计算单位时间内value的值，最后通过setState进行更新

内部_tick的源码示例：

  void _tick(Duration elapsed) {
    _lastElapsedDuration = elapsed;
    final double elapsedInSeconds = elapsed.inMicroseconds.toDouble() / Duration.microsecondsPerSecond;
    assert(elapsedInSeconds >= 0.0);
    _value = _simulation!.x(elapsedInSeconds).clamp(lowerBound, upperBound);
    if (_simulation!.isDone(elapsedInSeconds)) {
      _status = (_direction == _AnimationDirection.forward) ?
        AnimationStatus.completed :
        AnimationStatus.dismissed;
      stop(canceled: false);
    }
    notifyListeners();
    _checkStatusChanged();
  }

最后我们发现上面使用的是SingleTickerProviderStateMixin，如果我们要在一个页面使用多个动画的时候，只需要把SingleTickerProviderStateMixin换成TickerProviderStateMixin。

至于具体的动画案例，后续出对应的文章。

路由动画

路由动画指的就是我们在页面进行切换的时候两个页面展示的动画。系统默认给我们实现了一套，代码在theme的pageTransitionTheme设置。我们可以在这里进行自定义，同时也可以在push的时候自定义PageRouterBuilder，在设置transitionsBuilder设置动画效果。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Animation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        pageTransitionsTheme: PageTransitionsTheme(
            builders: {
              TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
              TargetPlatform.iOS: FadeUpwardsPageTransitionsBuilder(),
            }),
      ),
    );
  }
}


/// 自定义PageRouterBuilder
goNextPage(BuildContext context) {
  var router = PageRouteBuilder(
      pageBuilder: (BuildContext context, Animation animation,
          Animation secondaryAnimation) {
        return Page();
      },
      transitionsBuilder: (BuildContext context, Animation animation,
          Animation secondaryAnimation, Widget child) {
        return SlideTransition(position: Tween(
          begin: Offset(0.0, 0.0),
          end: Offset(0.0, 0.0),
        ).animate(animation), child: child,);
      });

  return Navigator.push(context, router);
}

Hero动画

使用Hero动画的时候我们需要注意两个Hero Widget分别位于两个页面当中，但是两个Hero的tag必须一致。

如以下示例代码：

const String _heroTag = '_heroTag';
const String _imgUrl =
    "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1915138504,138225023&fm=111&gp=0.jpg";

class HeroAnimatedPage extends StatefulWidget {
  @override
  _HeroAnimatedPageState createState() => _HeroAnimatedPageState();
}

class _HeroAnimatedPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hero"),
      ),
      body: Center(
        child: InkWell(
          onTap: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (context) {
              return HeroPage();
            }));
          },
          child: SizedBox(
            width: 100,
            height: 100,
            child: Hero(tag: _heroTag, child: Image.network(_imgUrl)),
          ),
        ),
      ),
    );
  }
}

class HeroPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("内页")),
      body: Center(
        child: Hero(tag: _heroTag, child: Image.network(_imgUrl)),
      ),
    );
  }
}

可以看到使用Hero动画的过程很简单，那么系统层如何帮助我们做到的？

这是因为我们在使用MaterialApp的时候，其内部的_MaterialAppState已经帮我们初始化了HeroController的示例对象，并且HeroController是NavigatorObserver的子类，可以订阅路由的跳转事件，HeroController监听到跳转之后就负责生成Hero的动画和执行

static HeroController createMaterialHeroController() {
  return HeroController(
    createRectTween: (Rect begin, Rect end) {
      /// 可以看到这里传入了开始和结束的Rect
      return MaterialRectArcTween(begin: begin, end: end);
    },
  );
}

class _MaterialAppState extends State {
  HeroController _heroController;

  @override
  void initState() {
    super.initState();
    /// 这里初始化了 HeroController
    _heroController = MaterialApp.createMaterialHeroController();
  }
  
    @override
  Widget build(BuildContext context) {
    Widget result = _buildWidgetApp(context);

    assert(() {
      if (widget.debugShowMaterialGrid) {
        result = GridPaper(
          color: const Color(0xE0F9BBE0),
          interval: 8.0,
          divisions: 2,
          subdivisions: 1,
          child: result,
        );
      }
      return true;
    }());

    return ScrollConfiguration(
      behavior: _MaterialScrollBehavior(),
      /// 可以看到这里使用HeroControllerScope包装起来了，其内部是继承InheritedWidget
      /// 当下个页面也有Hero Widget的时候，且tag一样，那么就可以开启Hero动画
      child: HeroControllerScope(
        controller: _heroController,
        child: result,
      )
    );
  }
}


/// 以下的代码片段截取自_HeroFlight,可以点击Hero查看源码得到
Positioned(
 top: offsets.top,
 right: offsets.right,
 bottom: offsets.bottom,
 left: offsets.left,
 child: IgnorePointer(
   child: RepaintBoundary(
     child: Opacity(
       opacity: _heroOpacity.value,
       child: child,
     ),
   ),
 ),
);

通过对源码的查看，我们知道Hero动画就是页面开始跳转的时候，通过计算原Rect和结束时目标的Rect之后，通过Positioned改变自身的位置，最后实现动画的展示

Rive 动画

这个更多的是设计通过工具导出各种绚丽的动画给到我们，然后我们在给展示到屏幕中。

比如下面的这个动画，如果自己去使用绘制效果去处理，那么绝对是一件头疼的事情，但是引入Rive动画就可以很好的解决这个问题，并且如果你仔细的观察下面的动画，你会发现动画是可以分别控制的（雨刮器和车子）。

当然除了这个Lottie也有对应的Flutter package支持。

rive.gif

这里把示例代码展示一下

需要注意的是资源文件你需要自行去这里下载，然后倒入rive的package，之后就可以实现上图的动画效果了。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rive/rive.dart';

class RiveDemoPage extends StatefulWidget {
  @override
  _RiveDemoPageState createState() => _RiveDemoPageState();
}

class _RiveDemoPageState extends State with SingleTickerProviderStateMixin{
  void _togglePlay() {
    setState(() => _controller.isActive = !_controller.isActive);
  }

  /// Tracks if the animation is playing by whether controller is running.
  bool get isPlaying => _controller?.isActive ?? false;

  Artboard _artboard;
  RiveAnimationController _controller;
  WiperAnimation _wipersController;
  // flag to turn on and off the wipers
  bool _wipers = false;
  @override
  void initState() {
    _loadRiveFile();
    super.initState();
  }

  /// Loads a Rive file
  void _loadRiveFile() async {
    final bytes = await rootBundle.load('assets/off_road_car.riv');
    final file = RiveFile();
    if (file.import(bytes)) {
      setState(() => _artboard = file.mainArtboard
      /// idle 控制车辆
        ..addController(_controller = SimpleAnimation('idle')));
    }
  }

  void _wipersChange(bool wipersOn) {
    if (_wipersController == null) {
      _artboard.addController(
        /// 控制雨刮器
        _wipersController = WiperAnimation('windshield_wipers'),
      );
    }
    setState(() {
      if (_wipers) {
        _wipersController.stop();
      } else {
        _wipersController.start();
      }
      _wipers = !_wipers;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("自定义动画"),),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(child: _artboard == null
                ? const SizedBox()
                : Rive(artboard: _artboard),),
            SizedBox(
              height: 50,
              width: 200,
              child: SwitchListTile(
                title: const Text('雨刮器'),
                value: _wipers,
                onChanged: _wipersChange,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _togglePlay,
        tooltip: isPlaying ? 'Pause' : 'Play',
        child: Icon(
          isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}


class WiperAnimation extends SimpleAnimation {
  WiperAnimation(String animationName) : super(animationName);

  start() {
    instance.animation.loop = Loop.loop;
    isActive = true;
  }

  stop() => instance.animation.loop = Loop.oneShot;
}

手势与触摸

当我们对屏幕区域中的任意一点进行点击的时候，这个事件是如何准确找到是谁处理或者抛弃该事件的呢？由于Flutter的跨平台特性，所以一个事件的传递需要经过原生层、中间层、Dart层。对于原生层和中间层会有各自的处理逻辑，从Dart层开始就进入了Flutter的领域了。

手势和触摸

事件流程

通过上图可以看到，在Dart层中事件都是从_dispatchPointerDataPacket开始，之后会通过Zone判断环境进行回调，然后返回到GestureBinding类中的_handlePointEvent方法，下面就是截取的_handlePointerEvent方法的内部代码

 void _handlePointerEvent(PointerEvent event) {
    assert(!locked);
    HitTestResult? hitTestResult;
    if (event is PointerDownEvent || event is PointerSignalEvent) {
      assert(!_hitTests.containsKey(event.pointer));
      hitTestResult = HitTestResult();
      /// 检测并添加合法控件成员列表
      hitTest(hitTestResult, event.position);
      if (event is PointerDownEvent) {
        _hitTests[event.pointer] = hitTestResult;
      }
      assert(() {
        if (debugPrintHitTestResults)
          debugPrint('$event: $hitTestResult');
        return true;
      }());
    } else if (event is PointerUpEvent || event is PointerCancelEvent) {
        // 抬起，取消事件，不用hitTest，移除
      hitTestResult = _hitTests.remove(event.pointer);
    } else if (event.down) {
      // Because events that occur with the pointer down (like
      // PointerMoveEvents) should be dispatched to the same place that their
      // initial PointerDownEvent was, we want to re-use the path we found when
      // the pointer went down, rather than do hit detection each time we get
      // such an event.
      hitTestResult = _hitTests[event.pointer];
    }
    assert(() {
      if (debugPrintMouseHoverEvents && event is PointerHoverEvent)
        debugPrint('$event');
      return true;
    }());
    if (hitTestResult != null ||
        event is PointerHoverEvent ||
        event is PointerAddedEvent ||
        event is PointerRemovedEvent) {
      assert(event.position != null);
      /// 满足上面条件之后，开始分发事件
      dispatchEvent(event, hitTestResult);
    }
  }

hitTest

hitTest方法主要是为了获取到一个HitTestResult，这个hitTestResult内用一个List用于保存竞技对象，而每个HitTestEntry.target都会存储每个空间对应的RenderObject对象（因为RenderObject实现了HitTestTarget接口）

dispatchEvent

dispatchEvent主要是对事件进行分发。通过上面的hitTest方法之后，我们得到了所有的竞技对象列表，然后就挨个的进行遍历HitTestEntry对象，调用他们的handleEvent方法:

下面代码删除了部分error的处理

 @override // from HitTestDispatcher
  void dispatchEvent(PointerEvent event, HitTestResult? hitTestResult) {
    assert(!locked);
    if (hitTestResult == null) {
      assert(event is PointerHoverEvent || event is PointerAddedEvent || event is PointerRemovedEvent);
      try {
        pointerRouter.route(event);
      } catch (exception, stack) {
      }
      return;
    }
    /// 遍历HitTestEntry对象列表
    for (final HitTestEntry entry in hitTestResult.path) {
      try {
        /// 分别调用renderObject的handleEvent方法
        entry.target.handleEvent(event.transformed(entry.transform), entry);
      } catch (exception, stack) {
      }
    }
  }

这里可能会出现一种情况：如果一个区域的内的多个控件都实现了HandleEvent方法，此时最后的处理权交给那个控件呢？这就设计了事件竞争。

事件竞争

Flutter设计事件竞争的时候，定义了一个概念：通过一个竞技场，各个控件参与竞争，但只有符合下面两个条件中的任意一个的时候，才可以获得事件的处理权。

• 最后得到直接胜利的控件（理解为这个区域就只有他）
• 活到最后的空间中排在第一为的控件（这个区域有多个，但是列表中排第一个的才享有处理权）

也就是说当Down事件时通过addPointer加入GestureRecognizer竞技场，如果区域内只有他一个响应者，那么会在Up的时候进行_checkUp，直接就完成竞争流程，如果这个区域内有多个响应，那么Down的时候就决定不了谁是最终响应者，则会在Up的时候直接把列表中的第一个作为响应者。

滑动事件

滑动事件的处理，也要求控件在Down流程中通过addPointer加入竞技场，然后在Move流程中，通过PointerRouter.route执行DragGestureRecoginzer.handleEvent处理事件。

image-20210322151936319.png

在PointerMoveEvent事件里，DragGestureRecognizer.handleEvent会通过_hasSufficientPendingDragDeltaToAccept方法判断是否符合条件，如果符合条件直接执行resolve(GestureDisposition.accepted)，之后流程回到竞技场执行acceptGesture，触发onStart和onUpdate去通知上层处理事件。

onUpdate事件回去更新Offset，然后通过markNeedsLayout是的ViewPort重新布局，让界面看起来像滚动起来。

滑动Physic

我们都知道滑动结束后不会马上停止，而是有一个物理的减弱动画的实现，那么他是怎么实现的呢？

官方给我们定义了四种ScrollPhysics

• BouncingScrollPhysics 允许滚动超出边界，松手之后内容会进行回弹效果
• ClampingScrollPhysics 防止超出边界，夹住收尾区域
• AlwaysScrollableScrollPhysics 始终响应用户的滚动，松手之后内容会进行回弹效果
• NeverScrollableScrollPhysics 不响应用户的滚动

部分情况下我们不会特意去设置physics，细心的你可能会发现在iOS和Android上面ListView、CustomScrollView等控件，拖拽效果会有不同，为啥子呢？这是因为在ScrollConfiguration内部进行特别的处理。

ScrollConfiguration

实现滑动溢出的效果关键的两个雷就是ScrollConfiguration和ScrollBehavior。在Scrollable的_updatePosition源码中，里面有一个关键的判断，如果widget.physics==null的时候，就会使用ScrollConfiguration.of(context)的getScrollPhysics(context)方法获取_physics，ScrollConfiguration.of(context)返回是一个InheritedWidget对象ScrollBehavior。

  void _updatePosition() {
    _configuration = ScrollConfiguration.of(context);
    _physics = _configuration.getScrollPhysics(context);
    /// 这里如果不为空才使用自己的，否则就使用从ScrollConfiguration中获取的physics
    if (widget.physics != null)
      _physics = widget.physics.applyTo(_physics);
    
    final ScrollController controller = widget.controller;
    final ScrollPosition oldPosition = position;
    if (oldPosition != null) {
      controller?.detach(oldPosition);
      scheduleMicrotask(oldPosition.dispose);
    }

    _position = controller?.createScrollPosition(_physics, this, oldPosition)
      ?? ScrollPositionWithSingleContext(physics: _physics, context: this, oldPosition: oldPosition);
    assert(position != null);
    controller?.attach(position);
  }

所以在我们不填写physics属性的情况下，我们获取的physics就要看getScrollPhysics(context)这个方法的内部实现

    static const ScrollPhysics _bouncingPhysics = BouncingScrollPhysics(parent: RangeMaintainingScrollPhysics());
  static const ScrollPhysics _clampingPhysics = ClampingScrollPhysics(parent: RangeMaintainingScrollPhysics());

  ScrollPhysics getScrollPhysics(BuildContext context) {
    switch (getPlatform(context)) {
      case TargetPlatform.iOS:
      case TargetPlatform.macOS:
        return _bouncingPhysics;
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
      case TargetPlatform.linux:
      case TargetPlatform.windows:
        return _clampingPhysics;
    }
    return null;
  }

上面的源码就可以很好的展示了默认情况下的为什么列表在iOS和Android平台中会有不同滑动效果的原因。

然后我们去查看ScrollConfiguration.of方法

  static ScrollBehavior of(BuildContext context) {
    final ScrollConfiguration configuration = context.dependOnInheritedWidgetOfExactType();
    return configuration?.behavior ?? const ScrollBehavior();
  }

发现这个类是InheritedWidget，我们知道InheritedWidget的特性（数据向下传递），那么他是在哪里被初始化的呢？最终在MaterialApp的实现中找到了，代码截图如下：

    /// 此为代码片段，删除了部分无关代码
    @override
  Widget build(BuildContext context) {
    Widget result = _buildWidgetApp(context);
    
    /// 发现这里是ScrollConfiguration包装起来的对象
    return ScrollConfiguration(
      behavior: _MaterialScrollBehavior(),
      child: HeroControllerScope(
        controller: _heroController,
        child: result,
      )
    );
  }

ScrollPhysics

通过查看ScrollConfiguration的相关实现，我们知道了为什么不同的平台会有不同的拖曳处理，但是怎么去实现这个效果则主要是通过ScrollPhysics的子类去实现，ScrollPhysics本身只是定义了一些属性和方法，其中几个比较重要的方法如下：

class ScrollPhysics {
  // 将用户拖曳距离Offset转化为需要移动的pixels
  // 如果没有父类就直接返回offset，否则就调用父类的applyPhysicsToUserOffset方法
  double applyPhysicsToUserOffset(ScrollMetrics position, double offset) {
    if (parent == null)
      return offset;
    return parent.applyPhysicsToUserOffset(position, offset);
  }
  
  // 返回边界条件，如果是0，overscroll则一直就是0
  // 如果没有父类，直接返回0，否则就调用父类的同名方法
  double applyBoundaryConditions(ScrollMetrics position, double value) {
    if (parent == null)
      return 0.0;
    return parent.applyBoundaryConditions(position, value);
  }
  
  /// 创建一个滚动的模拟器，这个处理器就是处理阻尼、滑动、回弹效果的具体实现
  Simulation createBallisticSimulation(ScrollMetrics position, double velocity) {
    if (parent == null)
      return null;
    return parent.createBallisticSimulation(position, velocity);
  }
  
  /// 最小的滑动速率 
  /// const double kMinFlingVelocity = 50.0 默认是50
  double get minFlingVelocity => parent?.minFlingVelocity ?? kMinFlingVelocity;
  
  
  /// 传输动量，返回重复滚动的速度
  /// 如果父类为空就直接返回0 否则调用父类同名方法
  double carriedMomentum(double existingVelocity) {
    if (parent == null)
      return 0.0;
    return parent.carriedMomentum(existingVelocity);
  }
  
    /// 最小的开始拖曳距离
  /// 如果返回空，则不执行最低阈值。
  double get dragStartDistanceMotionThreshold => parent?.dragStartDistanceMotionThreshold;
  
  /// 滚动模拟的公差
  /// 指定距离、持续时间和速度差应视为平等的差异的结构
  Tolerance get tolerance => parent?.tolerance ?? _kDefaultTolerance;
  
  /// 这个就是默认实现
  static final Tolerance _kDefaultTolerance = Tolerance(
    // TODO(ianh): Handle the case of the device pixel ratio changing.
    // TODO(ianh): Get this from the local MediaQuery not dart:ui's window object.
    velocity: 1.0 / (0.050 * WidgetsBinding.instance.window.devicePixelRatio), // logical pixels per second
    distance: 1.0 / WidgetsBinding.instance.window.devicePixelRatio, // logical pixels
  );
}

所以ScrollPhysics的具体实现就依赖Scrollable的触摸响应流程中，主要的逻辑关键地方就是下面的是三个方法:

• applyPhysicsToUserOffset： 通过physics将用户拖曳距离offset转化为setPixels（滚动）的增量
• applyBoundaryConditions：通过physics计算当前滚动的边界条件
• createBallisticSimulation：创建自动滑动的模拟器

这三个触发的时机分别在于：_handleDragUpdate、_handleDragCancel、_handleDragEnd也就是拖曳的过程和结束的时机

• applyPhysicsToUserOffset和applyBoundaryConditions是在_handleDragUpdate时触发计算
• createBallisticSimulation是在_handleDragCancel和_handleDragEnd时触发

image-20210323112605356.png

图片加载

在Flutter加载图片一般有两种方式：Image和DecorationImage，其中DecorationImage用于DecoratedBox中。

两者不同之处是Image是一个StatefulWidget，其内部通过RawImage实现图片的绘制；而DecorationImage并不是控件，只是单纯图片绘制，内部通过DecorationImagePainter直接绘制图片。正因如此，DecorationImage对比Image少了一些可定制化的配置。

两者相同的地方则是都需要ImageProvider实现图片的加载和数据转换。只是Image控件提供了Image.asset方法对AssetImage的封装，其实他们最终都会通过decoration_image.dart下的paintImage方法实现图片的绘制逻辑。

下表是Image的参数列表

参数	描述
width/height	图片区域的宽高，需要注意不是图片的宽高
fit	填充模式 BoxFit.fill 铺满设置的区域，可能会拉伸 BoxFit.fitHeight 填充高度，可能会裁剪、拉伸 BoxFit.fitWidth 填充宽度、可能会裁剪、拉伸 BoxFit.contain 居中显示，显示原比例，可能不会填满 BoxFit.cover 原比例进行裁剪并填满容器 BoxFit.scaleDown 和contain类似，但是只会缩小不会放大
color	前景色，会覆盖图片颜色，多数情况和colorBlendMode配合使用
colorBlendMode	与color参数结合使用，设置color的回合模式
alignment	对齐方式
repeat	是否重复（当图片填充不满设置的width/height）
centerSlice	设置图片的拉伸区域，需要注意只有在大于width/height的情况下才可以使用这个属性
matchTextDirection	需要配合Directionality进行使用，一般配合文本对齐
gaplessPlayback	图片更新之后，是否将原图片进行保留之后在显示
filterQuality	图片显示的过滤质量
loadingBuilder	图片加载中的显示 返回Widget
frameBuilder	对需要显示的图片进行定制处理

Image Demo

class ImageDemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Image Demo")),
      body: Center(
        child: Image(
          width: 100,
          height: 100,
          fit: BoxFit.cover,
          image: NetworkImage("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1421194919,3695584663&fm=26&gp=0.jpg"),
          frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
            return Container(
              decoration: BoxDecoration(
                boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 1, spreadRadius: 1)],
              ),
              child: child,
            );
          },
          loadingBuilder: (context, child, loadingProgress) {
            if (loadingProgress == null)
              return child;
            return Center(
              child: CircularProgressIndicator(
                value: loadingProgress.expectedTotalBytes != null
                    ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
                    : null,
              ),
            );
          },
        ),
      ),
    );
  }
}

效果图如下：

图片处理效果

图片加载流程

图片加载流程

图片缓存

Flutter中对图片是进行了缓存的（但是没有做本地缓存），缓存的方法实现在ImageCache中的putIfAbsent方法。

ImageStreamCompleter? putIfAbsent(Object key, ImageStreamCompleter loader(), { ImageErrorListener? onError }) {
    
    TimelineTask? timelineTask;
    TimelineTask? listenerTask;
    if (!kReleaseMode) {
      timelineTask = TimelineTask()..start(
        'ImageCache.putIfAbsent',
        arguments: {
          'key': key.toString(),
        },
      );
    }
    ImageStreamCompleter? result = _pendingImages[key]?.completer;
    // 还在加载，直接返回
    if (result != null) {
      if (!kReleaseMode) {
        timelineTask!.finish(arguments: {'result': 'pending'});
      }
      return result;
    }
    
      // 已经缓存过了，直接返回
    final _CachedImage? image = _cache.remove(key);
    if (image != null) {
      if (!kReleaseMode) {
        timelineTask!.finish(arguments: {'result': 'keepAlive'});
      }
      _trackLiveImage(key, _LiveImage(image.completer, image.sizeBytes, () => _liveImages.remove(key)));
      _cache[key] = image;
      return image.completer;
    }

  
    final _CachedImage? liveImage = _liveImages[key];
    if (liveImage != null) {
      _touch(key, liveImage, timelineTask);
      if (!kReleaseMode) {
        timelineTask!.finish(arguments: {'result': 'keepAlive'});
      }
      return liveImage.completer;
    }

    try {
      result = loader();
      _trackLiveImage(key, _LiveImage(result, null, () => _liveImages.remove(key)));
    } catch (error, stackTrace) {
      if (!kReleaseMode) {
        timelineTask!.finish(arguments: {
          'result': 'error',
          'error': error.toString(),
          'stackTrace': stackTrace.toString(),
        });
      }
      if (onError != null) {
        onError(error, stackTrace);
        return null;
      } else {
        rethrow;
      }
    }

    if (!kReleaseMode) {
      listenerTask = TimelineTask(parent: timelineTask)..start('listener');
    }
    // If we're doing tracing, we need to make sure that we don't try to finish
    // the trace entry multiple times if we get re-entrant calls from a multi-
    // frame provider here.
    bool listenedOnce = false;

    // We shouldn't use the _pendingImages map if the cache is disabled, but we
    // will have to listen to the image at least once so we don't leak it in
    // the live image tracking.
    // If the cache is disabled, this variable will be set.
    _PendingImage? untrackedPendingImage;
    void listener(ImageInfo? info, bool syncCall) {
      // Images that fail to load don't contribute to cache size.
      final int imageSize = info == null || info.image == null ? 0 : info.image.height * info.image.width * 4;

      final _CachedImage image = _CachedImage(result!, imageSize);

      _trackLiveImage(
        key,
        _LiveImage(
          result,
          imageSize,
          () => _liveImages.remove(key),
        ),
      );

      final _PendingImage? pendingImage = untrackedPendingImage ?? _pendingImages.remove(key);
      if (pendingImage != null) {
        pendingImage.removeListener();
      }
      // Only touch if the cache was enabled when resolve was initially called.
      if (untrackedPendingImage == null) {
        _touch(key, image, listenerTask);
      }

      if (!kReleaseMode && !listenedOnce) {
        listenerTask!.finish(arguments: {
          'syncCall': syncCall,
          'sizeInBytes': imageSize,
        });
        timelineTask!.finish(arguments: {
          'currentSizeBytes': currentSizeBytes,
          'currentSize': currentSize,
        });
      }
      listenedOnce = true;
    }

    final ImageStreamListener streamListener = ImageStreamListener(listener);
    if (maximumSize > 0 && maximumSizeBytes > 0) {
      _pendingImages[key] = _PendingImage(result, streamListener);
    } else {
      untrackedPendingImage = _PendingImage(result, streamListener);
    }
    // Listener is removed in [_PendingImage.removeListener].
    result.addListener(streamListener);

    return result;
  } 

由于图片的缓存都是异步的方式，他并不知道图片会消耗多少内存（在未解码之前），所以当一个页面加载了大量图片，此时就有可能会造成内存不够的情况，在iOS上面的表现就是会被系统给杀掉。

所以如果对内存缓存大小和数量有要求的话，可以通过PaintingBinding.instacne.imageCache.maximunSize进行设置（默认是100m），同时最好在页面不可见的时候暂停图片的I/O和下载。

网络请求

Flutter中的网络请求是不经过原生端的，所以我们使用的是Dart层的网络请求服务。

HttpClient

/// 创建Client
HttpClient httpClient = HttpClient();
/// 地址
Uri uri = Uri(scheme: "https", host: "example.com");
/// 得到request
HttpClientRequest request = await httpClient.getUrl(uri);
/// 添加请求头
request.header.add("token": "xxxxx");
/// 等待请求结果
HttpClientResponse response = await request.close();
/// 解析数据
String responseBody = await response.transform(utf8.decoder).join();
/// 关闭client
httpClient.close();

一般情况下，我们很少使用到HttpClient来进行网络请求，在Flutter大部分还是使用第三方封装好的SDK，比如Dio

Dio

Flutter中出名的网络请求框架，除了基本的网络请求之外还设置了拦截器、代理等相当使用的功能。

具体的实现可以去GitHub或者pub.dev查看

import 'package:dio/dio.dart';
void getHttp() async {
  try {
    Response response = await Dio().get("http://www.google.com");
    print(response);
  } catch (e) {
    print(e);
  }
}