基本概念

我们的手机屏幕可以当成一块画板（Canvas），使用我们自定义的Painter，就能绘制出各种图形。而Flutter中提供了CustomPaint组件来方便使用自定义动画。

CustomPaint

1
2
3
4
5
6
7
8
9

const CustomPaint({
  super.key,
  this.painter,//CustomPainter对象，如果设置了child，则painter绘制的内容会被覆盖
  this.foregroundPainter,//如果设置了child，该painter的内容会覆盖child
  this.size = Size.zero,//画板大小
  this.isComplex = false,//如果设置为true，会对canvas的绘制进行一些必要的缓存来优化性能
  this.willChange = false,//配合isComplex使用，控制组件是否在下一帧需要重绘
  super.child,
}) 

CustomPainter

CustomPainter是一个抽象类，用于自定义绘制逻辑。需要实现paint和shouldRepaint方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

class XXXPainter extend CustomPainter {


  @override
  void paint(Canvas canvas, Size size) {
  }

  ///返回 true 才会进行重绘，否则就只会绘制一次
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
  }
}

开发者工具介绍

• Flutter Inspector：检查 Flutter 应用程序的 UI 组件布局和状态
• Performance View：在 Flutter 应用程序中诊断 UI 性能过低的问题
• CPU Profiler View：Flutter 和 Dart 应用的 CPU 性能检测

AndroidView、PlatformViewLink、UiKitView是表示Platform View的Widget接口，它们底层分别对应的RenderObject是RenderAndroidView、PlatformViewRenderBox、RenderUiKitView，前者基于TextureLayer进行真正的绘制，后两者给予PlatformViewLayer进行绘制。使用TextureLayer方式被称为Virtual Display，仅Android支持。使用PlatformViewLayer被称为Hybrid Composition，Android和iOS都支持。PlatformViewController和UiKitViewController时对Platform View中使用的Platform Channel的抽象封装，用于控制Platform View在Embedder中的各种属性和表现。

Virtual Display原理分析

1
2
3
4
5
6
7

Widget build(BuildContext context) {
  return AndroidView(
    viewType: 'webview',//用于Embedder侧查找对应的Platform View
    createionParams: xx, //初始化参数
    createionParamsCodec: StandardMessageCodec(),//编解码规则
  );
}

AndroidView对应RenderObject是RenderAndroidView