|
|
发表于 2019-12-27
|
|阅读模式
四天前，前端年度“明星”Flutter 正式发布了最新版本 1.12。新版本有哪些值得关注的新特性和改进？来自 Flutter 开发团队的产品经理 Chris Sells 将为大家详细解读。
' |8 {9 H5 f- w6 W& o0 D; b; K1 @0 g/ P) c" I) f# x
四天钱，Flutter 1.12 正式发布，这是从 2018 年 12 月发布 1.0 版本以来的第 5 个稳定版。过去的一年是惊艳的一年！我们关闭了 5303 个 issue，合并了来自 484 个贡献者的 5950 个 PR，增加了对 Android App Bundles 和 iOS 13 的支持，实现了鼠标和键盘事件处理机制，发布了 App 内购买插件，合并了多个重要的性能改进，增加了 24 种本地化和多个新的小部件。另外，Flutter 工具本身也得到大幅改进。改进的 Dart DevTools 提供了部件检查器、内存 /CPU 分析以及增强的日志功能。此外，我们还加入了引用类型自动导入功能、对 ChromeOS 的显式支持、UI 指南，以及改进的错误消息呈现（格式化、颜色高亮和更多的可操作项）。
1 S! w6 [5 t( t8 f% a0 X5 U5 t. J
% z( p7 k0 T4 \对于每一个版本，我们都怀着始终如一的信念——一切都才刚开始。这个版本也不例外，这是我们有史以来最大的一个版本，有 188 位贡献者参与，关闭了 4571 个 issue，合并了 1905 个 PR。) _; R/ R3 `0 f# o# d6 W$ |! \5 T
" ?' A5 J W% K7 B- }0 T3 E3 VFlutter 框架& C9 ?: d, j" p& Y% e/ r
# v) f: z" s, O: ?6 o新版本完全支持 iOS 13 的暗色模式，加入了新的 Cupertino 小部件，做了一些 UX 调整，并带来大幅改进的 Add-to-App 体验。. x3 O! e# M- D* Z$ L! f/ B. D
3 T+ k; u! V2 M
完全支持 iOS 13 暗色模式. M3 ^, {( P7 {3 ^
S0 z4 u% L2 r7 ]/ j" n9 D6 N K完全支持 iOS 13 主题模式是 Flutter 1.12 的一大亮点，包括支持 Cupertino 小部件的暗色模式。
" t" T( U1 K: r% o) f" z8 h4 S% t8 O6 O* [, G, S( f; [ f0 |
8 N5 F6 o0 O8 b( S5 B% u& J从上图可以看到，对暗色模式的支持不仅仅是更换背景色，其他部分的颜色也匹配得恰到好处。另外，我们还新增了两个小部件。+ X" K3 x7 @) [
u* E% Y U$ I( V; l. f% i' j
8 L/ ^4 ?8 p) y1 F/ ?, L
CupertinoContextMenu 和 CupertinoSlidingSegmentedControl
6 b; i7 F) J% f
% t' D" b# b$ p2 h8 ~% V为了让 Flutter App 看起来更像原生 App，我们还改进了滚动条保真度，提供了自适应的 CupertinoAlertDialog 填充，并允许为 CupertinoDatePicker 设定最小和最大日期限制。
1 s+ ]& {+ ]: _: w }& J6 f: ~& F$ ~" }5 R3 i2 b
改进的 Add-to-App 体验
/ |0 |% m! @9 {) V. r3 I( \0 g5 l, x8 V$ c1 }7 c
新版本也带来了 Add-to-App（将 Flutter 集成到已有 Android 或 iOS App 的能力）方面的改进。我们努力简化集成流程，为开发者带来更好的体验，包括在 Android Studio 中加入新的 Flutter 模块向导。
$ V: j4 D$ X$ H3 c
( C3 t, |2 i3 S" ~; O
4 _* {% q! y5 { r5 _4 V0 |5 p
Flutter 1.12 支持将全屏 Flutter 实例添加到 App 中，具体来说：) Y0 `1 Y/ `! a1 ]4 V6 `
- I* s! k9 K( z& S# J8 b2 X' s提供了稳定的平台集成 API（Java、Kotlin、Objective-C 和 Swift），包括一组新的 Android 平台 API，更多详情请参看：http://flutter.dev/go/android-project-migration. y% x( {! {; @7 H @! v6 u
* F, F* p b. I$ z- I' |可以在内嵌的 Flutter 模块里使用插件。8 s5 ]+ p5 j0 P+ G- I% X' ~
0 ]: D) p3 P5 m) L& o5 L
更多的集成方式，如通过 Android AAR 和 iOS Framework，获得与现有构建系统更好的兼容性。
1 j, W c" Q+ I8 F& F' U6 u; C5 m, j. P/ g# a
重构了“flutter attach”机制（命令行工具、VSCode 和 IntelliJ 插件），可以更容易地 attach 到运行中的 Flutter 模块进行调试或热重载。2 ?& ^5 W' r+ \. B+ D: D
1 d! q0 T) m- d u
要尝试改进过的 Add-to-App 功能，可以参看：
7 W- M* d7 L# D0 H! U3 R2 ?' e7 I3 }' w* S
https://flutter.dev/docs/development/add-to-app
4 z% K9 m- O+ m7 X. {3 P& `' }" c3 Q+ ^& t' q& [
https://github.com/flutter/sampl ... rimental/add_to_app
u5 e' D5 t8 X3 @5 E$ I
7 P6 Z: ~" e7 I6 R1 j. a" j后者演示了各种集成场景。
0 _ ^. F( n, M3 O8 b
6 b# Z$ U$ K, \2 DDart 2.7
3 t) b# L/ f2 t6 ]
+ I) j0 U( K, M' b" J% o( U" ^5 h; GDart 是 Flutter 的基础，所以，如果你还不知道扩展方法和字符串（包括 emoji）安全，或者你想知道如何通过非空类型实现 null safety，可以参看：
9 n7 t5 j3 J# `! h+ `" l1 \
, }, n: I/ R N8 W) K5 i8 Whttps://medium.com/dartlang/dart-2-7-a3710ec54e975 d8 F. i% M# T1 A* p: G) y
: Q2 |! F) }7 Z( J+ @
Flutter 1.12 稳定版之外
A; k+ F! ?$ U4 }$ ^! M6 e4 A( n& V4 w( K
除了稳定版带来的新特性之外，Flutter 1.12 还提供了 Web 支持（beta 版）和 macOS 支持（alpha 版）。2 g1 L' Q. M; w) |" E2 T7 _* ?
6 B6 H' b6 v3 D: ZWeb 支持
& j% e8 d/ Y( [* v
0 c$ Y, o j+ U; b' u( f4 I5 y \7 zFlutter 1.12 的 master、dev 和 beta 频道都提供了改进的 Web 支持。
9 ^' M9 h7 N3 X6 ~8 U3 H
% H, o, P+ r9 l) f# Q# v/ s
. r* ?/ t/ y) F4 L& x
如上图所示，Rivet 使用了 Flutter 的 Web 支持。Rivet 是一个教育类项目，目前在生产环境中提供了移动 App。他们使用 Flutter 和 Firebase 开发了 Web 版 App，计划于 2020 年初正式发布。1 @8 `8 q- p& {& u- Z
- |6 T! c4 O, e; E) ~Rivet：https://rivet.area120.com/link/flutter
4 t1 M' g1 [% q: l P! w2 s; C# B6 v1 B5 V7 x. Y
macOS 支持
3 t. a; m7 e0 D9 y" B8 m: z
" m, B4 l9 g" ]* Z0 w* |对 macOS 的支持很快也会实现，目前正在从技术预览阶段进入到 alpha 阶段，master 和 dev 频道已经可用。8 [, S1 o- G; m" x. X
4 e4 L! O0 ?$ b9 ^& u
4 U( f) a& \+ G! ^/ j' X上图是新版本的 Flutter Gallery，除了支持 Android、iOS 和 Web，现在也支持 macOS。
5 m3 _% S8 E2 G. }& E' o6 Y7 a, r* s+ s
Flutter 1.12 对桌面的支持由此跨出了一大步，包括新的 DataTree 和 Split 小部件、一些移植的插件，支持发布和调试模式，使用起来非常简单。你可以在 Flutter 的系统配置中启用对 macOS 的支持（master 和 dev 频道）：3 p1 Z! i5 n+ ]. H1 R! q) Q
* z2 _0 `) l4 X6 g现在也可以使用“flutter create”创建一个可在 macOS 上运行的 Flutter 项目。4 s* W% X! @4 M j+ d' u/ _# X
4 |) ^+ e! G+ B0 ]9 H
7 ~4 ^. R" I0 P6 o4 j7 j除了工具之外，我们也在改进适合桌面 App 的像素密度。移动 App 需要相对较大的控件，因为用户通过触控的方式使用控件，而对于桌面 App 来说，用户更倾向于使用鼠标。所以，对于桌面 App，Flutter 允许开发者选择控件的像素密度，让它们更好地迎合桌面用户的需求。: P& L6 F0 x6 f1 I) _; m
( y' n+ k$ }- F: u9 U
, B2 r) Z% P+ p) v( e
为了改进 Flutter 桌面 App 的体验，我们做了很多工作，改进了键盘导航和键盘访问方式，包括：
5 M9 M. B+ \2 m% K4 l1 Y3 ^: B
3 D1 P$ _2 I" `; k8 w4 t同步辅助按键和按键事件；
5 L' [' R0 |( d: g- ^* f7 _7 a8 Z- K# d
在下拉框打开的情况下选择列表项；$ a/ B& f- {: ^% Y* U
& a# M) I- ?' F: r/ w- T A
更方便地访问主焦点；( @% {+ m3 J* S) T, \8 c' R. q" A
/ } r" r. w* b+ J6 b2 t& {7 l* [
增加键盘导航、开关的悬浮和快捷键；
. a' T8 B; A/ E. F# u; S7 G, O; S: @/ O$ C& V; |
复选框和单选框按钮；: w6 p( \) {1 N; C& b1 P$ Z' ?
. t9 ]! F- n8 \$ ]$ z/ ~自动滚动，保持焦点项可见；3 K8 Z+ i; m" @" ~) x8 F5 m
4 k; ]) j. I3 S& S9 P1 E2 N: O
基于键盘快捷键的滚动；1 T4 J6 G2 X' o( a/ {" R
' t6 m" d# g" K$ W7 I6 D y用于处理焦点和悬浮的新部件；, P m9 u' V1 ?- E
) @" n1 e% |: l) j" Y/ k! R
重写了拷贝 / 粘贴和键盘选择；
; X/ m G6 ~, `! q- y- P9 H$ P, ~& r$ S5 ^% v- @$ x, ~
使用键盘导航下拉框；
+ Q9 t5 Q1 n6 U* E" a" Y0 J9 M8 N0 u2 D
像素密度支持；
' D; }1 G* [/ V) g" K
1 O5 B& ]. ]' Z0 I增加 macOS 功能键支持。
& l, T/ A0 m; o" f+ Y) N+ |/ O/ ^6 j" D* W) c+ t
对 Windows 和 Linux 的支持还处在技术预览阶段，后续我们会更新这方面的进度，更多详情请参看：
0 G+ O5 c* y& V* Y- P# y/ Y3 D- ~2 a9 t
http://flutter.dev/desktop. l! f; \/ b, o2 n: e& G, M1 }# D
4 W- R( R! X* C9 S- F
Flutter 工具
6 i4 K* E* i7 a' b
}% w1 m& R, s+ [% ^/ J除了 Flutter 框架本身，Flutter 工具也有很多要说的，包括新版 DartPad、更强大的基于 IntelliJ 的 IDE（增加了一个叫作“Hot UI”的预览版功能）、增强的 Dart DevTools（增加了新的可视化布局视图）、在 VSCode 中同时调试多个设备、改进的 Android 构建流程，以及在测试过程中更好地分辨渲染组件。
* t, s$ a4 K7 C7 ]5 @7 K; K2 x- F+ A/ k' P; l
DartPad
, h7 E5 R$ ?. L( M- N+ @+ ]7 V" T3 K
如果你还没用过 DartPad，一定要试一下！你可以在不安装任何东西的情况下尝试 Dart 的新特性。新版的 DartPad 现在支持 Flutter！/ e( F( ?+ w! K( a8 L0 k
& e; m3 ?: s7 n' XDartPad：https://dartpad.dev/
# B6 W" V1 Q$ R
7 w1 @- L- ?! }4 B S
- s; |. A; {$ F7 \
如上图所示，在左边写 Flutter 代码，在右边可以实时地看到运行结果，你可以不用安装任何东西就可以使用 Flutter。$ @+ t$ k9 f3 `9 i
7 r$ g0 K% ?- u) ~, u! V9 l8 _
除了 DartPad 本身，我们也在将 DartPad 加入到我们的文档和代码库中，这样开发者就可以在自己喜欢的浏览器上学习 Flutter，更多有关 DartPad 的内容请参看：8 X1 w+ L$ r4 s ?8 M
Z0 A. ~& h; W% r9 a& M: A
https://medium.com/dartlang/a-br ... support-16fe6027784
7 X1 m( l# P! ?+ m
2 X% Y- c% T" }9 {1 T% P9 A- f8 MHot UI
6 x/ Q& X- {5 {* o$ r& u0 D! Q9 V6 W1 ?. P) |* W$ W
如果你在本地安装了 Flutter 工具，就会在 IntelliJ/Android Studio 的 Flutter 插件中看到一个新的预览功能。你可以在 IDE 中直接看到你正在开发的小部件。
k7 }& t- @! Q" D5 [, u- i
8 E9 v4 }7 x- ?0 X* h N' a这个功能叫作“Hot UI”，就像热重载一样，在修改代码的同时直接更新 UI。你还可以直接修改 UI（比如修改颜色），这个修改也会直接反映到代码中。要启用这个功能，请参看：
' g- e# A( [# C+ M B' s) A [8 K3 T& z0 {& J; Z N9 Q
https://github.com/flutter/flutt ... tarted-instructions
- C7 [1 i( J, M: A$ I! Q7 r' ~% b S" ~& }# \
Layout Explorer# X3 z4 k' ?' Q' j# t! m3 ?& Z0 u
: m" ~( h" [ J W
不管你是手写代码，还是使用 Hot UI，代码都是免不了的，而有代码的地方就会有问题，这也就是 Dart DevTools 发挥作用的时候。我们在新版本的 DevTools 中加入了一个叫作“Layout Explorer”的新功能。5 n* Q7 A5 Q8 a/ `7 |
3 B5 f5 k* x1 _6 U/ O' n" q( |1 D% r2 z* z/ H+ X8 u6 H4 G' _& {
Layout Explorer 可以帮你可视化小部件的布局，你还可以通过交互式的方式修改布局选项。要启用这个功能，请参看：9 C/ d6 a2 b9 M
$ d( ~& U7 `1 a) w$ k' s
https://flutter.dev/docs/develop ... ter-layout-explorer6 X! y' D! k3 [7 a3 ^' p" k
, D2 @: F% i$ g
多设备调试8 q6 a, K& @0 z0 ?3 x
( d, V& _1 |( s- k6 `* T4 v" Y% q
在大部分情况下，Flutter UI 的开发和调试是在单个设备上完成的，如果能够同时在多个设备（物理设备或虚拟设备）上调试岂不是更好？VSCode 的 Flutter 插件现在可以支持多会话调试。
( K; ?% ], x1 E0 `8 C
; f9 O |9 [7 G! ^
3 Q1 D- @7 ]& \: _ a: L从上图可以看到，同一个 Flutter App 同时运行在三个不同的调试会话中。这个时候如果改一下代码，热重载功能会确保代码改动在三个 App 上都体现出来。如果设置了断点，不管是哪个 App 都可以触发断点。如果你想停止调试其中的一个 App，其他几个 App 不会受到影响。有关多设备调试的更多信息请参看：
* H7 f9 m5 _# v6 `0 I! c6 ~6 m1 Y! ?+ `; d
https://github.com/flutter/flutt ... ebugging-in-VS-Code
3 }8 e3 q; i! e5 s. L- m+ Z2 F. R
3 z9 V& f- h8 K( x改进的 Android 构建流程
5 L2 L; @, t" F' z7 M. ^' j: F+ g- [
在 Android 构建流程方面，我们解决了若干问题。首先，Android 构建流程更健壮了。我们让 Flutter 插件改用 AndroidX，并建议其他 App 和插件也使用 AndroidX。不过，对于未改用 AndroidX 的插件，如果遇到构建问题，我们提供了其他选择（使用 Android 归档文件和 Jetifier）。新的构建方式速度较慢，所以我们并没有把它作为主要的构建方式，但它解决了 95% 我们在构建过程中遇到的问题。
1 P' p0 v% R7 l5 v/ U l A+ f, h
6 m! `& o7 v4 O& z2 _另一方面，我们用 R8 替代了 ProGuard。R8 是谷歌提供的一个新的代码优化器。在此之前，开发者需要根据插件指南手动配置 ProGuard 规则，而在新版本中，规则可以在插件源代码中定义好，R8 会自动解析这些规则，为开发者省去了很多麻烦。; ?5 n$ u/ ^3 E9 u. f; y
) M# m1 m, _: G {& H
R8：https://developer.android.com/studio/build/shrink-code8 W4 h: m5 S! S* W+ R' J( m
( X, R/ T+ I$ e# D+ k: s9 W另外，我们继续尝试给 Flutter 瘦身，把“Hello, World” App（Android 版）大小减小了 2.6%（从 3.8MB 减到了 3.7MB）。5 y( a4 S$ s& s
4 Z+ Z; Z! u' o0 y3 a! P& q7 n- [模板图像测试
3 W' v D! C" p* U- f( Q( x
# B% j; e; ]- i4 l7 C" f“模板图像”（Golden Image）是指给定小部件、状态、应用程序或其他可视元素的渲染主图像文件。在 Flutter 1.12 中，我们提供了 GoldenFileComparator 和 LocalFileComparator 类，用于进行图像像素比较（而不是按照比特比较），避免误判。9 A3 n% R7 Q/ ^
7 W& v; V/ Y6 P9 m
( C( G/ c: s$ \. l% U) P# D
从上图可以看出，主图像和测试图的边线存在差别。/ B/ s5 ?7 O) D/ \
8 N j: _' R3 a8 e社 区! D: j7 G- I0 X, Z+ v( P
+ w1 m& H: X9 v除了 Flutter 框架和工具，Flutter 社区继续把 Flutter 带到了新的方向，具体可以观看这个视频：
& `9 ^% u4 K% [; y1 E' D) H
3 ?5 {+ v0 P3 r9 O" z) Hhttps://youtu.be/tWCr9vlGz_8
) y t `8 N+ Q" o" Y r6 A7 X7 \* N3 B% ~ s, s& Q+ K3 c
我们很庆幸 Flutter 社区有这么多优秀的开发者，能和你们一起，我们感到很骄傲！
$ S& U: Z3 y% M3 N
' ]! Z- c' P1 X8 `0 y; q9 |最受欢迎的 Flutter 包
_* a2 v' S8 Z0 T4 M7 r$ m- v& ^# E1 {# z; H4 V! y
在 2018 年 12 月发布 Flutter 1.0 的时候，pub.dev 上只有 1000 多个包，而在写这篇文章时，这个数字增长了 6 倍多。有时候选择多了反而不知道该如何选择。pub.dev 提供的分数以及认证发布者功能可以作为用户的参考，而 pub.dev 现在提供的评分系统则是锦上添花。
) L# F: z9 o U% W
7 {: a/ Y/ T9 C; U4 ~ Qhttp://go/dart-2.7-annoucement
* L8 K" }; i( Z5 P8 B/ f+ ?$ u+ Z( Y$ W# C
用户一直希望我们能够为他们推荐包和插件，为此，我们启动了“Flutter Favorite”计划。2 d l1 J+ S5 ]0 K' @
6 g/ ^3 z: i5 m% a$ B. n
4 W1 c( \0 M; j* f( O6 w被列入“Flutter Favorite”的包（或者插件）应该是你构建 App 的首选。Flutter 生态系统委员会（成员来自谷歌 Flutter 团队和广大的 Flutter 社区）将会制定质量标准，并根据这些标准来挑选包。包的作者可以在他们的包文档中使用“Flutter Favorite”标志。另外，pub.dev 也会在搜索结果等地方显示这个标志。
+ s: {- ^+ f- _1 k% R: y5 g8 w" I) x* W6 F/ k8 Y1 ]7 ~
社区开发的工具
" a4 \8 w+ Y: _4 S5 z, S4 M. Q7 F. b& W% X Y2 T6 c! `1 a) }
Flutter 社区贡献了大量优秀的工具，以下列出了一小部分。: r9 k, j0 O* w5 B L( F
9 Y/ [0 B; T% x3 x
7 H" t! o9 j2 v! E% Q$ hFlutter 设备预览：https://github.com/aloisdeniel/flutter_device_preview
1 h6 |' v w4 n% a! c" o; }9 O e
; v. I! K4 R/ }9 t, K7 F
( k$ |( V! l; Z! V! Y+ r9 g
Widget Maker：https://www.widgetmaker.dev/) {9 x9 A) Y4 ^& T* g5 E
# V G7 O/ l' z
. E" ^ r( ~2 m/ a1 N
Panache：https://rxlabz.github.io/panache/#/
) ^) Y6 l& A0 L
" q/ X- O! C! Q6 l$ u Y: Z; t合作伙伴 Nevercode+ g4 P: X# t1 p K* x9 `8 ]
; \$ r5 Y9 k9 t" S! x3 H* x2 l# s
除了社区提供的工具之外，还有其他一些优秀的合作伙伴，Nevercode 就是其中不得不提及的一个。最新版本的 Nevercode 提供了一整套新功能，包括一个叫作 Remote Mac 的 VSCode 插件。' _5 D: V- r s. u
) W" q; C/ q9 @3 N
& v0 w$ B$ S) f7 J* t你可以借助这个插件直接连接到托管在云端的 Mac，进行 iOS 和 macOS Flutter 代码测试。更多有关 Nevercode 的信息可以参看：7 T+ ~2 l8 {1 E) X+ @
% s$ K3 n5 L: W4 U" H C8 J3 D
https://blog.codemagic.io/more-professional-capable-accessible/' h& L+ H' u1 D4 R" K5 V
! q) L! q% u( F
其他合作伙伴（如 Supernova、Rive 和 Adobe）相关内容可以在这里看到：
4 G$ ^4 k( n) L) e
6 @; f2 d8 M J5 A; |6 P( u3 R( q5 [https://developers.googleblog.co ... ient-computing.html7 {. C& G; I) s0 p9 U
2 d1 i2 ?4 t/ Q
https://medium.com/flutter/annou ... a-year-22c256ba525d
. q5 s H3 M% i
. J, b, E0 V& K! n
|
|
