Flutter现支持Web和桌面,一跃成为前沿大一统框架

作者写文章不容易,觉得好看的话,点个赞支持一下吧,谢谢大家。


外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这次Flutter Interact大会上,Flutter1.12正式版本发布了,除此之外,这一次发布会上也带来了很多新的东西,根据内容相关性,我把它们主要分成了三个大类:Flutter框架体系编辑器和开发工具UI视觉交互方面


一、Flutter体系框架

Flutter框架体系除了Flutter本身之外,这次发布了Flutter Web Beta版本,以及Flutter Desktop macOS预览版本,拓展了Flutter的应用领域。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.1 Flutter1.12正式版发布

此版本包含视觉更新,主要用于支持iOS 13,包括完整实现的黑夜模式,新的Cupertino小部件,另外多个UX做了调整,还增加了Flutter添加到native应用的新功能,主要有以下这些功能的更新:

★ 可用的iOS 13黑夜模式:在Flutter1.12中,最大的变化就是对iOS13的支持,此次更新可以在Cupertino组件上使用完整的黑夜模式。暗模式支持不仅是换掉背景颜色,而且还可以调整其余颜色以达到理想的视觉效果。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

★ Cupertino组件的变更:

新增两个组件:CupertinoContextMenu和CupertinoSlidingSegmentedControl,

为了更像原生iOS13的UI表现,这次更新们改进了ScrollBar的保真度,提供了自适应的CupertinoAlertDialog的padding值,并在CupertinoDatePicker上允许设置mix date或max date的日期限制。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

★ 支持“Add-to-App”功能:这个放到后面的“Android Studio里面具体讲解。

★ 包括AndroidX:现在,所有Flutter项目都使用AndroidX支持,因此您不再需要处理所有因为AndroidX而导致的错误!

★ Google字体支持:不再需要在应用程序中下载和添加字体,而无需pubspec.yaml。使用Flutter Google字体插件,您可以在Dart代码中直接使用您喜欢的字体!

★ Flutter Galley: Flutter Gallery应用程序已完全更新,因此您可以查找新窗口小部件和功能的代码库,并通过在首选平台上运行来尝试。

★ 组件的新增和更新变化:主要包括SliverOpacity小部件,SliverAnimatedList和为SliverAppBar配置拉伸效果的功能,详细的变化如下所示:

添加MediaQuery.systemGestureInset为了支持Android Q.
默认更新ToggleButtons约束并添加新的约束参数.
在PageRouteBuilder中添加fullscreenDialog参数.
实现了DropdownButton.selectedItemBuilder.
Expose API —— 用于调整图像缓存的大小.
SliverAppBar具有回调功能和FlexibleSpaceBar支持的可配置超滚动拉伸.
Re-landing SliverAnimatedList.
在showDialog和showGeneralDialog中添加navigator功能.
FadeInImage支持cacheWidth和cacheHeight.
新增SliverOpacity.
新增SliverIgnorePointer.
使用RenderSliverPadding插入SliverFillViewport.

★ 新增黄金文件测试(GoldenFile):“黄金图像”术语指的是主图像文件,也就是你选择要进行测试的组件,状态,应用程序或其他可视表示形式的真实呈现。在Flutter 1.12中,新增GoldenFileComparator和LocalFileComparator类的实现,这些类按像素而不是位进行比较,从而消除了false positives。这些新的实现突出显示了视觉上的差异,以便黄金图像和测试中的更新之间存在差异时可以清楚地看到它们。

具体用法可以查看: api.flutter.dev/flutter/flu…

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.2 Flutter Web Beta版发布

具体的请查看我前面的文章介绍:Flutter Web Beta版本终于发布了,可用于开发正式项目了

1.3 Flutter Desktop Alpha版本发布

Flutter For Desktop在MacOS中现在处于Alpha状态。Flutter Gallery应用程序现在也支持桌面了。此外,键盘的操作性等还有很多方面都有很大的改进。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

macOS alpha版本的flutter gallery也得到了支持:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

macOS alpha代表Flutter对桌面的支持迈出了一大步,包括新的DataTree和Split示例窗口小部件,以及移植到macOS的多个插件,对在发布和配置模式下构建的支持以及大大简化的工具介绍。如果您是从开发人员或使用的是master分支,则可以通过以下命令启用macOS桌面支持来访问macOS工具:flutter config — enable-macos-desktop

在macOS上创建Flutter桌面项目就像创建任何其他新的Flutter项目一样,使用 flutter create 即可。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

除了工具支持之外,Flutter团队还一直在致力于适合桌面大小的应用程序的密度。移动应用程序需要相对较大的控件来适应触摸交互,而在桌面大小的设备上,用户更有可能使用鼠标。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

为了改善Flutter桌面应用程序的体验,我们在键盘导航和键盘访问方面做了很多工作,包括:

将修改器键与键盘事件同步。
打开下拉菜单时管理项目选择。
添加一个方便访问的主要焦点。
添加键盘导航,悬停和开关快捷方式。
复选框和单选按钮。
自动滚动以使聚焦的项目保持可见。
基于键盘快捷键的滚动。
一个用于处理焦点和悬停的新小部件。
重写的复制/粘贴和键盘选择。
下拉菜单的键盘导航。
视觉密度支持。
添加macOS功能键支持。

除了Flutter Gallery示例之外,我们还建议使用新的Photos Search示例,地址如下: github.com/flutter/sam…

该示例展示了很多桌面方面的优点,包括键盘处理,新的小部件密度,新的插件和新的小部件。更多有关Flutter For Desktop的信息可以查看官方网站:flutter.dev/desktop


二、编译器和开发工具

Flutter的编译工具和开发工具此次也有重大升级和更新。大概有这些内容:Android Studio工具里面支持把Flutter添加到原生的应用程序中的“Add-to-App"。基于IntelliJ的增强型IDE(具有我们称为“ Hot UI”的新功能的预览)。DartPad新版本支持Flutter。Dart DevTools预览版,具有新的视觉布局视图的增强型,可在同时进行多设备调试的功能。Visual Studio Code改进了Android的构建过程,并更好地支持了在测试运行之间发现渲染小部件中的差异。Dart 2.7正式版的发布。

具体讲解请看下文介绍:

2.1 Dart2.7正式版发布

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

★ 1.Dart 2.7添加了强大语言新功能:扩展方法。这些使你能够向任何类型(甚至是你无法控制的类型)添加新功能,并具有常规方法调用的简洁性和自动化。

★ 2.安全字符串处理(包括emoji):

Dart的标准String类使用UTF-16编码。这是编程语言中的常见选择,尤其是那些支持在设备和Web上本地运行的语言。

在使用字符串时,通常不必担心字符和代码点。如果要做的只是接收,传递整个字符串,则内部编码是透明的。但是,如果需要遍历字符串的字符或操纵字符串的内容,则可能会遇到麻烦。为此,Dart 2.7引入了一个新的库 “characters”,用于处理这种情况。该软件包支持将字符串视为用户感知的字符序列,也称为Unicode 字形簇。使用“characters”库,我们可以通过对缩短文本的代码进行少量更改来修复代码。另外也支持emoji表情。

★ 3.支持空安全功能,不过目前是预览版阶段。

2.2 DartPad升级了

DartPad新版本支持Flutter了,你无需安装任何东西就可以使用Dart,这是一个在线网站,你看体验里面带有的几个Demo程序,并可在右边看到预览效果。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

至此,Dartpad至此纯Dart程序,Web程序,以及Flutter程序了,可以说Dartpad已经很不错了,不过部分简单的页面功能可以它体验一下,复杂的应用程序它是无法完成的,需要我们用开发工具编写才行。

2.3 Dart Dev Tools

Dart Dev Tools现在有预览版了,DevTools是Dart和Flutter的一套性能和调试工具,更好玩的是Dart Dev Tools是使用Flutter编写的,是不是很神奇,是不是感受到了Dart和Flutter的强大之处了?你一直以为这种调试工具基本都是C++或者.net什么的写的,没想到是用Flutter写的吧?厉害了我的哥。

Dart Dev Tools是开源的,github地址:github.com/flutter/dev…

有了Dart Dev Tools,你可以进行以下操作:

◆ 检查UI:检查Flutter应用的UI布局和状态。
◆ 查性能:在Flutter应用中诊断UI垃圾性能问题。
◆ 源码调试:Flutter或Dart命令行应用程序的源代码级调试。
◆ 调试内存:在Flutter或Dart命令行应用程序中调试内存问题。
◆ 查看日志:查看有关正在运行的Flutter或Dart命令行应用程序的常规日志和诊断信息。

这里有个新出来的功能要特别说明一下,它就是:Layout Explorer。可以用它查看组件树,让你更好地了解Flutter布局。目前,“Layout Explorer”功能仅支持浏览Flex布局,但将来可能会扩展到其他类型的布局。

首先你需要使用Flutter 1.12.16或更高版本才可以支持Layout Explorer的功能,选择一个Flex(Row 、Column和Flex等)组件或Flex组件的子组件,然后会在“Details Tree旁边看到一个“Layout Explorer”选项。点击它就会打开布局资源管理器的功能。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Layout Explorer能够可视化的显示Flex小部件及其子组件的布局方式,能够识别水平轴的对齐方式和交叉轴的对齐方式,还支持flex系数,布局约束等。如果属性有多个候选项,那么你可以通过下拉列表修改值。比如以下就是修改对齐方向的属性的示例图,你会发现每个更改就会显示出可视化的效果图,并且在你的设备上也会同步显示更改的效果。这种方式不会修改你的源代码,他会在热重载时恢复。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Layout Explorer还会显示违反布局约束和渲染溢出错误的情况。违反的布局约束显示为红色,并且在运行中的设备上会以标准的“黄色胶带”的样子显示溢出错误。具体使用效果如下图所示:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.4 Android Studio支持“Add-to-App”

就是把Flutter添加到原生的应用程序中。比如新建模块时,可以选择“Flutter Module”,添加一个Flutter Module。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

此功能的完善得益于以下这些功能的实现:

★ 1.稳定了Java,Kotlin,Objective-C和Swift中用于平台集成的API,包括一组适用于Android的新API。

有关更改的详细信息,请参见Android项目迁移文档: github.com/flutter/flu…

★ 2.添加了对在嵌入的Flutter Module中使用插件的支持。

★ 3.通过Android AAR和iOS提供了额外的集成机制,为了更好地与现有构建系统兼容。

★ 4.重新设计了命令行工具的flutter attach”机制,这样一来让VSCode和IntelliJ插件上可以轻松绑定正在运行的Flutter Module上进行调试,DevTools和热重载(Hot Reload)。

2.5 Hot UI(布局可视化工具)

你可以在Flutter的IntelliJ / Android Studio插件中找到这个新功能,目前还是预览版。然后你可以在构建组件时可以直接在IDE中查看它们并与之交互,你可以在“HOT UI"上面更改你的组件的属性,然后它会直接在预览界面及你的设备上面更新。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用动态图解如下图所示:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.6 VSCode多设备同时调试

你可以同时在多个设备和平台上运行Flutter代码,你还可以在Dart代码上设置一个断点,并可以在多个设备上进行断掉调试,如果代码修改了,当你启动热重载,你就可以看到哪个设备被激活了并进行断点调试。在大会的现场,Flutter团队使用了7台设备连接了Mac,并进行了现场同时调试这7台设备,获得了雷鸣般的掌声。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传


三、UI视觉交互方面

Flutter今年的活动主要集中在创意技术人员,原型设计师,交互式设计师和视觉编码人员。构建Flutter的一个核心动机是多平台开发不应该在视觉质量上有所妥协。将Flutter视为进行创意表达和探索的画布,因为Flutter消除了面向视觉的开发人员经常面临的许多限制。Flutter有状态的热重装功能使您可以轻松进行更改并实时查看结果,并且使用Flutter绘制的每个像素,您可以将UI,图形内容,文本和视频与自定义动画和变换混合在一起。

最后

==
就答题情况而言,第一问100%都可以回答正确,第二问大概只有50%正确率,第三问能回答正确的就不多了,第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法,都是一些可能会遇到的场景,而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了,希望大家通过此文了解js一些特性。

Flutter绘制的每个像素,您可以将UI,图形内容,文本和视频与自定义动画和变换混合在一起。

最后

==
就答题情况而言,第一问100%都可以回答正确,第二问大概只有50%正确率,第三问能回答正确的就不多了,第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法,都是一些可能会遇到的场景,而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了,希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细,发挥出最好的水平,找到一份理想的工作。

  • 14
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值