文章图片

我们对 Flutter 的愿景是一个可移植的工具包 ， 让您可以在任何屏幕上尽情绘制像素 ， 打造美好的体验 。 正如我们 不久前和大家的一样 ， 我们在框架和 API 的选择上将应用置于中心位置 ， 构建出了一个可以跨移动、桌面和嵌入式设备的分层架构 ， 且不影响性能和品质 。
Web 正是这项工作的核心 。 Flutter 的诞生离不开 Chrome 团队的不懈探索 。 它的灵感 web 的生产力和迭代模型 ， 我们的许多工程师在构建浏览器引擎和网络标准方面都有多年的经验 。 我们之所以将网络浏览器作为目标 ， 是因为它是互联网的 “心脏” 计算机历史上最普遍、最灵活、最广泛的应用模型 。
多年以来 ， web 平台和 HTML DOM 在本质上相差无几 。 然而最近 ， 随着 web 平台不断扩展 ， API 和功能越来越丰富 ， 使得者得以接触到底层操作和硬件 。 从硬件加速的图形绘制到Shell 集成和PWA ， 从Service Worker到新的布局和绘制 API ， 对于复杂的应用甚至是在此基础之上布局的框架而言 ， web 都是一个越来越强大的目标平台 。
Shell 集成
PWA
Service Worker
布局和绘制 API
Flutter 对 web 的支持不仅仅是对 DOM 的转译： 它充分利用这些全新的 API 集 ， 既真正的 web 体验 ， 又完整保留了 Flutter 的特色 。
在这篇文章中 ， 我们将详细介绍具体的实现过程 ，Flutter 如何使用 web 来实现丰富的交互式体验 ， 而无需重写现有 Flutter 代码 。 我们还会介绍无障碍功能和后端编译选择等内容 ， 虽然初上手尝试 Flutter 的者们可能一时还用不到这些功能 。
不只是 canvas 绘制
将 Flutter widget 绘制为 web 上的像素实际上意味着什么？
我们先来回顾一下 Flutter 的 web 架构 。 Flutter 是一个多层 ， 包含：
【深度解析，Flutter，web，的支持能力】用于为 widget、动画和手势等常见的习惯用法抽象的 框架。
使用公开的 API 在目标设备上进行渲染的 引擎。
Flutter 的分层模型
使用摇树优化算法和延迟加载优化 Flutter web 应用性能

文章图片

△ Flutter 的 web 架构是多层 ， 框架位于浏览器引擎之上
默认情况下 ， web 模式使用标准的 HTML DOM 和 Canvas 技术 。 在这种模式下 ， 引擎将每个生成的 Flutter 场景转换为 HTML、CSS 或 Canvas ， 并以 HTML 元素树的形式将帧渲染到页面上 。
我们将这种方法称为 DomCanvas 后端 。 它以简洁的代码为我们了跨浏览器的最大兼容性 ， 非常适合会话短暂、需要快速启动的应用 。
尽管我们在 DomCanvas 的性能和保真度方面持续取得良好进展 ， 但我们还在并行基于CanvasKit的后端 ， 该后端使用WebAssembly和WebGL在浏览器中渲染 Skia 绘制命令 。 我们之所以开始尝试使用 CanvasKit ， 是因为 Skia 与 Flutter 移动和桌面端使用的图形引擎相同 ， 而且不同于 HTML DOM 的是 ， 它可以直接访问底层图形堆栈 ， 从而实现与原生 Flutter 完全对等的性能 。
CanvasKit
WebAssembly
WebGL
尽管 DomCanvas 的浏览器支持更广泛、代码更少、初始页面加载速度更快 ， 但 CanvasKit 允许 Flutter 者采用新技术来构建图形密集型 web 应用 。 将来 ， 其中一种方法的优势可能会变得势不可挡 ， 但就目前而言 ， Flutter 可以让您选择最适合您所需用例的后端 。分页标题#e#
选择合适的渲染方案
在浏览器中原生的体验
要让 web 应用在浏览器中原生的体验 ， 它必须支持各种浏览器中的惯用操作 ， 包括原生的文本交互和滚动行为、后退/前进导航以及无障碍功能 ， 所有这些都要在各种各样的设备和环境中拥有良好的性能 。
文本渲染
构建 Flutter 的 web 支持时 ， 我们面临的最大之一就是一种专门用于文本布局的布局 。 为了对文本段落进行布局 ， Flutter 会创建一个paragraph对象并调用其layout方法 。 由于 web 目前缺少直接的文本布局 API ， 因此我们通过触发 layout 并观测框架中其他元素布局属性值的变化 ， 来实现通过 DOM 对文本段落进行各种测量的目的 。
Paragraph
layout 方法
可以想象 ， 这些测量的成本开销十分之大 ， 因此我们最近开始尝试使用 canvas API 来测量文本以改进两种后端方法 。 我们发现这些 API 可以将文本布局性能提高多达 6 倍 ， 并且还解决了多行文本和文本溢出的一些问题 。 您可以使用发布 Release 模式选项来启用这些 canvas 文本改进 。截至 2020 年 7 月 30 日： master 渠道中的 canvas 文本测量功能已经默认启用 ， 并将逐步推广至其他渠道 。
使用 canvas 测量文本
Web 支持中的实验性选项： 文本渲染性能改进
对于终端用户体验而言 ， 快速、正确地渲染文本很重要 ， 而能够在浏览器中与文本进行交互同样关键 。 现在 ， 您可以通过使用 SelectableText或 EditableTextwidget 在 Flutter web 应用里实现文本选择操作 。 不久之后 ， 您还可以实现复制/粘贴文本、文本字段焦点处理、表单等更好的文本交互 。
滚动
有两种方式可以使 Flutter web 应用更加自然： 滚动的性能和直观性 。
无论是移动应用还是 web 应用 ， 滚动性能都可以衡量一款应用是否存在 “卡顿” 问题 。 对于我们的渲染来说 ， 滚动针对我们加载内容的方式和时机定义了一种特定的使用模式 。 过去一个季度我们把重点放在提高滚动性能上 ， 通过优化静态内容滚动和添加性能基准 ， 来确保我们在未来不会遭遇性能回退 。
优化静态内容滚动
性能基准
由于 Flutter 框架最初是为原生移动应用设计的 ， 因此 Flutter 网络应用已经对移动浏览器的手势和滚动物理效果了很好的支持 。 桌面浏览器的滚动行为支持取决于我们在框架级别为 Flutter 桌面端所做的工作 。 到目前为止 ， 我们已经能够使用鼠标和其他鼠标/滚轮事件来处理拖拽滚动 ， 但键盘滚动支持依然有待添加 。
导航

文章图片

△ 现在 ， 浏览器的后退按钮会尝试匹配 Flutter 应用的后退按钮路由历史记录
我们一直在努力通过Navigator 2.0和新的Router widget改善 Flutter 在所有平台上的导航/路由功能 。 这不仅会使导航更具性和灵活性 ， 还会改善路由历史记录在 Flutter web 应用中的作用方式 。
实现无障碍功能
就设计而言 ， Flutter 通过构建独立于RenderObject树的SemanticsNode树来实现无障碍功能 。 Flutter 的无障碍功能目前是选择加入的 ， 这意味着最终用户必须选择是否启用辅助技术 。 启用后 ， 通过扫描渲染树以及合并表示屏幕上单个逻辑交互元素的语义节点来生成 SemanticsNode 树 。
为了在 web 上实现此操作 ， 我们又生成一个 DOM 树 ， 它与作为 RenderObject树的 DOM 树平行 ， 并将标记、操作、和其他语义属性转换成 ARIA （Accessible Rich Internet Applications）
无障碍功能
VoiceOver
Flutter Gallery 应用
分页标题#e#
文章图片

△ 每个 Flutter web 应用都会向 VoiceOver 等无障碍工具公开一个语义树
Flutter web 的语义功能已经可以媲美当前 Flutter 语义的功能 ， 但是我们需要添加自动化来确保不会出现回退 。 我们还需要支持一些复杂的功能 ， 比如表格以及元素关系 。
表格
元素关系
Rive： Flutter web 的典型示例
Rive 是一款典型的富交互应用 ， 它展示了 Flutter 对 web 的支持能力 。 Rive 目前发布了其重新编写的设计协作工具 ， 该工具完全用 Flutter 构建 。
Rive 是一个动画设计应用 ， 帮助设计师和者创建高质量且可以轻松集成到任何平台的动画素材 。 为了同时流畅的实时界面和动画 ， Rive 需要在现代浏览器和其他平台上进行大量的图形渲染以及确保高性能的体验 。
Rive 2 beta
注册体验
总结
希望这篇文章能让您深入了解我们是如何充分利用 web 平台的特性来打造 Flutter 的 。 就在几年前 ， Flutter web 在质量和性能上还谈不上差强人意 ， 但是随着新的 web 技术的引入和平台的不断进步 ， 我们终于能够更好地利用底层设备的潜力 。 我们将紧跟 web 平台的发展脚步不断前进 ， 继续朝着稳定版本的方向努力 ， 不断改进对文本交互、滚动、导航和无障碍功能的支持 。
想要构建 Flutter web 应用？从入门指南开始试试吧 。 如果您已着手构建了一些应用 ， 欢迎通过CodePen或网址和我们您的作品！
使用 Flutter 构建 web 应用
CodePen
本文相关词条概念解析：
文本
【深度解析，Flutter，web，的支持能力】文本（Text） ， 是书面语言的表现形式；计算机的一种文档类型；指任何文字材料 。 文本 ， 是指书面语言的表现形式 ， 从文学的角度说 ， 通常是具有完整、系统含义（Message）的一个句子或多个句子的组合 。 一个文本可以是一个句子（Sentence）、一个段落（Paragraph）或者一个篇章（Discourse） 。

来源：(未知)

【】网址：/a/2020/0807/kd386284.html

标题：深度解析，Flutter，web，的支持能力