Flutter 自定义 View 介绍

对于一些复杂或不规则的UI，我们可能无法使用现有的 Widget 组合去实现，比如需要一个带动画的进度条，

又或者是一个特殊形状的多边形等等，当然有时候我们可以直接用图片去实现，但是并没有达到我们想要

的效果，反而会让我们产生不良的体验。

几乎所有的UI系统都会提供一个自绘UI的接口，这个接口通常会提供一块2D画布Canvas，Canvas内部封装了

一些基本绘制的API，开发者可以通过Canvas绘制各种自定义图形。在Flutter中，提供了一个CustomPaint Widget，

它可以结合一个画笔CustomPainter来实现绘制自定义图形。

我们看看 CustomPaint 构造函数：

1.painter: 背景画笔，会显示在子节点后面

2.foregroundPainter: 前景画笔，会显示在子节点前面

3.size：当child为null时，代表默认绘制区域大小，如果有child则忽略此参数，画布尺寸则为child尺寸。如果有child但是想指定画布为特定大小，可以使用SizeBox包裹CustomPaint实现。

4.isComplex：是否复杂的绘制，如果是，Flutter会应用一些缓存策略来减少重复渲染的开销。

5.willChange：和isComplex配合使用，当启用缓存时，该属性代表在下一帧中绘制是否会改变。

可以看到，绘制时我们需要提供前景或者背景画笔，两者也可以同时提供，

我们的画笔需要继承 CustomPainter 类，我们在画笔类中实现真正的绘制逻辑。

顾名思义画布的意思，我们绘制布局当然是在一张画布上进行绘制，画布为我们绘制图形提供了很多方法。（熟悉画布的就无需再看了）

在绘制之前我们需要准备画笔 Paint，就如画画一样，你用什么笔就能画什么样的画，在Paint中，

我们可以配置画笔的各种属性如粗细、颜色、样式等。如：

好了，继承CustomPainter类，然后准备好画笔，就可以在画布上尽情的挥洒了！

写的挺简单的，就是介绍了一下自定义view的准备工作以及画布画笔的功能，具体实战请看下一篇博客。

开发过程工我们会用webview显示一些活动或是变动比较频繁的页面,若是webview中包含图片,一般会有保存图片的需求,我们可以采用js交互的形式获取图片的url,话不多说直接看 *** 作

获取点击位置的element,中的src值,即可

补充问题

1、在安卓设备上发现长按手势并没有调用，翻看 webview_flutter 发现需要设置安卓的类型，展示webview之前设置

2、获取到的url也就是开始返回的value值，安卓会带有”“，需要自行去掉

需要创建两个工程，一个是FlutterWeb工程最终打包成Web页面，一个是Flutter原生工程承载一个WebView用来加载Web页面。这样做的好处在于只需要一种语言开发iOS和Android不用对接两次，可以直接使用社区Flutter原生工程的插件，只需要封装给Web调用。

FlutterWeb工程pubspec.yaml添加依赖

Flutter原生工程pubspec.yaml添加依赖

创建一个 toast_channel.dart，定义一个类实现 JavascriptChannel 重写name指定channel名称和onMessageReceived指定调用函数

在WebView的 javascriptChannels 配置上定义的Channel

创建一个 native_channel.dart ，定义一个外部函数通过 @JS("调用的channel和函数名") 注解指定调用的原生函数（JavascriptChannel固定名称为postMessage）

需要使用的地方直接调用

创建一个 js_function.dart，存放被原生调用的函数名称

将要提供给原生调用的函数，通过 js.context[原生调用名称] = 函数 开放给外部调用

如果在FlutterWeb工程要使用这个函数也可以使用@JS注解

WebView 创建时会回调 onWebViewCreated 获得 WebViewController ，WebViewController 调用 runJavascript 会执行JS函数无返回值，调用 runJavascriptReturningResult 会执行JS函数有返回值。

FutureBuilder获取WebViewController， 需要使用的地方直接调用

使用 HTML，CSS，Canvas 和 SVG 元素来渲染。

缺点：会存在不同平台效果不一样。

优点：不加载canvaskit默认使用系统字体，加载过程没有多余开销。

需要用到wasm，WebAssembly 要求需要浏览器支持，WebView Android需要最低需要57，Safari iOS 需要最低需要 11。

缺点：canvaskit 有7m大默认地址在国外首次加载耗时；中文会加载字体库默认地址在国外加载慢。

优点：性能更好，渲染效果一致。

--web-renderer=auto 默认移动端浏览器选择 HTML，桌面端浏览器选择 CanvasKit。

--web-renderer=html 使用 HTML 渲染器

--web-renderer=canvaskit 使用 CanvasKit 渲染器

综上所诉推荐移动端使用HTML渲染更合适，在编译和打包时指定渲染器 --web-renderer=html 。

--debug 模式构建的 Web 应用没有被压缩，且 Tree-shaking 没有执行。

--profile 模式构建的 Web 应用没有被压缩，但 Tree-shaking 执行了。

--release 模式构建的 Web 应用被压缩了，并且 Tree-shaking 执行了

运行命令

flutter run web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html

flutter run web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html --profile

打包命令

flutter build web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html --release

---