|
|
发表于 2019-12-27
|
|阅读模式
四天前，前端年度“明星”Flutter 正式发布了最新版本 1.12。新版本有哪些值得关注的新特性和改进？来自 Flutter 开发团队的产品经理 Chris Sells 将为大家详细解读。& L$ ~" Q. Y( y# ?" V% B# X K! A
, T4 v/ l; h5 C) y
四天钱，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 指南，以及改进的错误消息呈现（格式化、颜色高亮和更多的可操作项）。
) i# F$ e/ I& ?1 ?' s! e" H
- s8 p. X- o* f5 O对于每一个版本，我们都怀着始终如一的信念——一切都才刚开始。这个版本也不例外，这是我们有史以来最大的一个版本，有 188 位贡献者参与，关闭了 4571 个 issue，合并了 1905 个 PR。+ y0 n; } c- h$ X$ S) A8 c" h
" W. |( ~* Y8 H* ?2 h1 ?1 T
Flutter 框架) V* B( D( d2 e3 @2 f8 {
3 g# n# T( T' V
新版本完全支持 iOS 13 的暗色模式，加入了新的 Cupertino 小部件，做了一些 UX 调整，并带来大幅改进的 Add-to-App 体验。
. o% V) T, H Y4 e7 u. ~; m! c4 S5 ~* {: q
完全支持 iOS 13 暗色模式- W3 G3 ?9 |, ^# r7 M- S z
( h' x6 t, v7 I" y6 a, p完全支持 iOS 13 主题模式是 Flutter 1.12 的一大亮点，包括支持 Cupertino 小部件的暗色模式。
, ^8 b5 b& g% u6 s
* O: @, R9 U6 _3 b
4 U) F4 W m: d5 D0 X
从上图可以看到，对暗色模式的支持不仅仅是更换背景色，其他部分的颜色也匹配得恰到好处。另外，我们还新增了两个小部件。0 y8 p+ Z3 x+ C0 U$ o
* _5 V! z! J1 p( e' l+ d) H) q
& F/ N0 y' n+ j |% U i
CupertinoContextMenu 和 CupertinoSlidingSegmentedControl
4 j. \/ `& y: M9 p
; w3 \4 e; k, A% D为了让 Flutter App 看起来更像原生 App，我们还改进了滚动条保真度，提供了自适应的 CupertinoAlertDialog 填充，并允许为 CupertinoDatePicker 设定最小和最大日期限制。
1 ?( F: s4 [1 U$ E1 x9 t8 [2 P
! Y) z T1 L& N% S! |" H改进的 Add-to-App 体验
4 I; H5 w( S! F# |! [2 S4 s/ g1 E4 a
新版本也带来了 Add-to-App（将 Flutter 集成到已有 Android 或 iOS App 的能力）方面的改进。我们努力简化集成流程，为开发者带来更好的体验，包括在 Android Studio 中加入新的 Flutter 模块向导。2 r! u$ Q; S" }0 F
# X: s1 V4 q( I& N8 C& D
+ i) ?: G0 _2 w8 N1 RFlutter 1.12 支持将全屏 Flutter 实例添加到 App 中，具体来说：7 o; d h3 U0 Y1 ?5 z# j
; `# N' C. t: j. X/ G/ {提供了稳定的平台集成 API（Java、Kotlin、Objective-C 和 Swift），包括一组新的 Android 平台 API，更多详情请参看：http://flutter.dev/go/android-project-migration
, g8 `5 a: n8 ?* X& c9 V, ^4 [, j' @) T$ H. X! }# [) j5 d) L7 x6 T( z% u
可以在内嵌的 Flutter 模块里使用插件。, g! W' ^$ Z% a$ u3 j. f
j+ v& f/ V W8 `1 k% i
更多的集成方式，如通过 Android AAR 和 iOS Framework，获得与现有构建系统更好的兼容性。6 _3 {' R4 t* @3 ?0 y* k
+ p# A- K2 r( [重构了“flutter attach”机制（命令行工具、VSCode 和 IntelliJ 插件），可以更容易地 attach 到运行中的 Flutter 模块进行调试或热重载。
% o) Z6 g3 t4 d9 X+ e H$ i' ]" C+ P" T3 I7 M: P4 V
要尝试改进过的 Add-to-App 功能，可以参看：
/ |1 I, l, X: X; j9 U1 l
B8 P2 C+ j3 [. ]- ohttps://flutter.dev/docs/development/add-to-app# p1 X/ v) R% o* e
5 }; N+ }$ b$ C* p8 q/ Chttps://github.com/flutter/sampl ... rimental/add_to_app
+ @4 O* q' O( D" {1 E) w; ?0 o/ p8 c4 |! q1 J$ f% ^6 g
后者演示了各种集成场景。
0 R1 E1 f5 I& f1 e$ J7 u2 B* h- e: U6 f! r! B: z
Dart 2.77 O8 v' L$ Y* S3 q0 ~( [/ g
, D* J8 e9 W4 NDart 是 Flutter 的基础，所以，如果你还不知道扩展方法和字符串（包括 emoji）安全，或者你想知道如何通过非空类型实现 null safety，可以参看：
! [# u' Z/ z0 t) C6 y& s1 R" u/ f! G. P; @. ^1 l- t5 o& d6 h
https://medium.com/dartlang/dart-2-7-a3710ec54e97' R7 G' `0 a4 X; b) W( L4 G
6 ]5 @: s% X% e: W: x) h
Flutter 1.12 稳定版之外
( r/ h4 d7 B$ _5 Y
% ] T0 U! g' H' o6 o B除了稳定版带来的新特性之外，Flutter 1.12 还提供了 Web 支持（beta 版）和 macOS 支持（alpha 版）。! Y. e, t+ ^+ Y; \+ V0 u+ H
' o* L$ N/ Z# y9 G9 Y
Web 支持
! p; V7 I/ [# H+ c& P
# E/ D! z" t2 i9 g ^Flutter 1.12 的 master、dev 和 beta 频道都提供了改进的 Web 支持。, I c4 S3 T: B8 r" U2 d3 O% p5 N# O
0 a! w" H) _5 Y' S0 U
0 k$ c# i- H5 j# x: z( I如上图所示，Rivet 使用了 Flutter 的 Web 支持。Rivet 是一个教育类项目，目前在生产环境中提供了移动 App。他们使用 Flutter 和 Firebase 开发了 Web 版 App，计划于 2020 年初正式发布。2 r0 V7 i+ l+ B, I, D3 g
0 i$ T9 B0 F4 [1 GRivet：https://rivet.area120.com/link/flutter8 { U5 ` v6 [2 w( a5 J
$ v5 w6 L0 `7 k7 m2 m$ W
macOS 支持3 U) P' B- g: N0 }( T$ q4 _/ F
, M" w4 Z8 d+ v* E
对 macOS 的支持很快也会实现，目前正在从技术预览阶段进入到 alpha 阶段，master 和 dev 频道已经可用。
7 Y9 j$ {# ]" j# D; ~3 a* F6 d# z( x# o
" L! E3 o% W5 O3 O
上图是新版本的 Flutter Gallery，除了支持 Android、iOS 和 Web，现在也支持 macOS。5 e/ c1 h) ^/ x; q. `; C' X" E
% U0 w& U- Z# I# aFlutter 1.12 对桌面的支持由此跨出了一大步，包括新的 DataTree 和 Split 小部件、一些移植的插件，支持发布和调试模式，使用起来非常简单。你可以在 Flutter 的系统配置中启用对 macOS 的支持（master 和 dev 频道）：7 ^% j% }3 J; h% ?' f+ V' E
, \7 Z( M+ ?$ O. Z# V* J6 M/ h, ?现在也可以使用“flutter create”创建一个可在 macOS 上运行的 Flutter 项目。
0 w$ G! ?, G/ u% W e
$ O9 @6 @; l4 u& M; c; j: \) r5 L) @+ i* M% v. |
除了工具之外，我们也在改进适合桌面 App 的像素密度。移动 App 需要相对较大的控件，因为用户通过触控的方式使用控件，而对于桌面 App 来说，用户更倾向于使用鼠标。所以，对于桌面 App，Flutter 允许开发者选择控件的像素密度，让它们更好地迎合桌面用户的需求。
2 j; y& R5 M* Z) t: {% l
% q, o; ]# {, W9 R
, W4 o7 B4 }! v7 }1 H为了改进 Flutter 桌面 App 的体验，我们做了很多工作，改进了键盘导航和键盘访问方式，包括：3 a+ ?' }9 p! R& `5 Z
# F0 X; h5 z* H) s同步辅助按键和按键事件；" n7 m, D0 d4 P# i
% k& s/ g' W# ?, `+ F在下拉框打开的情况下选择列表项；& h4 E& X8 S3 i. X/ D7 M
9 S& w5 x; i9 G) `$ g0 C5 @+ i0 V- {更方便地访问主焦点；
k* M: J3 ^$ B7 B0 x, }/ Q. F/ {; z0 y4 I! e+ s9 H9 p! }, V
增加键盘导航、开关的悬浮和快捷键；
; [$ {$ a) B3 K4 V6 w' F5 K: l; R- l" m8 a% T: H
复选框和单选框按钮；
' y6 Q# P) q1 I8 D; h# X6 d- d0 r: P% {8 I
自动滚动，保持焦点项可见；* k3 Y1 n0 Z8 R6 m5 `8 }
1 b4 O" I& B( e
基于键盘快捷键的滚动；' L9 [. g6 C) u9 `! f$ i
! l" d; h, Q# n2 E9 P! ^& ]
用于处理焦点和悬浮的新部件；/ U8 S% E% g. O4 k# G6 x3 P* K
6 B o; m( R9 _6 ], Y: d重写了拷贝 / 粘贴和键盘选择；7 W) k) F6 A/ ~; n' u; j/ @7 u' K3 D1 y
8 K& E7 a' Z% \' f/ U
使用键盘导航下拉框；+ Q6 i. ^- u( h9 O! ~
+ m, U' r. k7 g/ ]% j# f0 \像素密度支持；, c6 p' R: g( P! @$ F1 l7 j" p
! X" l' w, R/ y9 v/ ~5 b4 d* a
增加 macOS 功能键支持。: y* A7 w$ u0 f) d$ p4 O
) w, I( L2 Q2 h* u# G) {8 W对 Windows 和 Linux 的支持还处在技术预览阶段，后续我们会更新这方面的进度，更多详情请参看：9 q/ O8 y, S5 O; `. ^/ H
5 ~9 f8 M7 L& T4 e" P5 ?. l* mhttp://flutter.dev/desktop& {+ [, B9 b0 f% ~
& D7 w1 @, y' h* ?8 }- q5 C8 e( fFlutter 工具
8 L! N8 W) g/ P; M$ f+ ^. Q& [( E4 l9 ?# f) x+ z# C
除了 Flutter 框架本身，Flutter 工具也有很多要说的，包括新版 DartPad、更强大的基于 IntelliJ 的 IDE（增加了一个叫作“Hot UI”的预览版功能）、增强的 Dart DevTools（增加了新的可视化布局视图）、在 VSCode 中同时调试多个设备、改进的 Android 构建流程，以及在测试过程中更好地分辨渲染组件。
4 Z5 N z0 i; P3 u u" I% j( _! V0 a* V; s+ m0 g9 G" M/ a
DartPad
+ \2 n- x( _2 o
( o5 u; m5 @/ ?* f& W. v7 q$ e$ c如果你还没用过 DartPad，一定要试一下！你可以在不安装任何东西的情况下尝试 Dart 的新特性。新版的 DartPad 现在支持 Flutter！3 f. R" `) p! ]$ t% N
4 b% @1 `# j6 S* ] d: u
DartPad：https://dartpad.dev/
' z3 P5 M+ Q- h$ J
$ v3 v( R( F! E: |# x/ D" K J" G
b* g4 U, ^# |0 H1 f
如上图所示，在左边写 Flutter 代码，在右边可以实时地看到运行结果，你可以不用安装任何东西就可以使用 Flutter。
0 k2 D7 W( h! P9 E( S
3 r8 I4 z" u, [, X" A7 }) ~; H除了 DartPad 本身，我们也在将 DartPad 加入到我们的文档和代码库中，这样开发者就可以在自己喜欢的浏览器上学习 Flutter，更多有关 DartPad 的内容请参看：
4 D0 c+ ] Q7 J; F$ v1 \
" I5 ~* R) B# R7 Bhttps://medium.com/dartlang/a-br ... support-16fe6027784
* \5 _2 X+ G# W# e1 e$ A+ v0 F3 A, G
Hot UI4 g1 Q0 V0 Y# B4 I
' d& V) e/ I/ Q2 \6 Z. h如果你在本地安装了 Flutter 工具，就会在 IntelliJ/Android Studio 的 Flutter 插件中看到一个新的预览功能。你可以在 IDE 中直接看到你正在开发的小部件。, z# N/ ~% Q1 U3 X6 Y/ k
! j+ Z. G+ A/ U- j% N8 j0 W
这个功能叫作“Hot UI”，就像热重载一样，在修改代码的同时直接更新 UI。你还可以直接修改 UI（比如修改颜色），这个修改也会直接反映到代码中。要启用这个功能，请参看：
; ]2 _9 s' t& f4 J& b
: s: w9 u# m5 L! whttps://github.com/flutter/flutt ... tarted-instructions
5 |! H( v, h5 m4 [8 ?
- X0 ?6 {5 v1 I. z& b6 `6 SLayout Explorer( O3 h2 Q" D9 V: F
! T* Q* L% S% ]! ~! @1 t7 q不管你是手写代码，还是使用 Hot UI，代码都是免不了的，而有代码的地方就会有问题，这也就是 Dart DevTools 发挥作用的时候。我们在新版本的 DevTools 中加入了一个叫作“Layout Explorer”的新功能。6 N4 l- x9 ^6 Y2 M: G$ L% }
8 r# F# p+ ?+ m1 a% N) j% j3 n( D, x* n6 z+ @2 D" k
Layout Explorer 可以帮你可视化小部件的布局，你还可以通过交互式的方式修改布局选项。要启用这个功能，请参看：+ a8 y4 o- _& B; n* l" E
/ c9 D, D1 B p; x9 L ghttps://flutter.dev/docs/develop ... ter-layout-explorer! O6 ^/ `6 P! K) f% w* s& l0 p0 Z
N1 k' B1 A* ~0 f: T7 Q) l+ [
多设备调试5 l/ Q/ }& T/ m3 Y0 ~- T
* X7 t2 `3 N3 ^. S在大部分情况下，Flutter UI 的开发和调试是在单个设备上完成的，如果能够同时在多个设备（物理设备或虚拟设备）上调试岂不是更好？VSCode 的 Flutter 插件现在可以支持多会话调试。+ c# G7 f/ L" ^* X/ t. W/ m m: f
* z7 C& n7 V; w
6 {" \8 l6 n' d+ L8 T从上图可以看到，同一个 Flutter App 同时运行在三个不同的调试会话中。这个时候如果改一下代码，热重载功能会确保代码改动在三个 App 上都体现出来。如果设置了断点，不管是哪个 App 都可以触发断点。如果你想停止调试其中的一个 App，其他几个 App 不会受到影响。有关多设备调试的更多信息请参看：
4 r# B/ }9 ~+ L x h- `: t; y; O4 B' H$ ^# {( C
https://github.com/flutter/flutt ... ebugging-in-VS-Code
2 x% |% i' k( I0 N
3 I# y; _* b$ t3 R1 G改进的 Android 构建流程
2 ?& J% Y% D( o) d5 \0 j% @ z5 `2 f' _' d+ V/ F" t/ u
在 Android 构建流程方面，我们解决了若干问题。首先，Android 构建流程更健壮了。我们让 Flutter 插件改用 AndroidX，并建议其他 App 和插件也使用 AndroidX。不过，对于未改用 AndroidX 的插件，如果遇到构建问题，我们提供了其他选择（使用 Android 归档文件和 Jetifier）。新的构建方式速度较慢，所以我们并没有把它作为主要的构建方式，但它解决了 95% 我们在构建过程中遇到的问题。0 n9 s9 u% @5 P) p7 w9 Y
+ n6 b. n# ~' W8 {另一方面，我们用 R8 替代了 ProGuard。R8 是谷歌提供的一个新的代码优化器。在此之前，开发者需要根据插件指南手动配置 ProGuard 规则，而在新版本中，规则可以在插件源代码中定义好，R8 会自动解析这些规则，为开发者省去了很多麻烦。1 B9 m! d* M, e# O! D6 t8 [
( }! L% z4 t/ ^8 NR8：https://developer.android.com/studio/build/shrink-code1 ]$ B) `# ^. Z9 g- Q5 ^ l7 Z8 {: i
" G) s) I) @4 P2 T5 [! |/ U另外，我们继续尝试给 Flutter 瘦身，把“Hello, World” App（Android 版）大小减小了 2.6%（从 3.8MB 减到了 3.7MB）。
" N- z! y% P) J! ^" ?
5 K# P; Y$ k! T2 z1 Z" F模板图像测试
+ ~; u8 f/ n E& G
6 w7 Z @" _, w/ S1 Z+ d. a“模板图像”（Golden Image）是指给定小部件、状态、应用程序或其他可视元素的渲染主图像文件。在 Flutter 1.12 中，我们提供了 GoldenFileComparator 和 LocalFileComparator 类，用于进行图像像素比较（而不是按照比特比较），避免误判。
6 m* B" D8 Y/ @0 Y( n4 u. ^8 ` s" c; F: @! | A
0 S8 H! J7 z; T% [; `( m从上图可以看出，主图像和测试图的边线存在差别。+ R2 r, O2 a j% j7 u# z- C2 K g
# F4 L! t* p$ w; n! Z0 Y社 区
# z9 g* K7 ?7 X0 I |+ `) l& ~
除了 Flutter 框架和工具，Flutter 社区继续把 Flutter 带到了新的方向，具体可以观看这个视频：0 D0 |1 M0 O: J9 ]5 H0 Y, q
- p, I. f: X9 p: D6 v. l6 [( h
https://youtu.be/tWCr9vlGz_85 ^1 c8 E% p1 d3 m/ e# L0 n8 d
% c' q: p* ~1 B5 x
我们很庆幸 Flutter 社区有这么多优秀的开发者，能和你们一起，我们感到很骄傲！% {) F _# N2 T8 A6 R
1 A7 [2 m# `( @( F4 J4 s+ D最受欢迎的 Flutter 包
. J* r) Q* y T/ E( ^* v
' U! `/ X4 [! g0 j在 2018 年 12 月发布 Flutter 1.0 的时候，pub.dev 上只有 1000 多个包，而在写这篇文章时，这个数字增长了 6 倍多。有时候选择多了反而不知道该如何选择。pub.dev 提供的分数以及认证发布者功能可以作为用户的参考，而 pub.dev 现在提供的评分系统则是锦上添花。
' B- ]1 T% u% l. ~. N) |8 {0 t2 V8 h9 i- Q
http://go/dart-2.7-annoucement
& L4 ^$ E: z2 _* M- ~+ [5 P5 f
) T, {5 C* L& ?- ]$ Z+ b用户一直希望我们能够为他们推荐包和插件，为此，我们启动了“Flutter Favorite”计划。4 O; b) d8 ~$ p7 V
% N5 z; V# R2 O! ]: B/ B
0 |4 Y# T4 x/ t( K
被列入“Flutter Favorite”的包（或者插件）应该是你构建 App 的首选。Flutter 生态系统委员会（成员来自谷歌 Flutter 团队和广大的 Flutter 社区）将会制定质量标准，并根据这些标准来挑选包。包的作者可以在他们的包文档中使用“Flutter Favorite”标志。另外，pub.dev 也会在搜索结果等地方显示这个标志。
3 H# c: o& R [0 S K: L8 t5 S( j" T( Q6 c# A2 m
社区开发的工具
% A: w/ Q3 g7 T" S0 z0 C; ]- l6 k1 B" U% i/ _7 ]
Flutter 社区贡献了大量优秀的工具，以下列出了一小部分。
; a, C/ j0 {2 z
2 T; u! k3 [7 j% c
" ]5 L n0 P8 ]Flutter 设备预览：https://github.com/aloisdeniel/flutter_device_preview& e' Q4 V# q9 {) T: j
7 @, E; }/ Z! h6 G' ]) W
. _# S" M3 o( H9 p& i- ]
Widget Maker：https://www.widgetmaker.dev/* E; r9 M+ b+ H9 q: l T" O( J2 k# m
5 e$ ?5 y: x5 k7 h. {
$ @# y4 w+ k$ m P4 o5 P
Panache：https://rxlabz.github.io/panache/#/
$ a+ c; D, J% D& {7 ]9 h* ^0 c/ f" E5 {1 U# \8 x S4 M: k
合作伙伴 Nevercode1 R9 m* k4 P6 _0 _. V% ~1 Y! [8 G
L5 u" G$ Q: \% J9 K除了社区提供的工具之外，还有其他一些优秀的合作伙伴，Nevercode 就是其中不得不提及的一个。最新版本的 Nevercode 提供了一整套新功能，包括一个叫作 Remote Mac 的 VSCode 插件。
; f; L0 i! U0 \# X* l, n
3 l3 I' M0 @" `+ Q, z/ g- o6 O
! x; i$ L& O- ^& f1 p
你可以借助这个插件直接连接到托管在云端的 Mac，进行 iOS 和 macOS Flutter 代码测试。更多有关 Nevercode 的信息可以参看：2 l% Q) d9 A( c0 k( \
& ^, l$ M) j' |( xhttps://blog.codemagic.io/more-professional-capable-accessible/5 i2 z0 Q& u: ? P$ x
% | |9 @( @6 w ]" d
其他合作伙伴（如 Supernova、Rive 和 Adobe）相关内容可以在这里看到：6 @, e% G3 y2 q1 m* X! }
]1 q0 M7 ?5 E4 z9 Jhttps://developers.googleblog.co ... ient-computing.html) N0 n( c5 H: x. R, B* Z" W* @, J/ j) j$ f
5 u' f1 _2 k0 C1 h+ r
https://medium.com/flutter/annou ... a-year-22c256ba525d
' ^$ t1 a" t' J' s; M; ^
, s* Y3 T7 X0 n+ _: [1 R
|
|
