|
|
发表于 2019-12-27
|
|阅读模式
四天前，前端年度“明星”Flutter 正式发布了最新版本 1.12。新版本有哪些值得关注的新特性和改进？来自 Flutter 开发团队的产品经理 Chris Sells 将为大家详细解读。% H" p2 t5 `2 v; w; v% ?: j. w, z
7 A+ Q/ @6 h7 D0 l* ?5 K四天钱，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 指南，以及改进的错误消息呈现（格式化、颜色高亮和更多的可操作项）。
3 u }( M, r1 Z5 {7 u1 T9 l4 r6 c) w, E8 X% \, S
对于每一个版本，我们都怀着始终如一的信念——一切都才刚开始。这个版本也不例外，这是我们有史以来最大的一个版本，有 188 位贡献者参与，关闭了 4571 个 issue，合并了 1905 个 PR。
8 T" Y5 H2 D( J# d+ L! _" ]) D
5 H4 t# I- L1 C. C; K4 a0 L) b* _, PFlutter 框架
" l+ U" @4 j/ H h0 |# o6 s( Q4 R6 v% h% B
新版本完全支持 iOS 13 的暗色模式，加入了新的 Cupertino 小部件，做了一些 UX 调整，并带来大幅改进的 Add-to-App 体验。
& P( k4 R+ e- x9 q+ F K
; l6 u3 o0 F% P# r8 z/ K' l完全支持 iOS 13 暗色模式1 N+ n% x$ Y t G: l( C9 N% u& d
3 [$ l& S* O8 m. r; {4 J b完全支持 iOS 13 主题模式是 Flutter 1.12 的一大亮点，包括支持 Cupertino 小部件的暗色模式。
8 I# _& `( h @1 p0 P B% B- C& ~5 s8 H
: d& ]6 k2 @9 H j9 M3 W) `% X* c4 m从上图可以看到，对暗色模式的支持不仅仅是更换背景色，其他部分的颜色也匹配得恰到好处。另外，我们还新增了两个小部件。% n; D) l6 e! C' Y, k4 f
7 v$ [+ `; K( v1 h t
5 M& a6 h: U. L) s
CupertinoContextMenu 和 CupertinoSlidingSegmentedControl
8 `; l g; U8 B9 b! o# d* j/ Q/ d9 X% x' U% T( L2 k/ O& \
为了让 Flutter App 看起来更像原生 App，我们还改进了滚动条保真度，提供了自适应的 CupertinoAlertDialog 填充，并允许为 CupertinoDatePicker 设定最小和最大日期限制。3 T3 p4 [. `2 G( \! T" y
2 q- x: \6 J& K; z. h7 y改进的 Add-to-App 体验
4 e' G; p$ ~6 I
4 C9 H1 a0 m# ~: P新版本也带来了 Add-to-App（将 Flutter 集成到已有 Android 或 iOS App 的能力）方面的改进。我们努力简化集成流程，为开发者带来更好的体验，包括在 Android Studio 中加入新的 Flutter 模块向导。/ Z3 F+ G; r. ^0 {
" U' q7 l4 A/ S: V, V
2 N5 c6 R' j& a7 ]7 X' c
Flutter 1.12 支持将全屏 Flutter 实例添加到 App 中，具体来说：/ T* S/ X% S) y# c# j
: R% t5 ]3 ^4 ]! _, n- v提供了稳定的平台集成 API（Java、Kotlin、Objective-C 和 Swift），包括一组新的 Android 平台 API，更多详情请参看：http://flutter.dev/go/android-project-migration1 N$ ^7 C5 i1 z U; u! p2 g U. C
* q! N* R$ u/ T# i Z9 [
可以在内嵌的 Flutter 模块里使用插件。
* u) @% \3 e( X% j2 I: ^
) c9 Y4 X! Z; c0 T0 T更多的集成方式，如通过 Android AAR 和 iOS Framework，获得与现有构建系统更好的兼容性。0 f/ h% N0 _# v
; M9 n, v' ~5 |+ z3 ?; N5 W3 N重构了“flutter attach”机制（命令行工具、VSCode 和 IntelliJ 插件），可以更容易地 attach 到运行中的 Flutter 模块进行调试或热重载。
( a9 {3 E! J; P- S, o
+ J$ a3 d3 W- A i7 J2 v1 J# y& p要尝试改进过的 Add-to-App 功能，可以参看：
% A/ v! D& n) E6 a1 N" o; k
* b: s8 n& G8 @4 zhttps://flutter.dev/docs/development/add-to-app
! j+ ^4 I) ]4 b" \, P5 w. @7 e: i3 k
https://github.com/flutter/sampl ... rimental/add_to_app
; _3 S+ h- J4 a: |' p+ M8 r# O9 l/ k
后者演示了各种集成场景。, g2 g$ Q( p1 z' M
0 @ i" F% } W0 Z2 E; F: X Z$ |
Dart 2.75 i+ ]6 q* L$ }6 N* s$ u/ D0 b- S0 i& e
; t( V# q) C) V: D! {Dart 是 Flutter 的基础，所以，如果你还不知道扩展方法和字符串（包括 emoji）安全，或者你想知道如何通过非空类型实现 null safety，可以参看：
/ A/ y- f6 y0 A) Q6 @
0 o8 s# q" m4 J- X$ d9 Chttps://medium.com/dartlang/dart-2-7-a3710ec54e97
! c* O0 M' \9 K
: B& J6 B2 K, A/ e, KFlutter 1.12 稳定版之外
& K( c0 }" V2 J# ~" ]9 @4 _9 E. u' G" s: C
除了稳定版带来的新特性之外，Flutter 1.12 还提供了 Web 支持（beta 版）和 macOS 支持（alpha 版）。
, }7 B( ^9 t3 u6 m3 \) K0 a
) h$ S' `7 ]7 i( o, z# jWeb 支持
/ H" f9 X) V4 M' l J. z3 ]2 ?
" ]* ~8 I/ I- AFlutter 1.12 的 master、dev 和 beta 频道都提供了改进的 Web 支持。: o j8 Q5 p6 f
* I+ v+ e1 ]+ B, x$ ~- S5 M0 I
9 @- q4 n: ~7 i4 X; b) W如上图所示，Rivet 使用了 Flutter 的 Web 支持。Rivet 是一个教育类项目，目前在生产环境中提供了移动 App。他们使用 Flutter 和 Firebase 开发了 Web 版 App，计划于 2020 年初正式发布。: W$ B) v4 T1 j, o2 h
9 x+ Z e" C f) g. S
Rivet：https://rivet.area120.com/link/flutter
. e) |/ P0 t. u6 ~* h7 u, t) q" `6 D$ f/ J
macOS 支持3 q7 ~# S& G1 a7 Y% V( e; P: w
& v/ C8 k3 \9 K& d1 _2 n对 macOS 的支持很快也会实现，目前正在从技术预览阶段进入到 alpha 阶段，master 和 dev 频道已经可用。
5 |$ E4 u) q8 h* P! |2 E0 k" C2 K3 {3 Y
$ H: a& m7 _$ `- }; p7 g
上图是新版本的 Flutter Gallery，除了支持 Android、iOS 和 Web，现在也支持 macOS。3 w2 F, |2 |( \# F- }7 l; D* B$ ?
' n! w" Q4 {* r1 e7 MFlutter 1.12 对桌面的支持由此跨出了一大步，包括新的 DataTree 和 Split 小部件、一些移植的插件，支持发布和调试模式，使用起来非常简单。你可以在 Flutter 的系统配置中启用对 macOS 的支持（master 和 dev 频道）：
( `( W: u, ?1 E( c0 V
/ h$ b: s9 G) L# w6 L, Y+ c( _( a现在也可以使用“flutter create”创建一个可在 macOS 上运行的 Flutter 项目。8 f3 u# ~& b: _* H+ [: A* U# m' V
7 E+ y6 _, R& D* ?
+ y3 m) P: Q, b; m! f$ H7 H除了工具之外，我们也在改进适合桌面 App 的像素密度。移动 App 需要相对较大的控件，因为用户通过触控的方式使用控件，而对于桌面 App 来说，用户更倾向于使用鼠标。所以，对于桌面 App，Flutter 允许开发者选择控件的像素密度，让它们更好地迎合桌面用户的需求。
3 k" H+ h3 D( l5 ~6 a
, ~" ]9 _/ b# x( j8 j& }
6 _7 f1 j8 K% t为了改进 Flutter 桌面 App 的体验，我们做了很多工作，改进了键盘导航和键盘访问方式，包括：
4 j k+ d1 Y, z% j( K% z: j/ P; p% m P2 ^% c2 p9 w f. y# y
同步辅助按键和按键事件；' f/ f' A8 y! X7 i( r; T: ~/ `
3 W d2 T" r5 x- K/ _, Q' c
在下拉框打开的情况下选择列表项；2 n6 j) q( E1 H1 P
0 f7 X$ [7 M; [1 \" a: i, H更方便地访问主焦点；
2 b5 C+ U; f9 E/ e# ^9 e) x" Q/ Y9 z' ^1 F& R
增加键盘导航、开关的悬浮和快捷键；
, f% y) t o/ A+ ]; r$ ?% H* Y+ ~2 h9 }. E9 P) `% Q W) N% q# X
复选框和单选框按钮；: j! e; v: C* i5 Y
6 s* c5 h( R+ @- j
自动滚动，保持焦点项可见；( h" w$ j- j) J1 N* {" n1 G4 `/ W
- h$ k7 o0 ?( O' K- N
基于键盘快捷键的滚动；
/ l0 A" y6 b$ o4 n' @
s; r9 [' c9 [& a" N' B* B用于处理焦点和悬浮的新部件；
, m" A! [: U6 z% A/ ]& {9 d3 C6 m% G/ X# p. T j& X' ^
重写了拷贝 / 粘贴和键盘选择；! P5 D% s' `8 i* K
9 G o7 y* @/ O6 ]: m
使用键盘导航下拉框； v1 _% P( f9 _' C, g
- X3 I9 e$ j! i
像素密度支持；
5 W- Y& E4 S2 s0 p. I/ J; C6 s7 _% i9 T: g4 a
增加 macOS 功能键支持。; Y, ~3 \ o$ t
$ C; X" i$ k, d+ x9 k. }# Q
对 Windows 和 Linux 的支持还处在技术预览阶段，后续我们会更新这方面的进度，更多详情请参看：3 f9 Z% X2 u& R# |3 B7 m# ]
8 e8 M, w/ u( s& B5 F0 X, q
http://flutter.dev/desktop; u) w( d9 D3 S3 o
& \" s, M9 g, a) FFlutter 工具
7 o- x9 w* E9 l1 W0 }" q5 q- V) M |$ M
除了 Flutter 框架本身，Flutter 工具也有很多要说的，包括新版 DartPad、更强大的基于 IntelliJ 的 IDE（增加了一个叫作“Hot UI”的预览版功能）、增强的 Dart DevTools（增加了新的可视化布局视图）、在 VSCode 中同时调试多个设备、改进的 Android 构建流程，以及在测试过程中更好地分辨渲染组件。1 n' C8 N/ s# A: u* L4 S
# O; X& j0 `! K) N* {' K
DartPad
( [( i6 J; K9 O) e4 u
; V7 m# J! ^( B& o0 f1 ?如果你还没用过 DartPad，一定要试一下！你可以在不安装任何东西的情况下尝试 Dart 的新特性。新版的 DartPad 现在支持 Flutter！9 y" N" v% s6 M
- U% a1 B7 F9 R' r2 v- h; gDartPad：https://dartpad.dev/
! {/ U9 b/ L* ] S1 {$ A, e9 M: Q" ^
8 T2 f! S a( E; @ N+ }( A* m/ L
7 J# c, r$ ]9 G( w R5 Z# k
如上图所示，在左边写 Flutter 代码，在右边可以实时地看到运行结果，你可以不用安装任何东西就可以使用 Flutter。4 _+ v# e- q- |8 j
7 }" W" ?# z' a: S除了 DartPad 本身，我们也在将 DartPad 加入到我们的文档和代码库中，这样开发者就可以在自己喜欢的浏览器上学习 Flutter，更多有关 DartPad 的内容请参看：% E+ }$ M8 r3 I! q0 V1 F" |! A' t
7 s3 y& E7 n9 r- \9 U' F0 F) M) Whttps://medium.com/dartlang/a-br ... support-16fe6027784
3 k; u! M: L1 M1 V$ r6 ~2 V
( L; s! Q& Q5 N nHot UI
" |) x. ^7 t4 v+ e0 f: B( n
2 j5 O% h! e) l如果你在本地安装了 Flutter 工具，就会在 IntelliJ/Android Studio 的 Flutter 插件中看到一个新的预览功能。你可以在 IDE 中直接看到你正在开发的小部件。# h: k7 E% `2 n; e
) o% |/ U8 }! q- A' M这个功能叫作“Hot UI”，就像热重载一样，在修改代码的同时直接更新 UI。你还可以直接修改 UI（比如修改颜色），这个修改也会直接反映到代码中。要启用这个功能，请参看：6 H; g. A8 J- v$ R
2 i5 x' a4 i; J# h6 X7 u5 k( E+ k) I
https://github.com/flutter/flutt ... tarted-instructions8 x8 b; O, e6 C) p5 f; q% K. }
5 m5 U) L9 B$ |& s
Layout Explorer1 l0 s4 \6 C/ T9 |! [
7 Q: j) U$ p! y w3 `/ u不管你是手写代码，还是使用 Hot UI，代码都是免不了的，而有代码的地方就会有问题，这也就是 Dart DevTools 发挥作用的时候。我们在新版本的 DevTools 中加入了一个叫作“Layout Explorer”的新功能。
# Y/ c3 V: a7 ?- c: [* P
) ?- Y. f0 S- T# x& `$ U4 ?; o3 F& C
Layout Explorer 可以帮你可视化小部件的布局，你还可以通过交互式的方式修改布局选项。要启用这个功能，请参看：
3 o: M. g' W) N
5 ^2 z$ z. {# n! T* Y! Xhttps://flutter.dev/docs/develop ... ter-layout-explorer
* Y; b; h. A7 U0 ~, S: M7 d( [- s4 o% d) \
多设备调试
) j$ `8 O- x0 o q4 \; g) Z
, L6 ], p! g C) Z i% h1 H在大部分情况下，Flutter UI 的开发和调试是在单个设备上完成的，如果能够同时在多个设备（物理设备或虚拟设备）上调试岂不是更好？VSCode 的 Flutter 插件现在可以支持多会话调试。
- f# [0 ]& N( W2 h" D2 m5 u, y$ u
6 V b) o0 u: E }) ^
. Q0 ~2 S( v+ R9 t* U从上图可以看到，同一个 Flutter App 同时运行在三个不同的调试会话中。这个时候如果改一下代码，热重载功能会确保代码改动在三个 App 上都体现出来。如果设置了断点，不管是哪个 App 都可以触发断点。如果你想停止调试其中的一个 App，其他几个 App 不会受到影响。有关多设备调试的更多信息请参看：
+ [* Y% w g3 P1 {. m% } O
5 c! U" t3 h9 M+ q6 @' h6 @& ihttps://github.com/flutter/flutt ... ebugging-in-VS-Code
! _+ \6 N* P" i) o% S
- h" d3 {2 S2 y* b改进的 Android 构建流程' u) n- Y. g* ?1 B7 u9 o+ N
- k' Z V/ B1 P& M; f0 ~/ W在 Android 构建流程方面，我们解决了若干问题。首先，Android 构建流程更健壮了。我们让 Flutter 插件改用 AndroidX，并建议其他 App 和插件也使用 AndroidX。不过，对于未改用 AndroidX 的插件，如果遇到构建问题，我们提供了其他选择（使用 Android 归档文件和 Jetifier）。新的构建方式速度较慢，所以我们并没有把它作为主要的构建方式，但它解决了 95% 我们在构建过程中遇到的问题。
/ `+ R% Y U' f. D+ @8 | c, v! B4 I
4 T5 x" @5 T' O4 s另一方面，我们用 R8 替代了 ProGuard。R8 是谷歌提供的一个新的代码优化器。在此之前，开发者需要根据插件指南手动配置 ProGuard 规则，而在新版本中，规则可以在插件源代码中定义好，R8 会自动解析这些规则，为开发者省去了很多麻烦。6 _/ H8 W5 F9 w8 K- M
# @: X4 s1 [# RR8：https://developer.android.com/studio/build/shrink-code
5 Q5 U( `: |& K$ C* [$ e$ Z7 E: i& {* v6 Z
另外，我们继续尝试给 Flutter 瘦身，把“Hello, World” App（Android 版）大小减小了 2.6%（从 3.8MB 减到了 3.7MB）。
! G/ O0 c, l& `& C5 b Z
) X5 z( z+ Z) t) i$ o模板图像测试
5 P% t' N( }8 S( {) Z
9 o% S8 r) k- P. j( O“模板图像”（Golden Image）是指给定小部件、状态、应用程序或其他可视元素的渲染主图像文件。在 Flutter 1.12 中，我们提供了 GoldenFileComparator 和 LocalFileComparator 类，用于进行图像像素比较（而不是按照比特比较），避免误判。1 \9 u1 g. t6 p* s
1 M! i$ E* ?: z- E' V* N
6 D9 |$ g4 I8 o4 s2 x
从上图可以看出，主图像和测试图的边线存在差别。
( W1 j& \, H% q* Q% Q4 L7 G C/ O( f, X+ |, a7 c- g
社 区6 j. v. Z! v( v3 j
& p& h2 b2 K9 R2 r除了 Flutter 框架和工具，Flutter 社区继续把 Flutter 带到了新的方向，具体可以观看这个视频：
& E9 r S$ ]: D0 R4 }
6 V( I, x9 m" H3 khttps://youtu.be/tWCr9vlGz_8 |, S2 K% v+ ~( a
; h- Y# I! h7 S我们很庆幸 Flutter 社区有这么多优秀的开发者，能和你们一起，我们感到很骄傲！- P% w8 J1 K5 q
2 k! d5 X3 ~! k$ u3 D- p
最受欢迎的 Flutter 包: B7 E5 K$ n$ j* K- I6 P
2 G7 n. J4 W( ^9 \
在 2018 年 12 月发布 Flutter 1.0 的时候，pub.dev 上只有 1000 多个包，而在写这篇文章时，这个数字增长了 6 倍多。有时候选择多了反而不知道该如何选择。pub.dev 提供的分数以及认证发布者功能可以作为用户的参考，而 pub.dev 现在提供的评分系统则是锦上添花。
5 d. M* X6 ?7 d6 B; B: K1 @! ~. |+ ?) A6 @$ H
http://go/dart-2.7-annoucement
: Y: k' k* O1 g4 v+ E$ e. `$ ?$ J
~# X& P* r2 `- K9 A' f2 D用户一直希望我们能够为他们推荐包和插件，为此，我们启动了“Flutter Favorite”计划。
6 }' r+ D! H+ a, T3 R/ h& H) f
8 |5 }/ R. M G: V6 i$ t1 k2 X2 @9 F. h2 Z
被列入“Flutter Favorite”的包（或者插件）应该是你构建 App 的首选。Flutter 生态系统委员会（成员来自谷歌 Flutter 团队和广大的 Flutter 社区）将会制定质量标准，并根据这些标准来挑选包。包的作者可以在他们的包文档中使用“Flutter Favorite”标志。另外，pub.dev 也会在搜索结果等地方显示这个标志。
+ O* f% M0 L2 G$ _$ H* R
' W% w$ s" O7 R9 r, G% ?. O/ ]社区开发的工具
' S' K6 U+ |1 n% V
# h1 Z! v8 E) R& w9 ]% v% ~: iFlutter 社区贡献了大量优秀的工具，以下列出了一小部分。7 `' o7 J; \! r
. T) a& d' [$ h/ w: I
7 s# B8 a! ^; _& y, o
Flutter 设备预览：https://github.com/aloisdeniel/flutter_device_preview2 @9 t; e$ d- {
- l8 j4 i# o3 S1 }! f
" I) N o- V6 R: s/ o. I# v
Widget Maker：https://www.widgetmaker.dev/
0 e k8 N1 j9 A4 Y
6 \0 ^/ f( O2 `3 B- ?9 ~/ W/ O
) y; e/ @- t" o
Panache：https://rxlabz.github.io/panache/#/* J \: d# D- B9 X) W* M; y
: H1 X+ W. I2 C0 T, b- Z) K; B4 C
合作伙伴 Nevercode
/ V% L, v# `8 Y4 ~$ K
8 c: \* ?0 ?7 h* m1 _$ M除了社区提供的工具之外，还有其他一些优秀的合作伙伴，Nevercode 就是其中不得不提及的一个。最新版本的 Nevercode 提供了一整套新功能，包括一个叫作 Remote Mac 的 VSCode 插件。, Q* N8 Z" s- a# `0 R$ A0 s1 `( |
5 c+ J6 A# V" \ i* C( \- }' N* Y. \" R
你可以借助这个插件直接连接到托管在云端的 Mac，进行 iOS 和 macOS Flutter 代码测试。更多有关 Nevercode 的信息可以参看：
$ J/ S: ^1 h5 O+ o y
( a% \( K" r9 _5 C0 L$ ]https://blog.codemagic.io/more-professional-capable-accessible/
8 }7 _" L" \ x1 m$ l$ @, ]5 Q" x$ k# c& W0 \5 @* ?4 ^
其他合作伙伴（如 Supernova、Rive 和 Adobe）相关内容可以在这里看到：$ F! P( q! L, q4 |) i; K
7 Y. g: g5 u8 Z8 J: h7 F% E
https://developers.googleblog.co ... ient-computing.html- a8 y% {8 q) h3 A# l+ |" D. S! q+ n
% f/ p/ D4 I1 I! C6 ]; K3 Y
https://medium.com/flutter/annou ... a-year-22c256ba525d' H" o% K" c+ m4 g, c; d
6 \1 H q5 f9 {
|
|
