江苏龙网

  1. 主页 > 生活百科 > >

移动端的未来为什么是Flutter？( 三 )

Flutter


Flutter将UI组件和渲染器从平台移动到应用程序中，这使得它们可以自定义和可扩展 。Flutter唯一要求系统提供的是canvas，以便定制的UI组件可以出现在设备的屏幕上，以及访问事件（触摸，定时器等）和服务（位置、相机等） 。
Dart程序（绿色）和执行数据编码和解码的原生平台代码（蓝色，适用于iOS或Android）之间仍然有一个接口，但这能比JavaScript桥接器快几个数量级 。
将UI组件和渲染器移动到应用程序中确实会影响应用程序的大小 。Android上的Flutter应用程序的的初始大小约为6.7M，这与类似的工具构建的最小应用程序的大小相似，您可以决定Flutter的优势是否值得权衡，因此本文的余下部分将讨论这些优势 。
布局
Flutter最大的改进之一就是它的布局，布局是基于一组规则（也称约束）来决定UI组件的大小和位置 。
传统上，布局使用大量可以应用于任何UI组件的规则 。这些规则实现多种布局方法，我们就以众所周知的css布局为例（尽管Android和iOS中的布局基本相似） 。CSS具有适用于HTML元素（UI组件）的属性（规则），CSS3定义了375个属性 。
CSS包含大量的布局模型，如多种箱模型、浮动元素、表、多列文本、分页媒介等 。还有像flexbox 和 grid的布局模型在之后也被添加进去，因为开发人员和设计人员需要对布局进行更多地控制，而不得不使用表格和透明图像来获取他们想要的布局 。在传统布局中，开发人员无法添加新的布局模型，因此必须将flexbox 和 grid添加到CSS中并在所有浏览器上实现 。
传统布局的另一个问题是规则可以相互影响甚至发生冲突，通常有几十种规则元素的规则应用于他们，这使得布局变慢 。更糟糕的是，布局性能通常为指数性下降，因此，随着元件数量的增加，布局变慢得更快 。
Flutter最开始是Google Chrome浏览器小组成员进行的实验项目，我们想看看如果我们忽略了传统的布局模式，是否可以构建更快的渲染器 。几周后，我们在性能上取得了显著增长，我们发现：
大多数的布局是相对简单的，例如：滚动页面上的文本，其大小和位置只取决于显示大小的固定矩形，还有一些表格，浮动元素等 。
大部分布局只作用于UI组件树的一部分，并且这子树通常使用一个布局模型，因此这些UI组件只需要少量的规则 。
我们意识到如果完全改变以前的布局模式，布局就可以大大被简化：
每个UI组件都将指定自己简单的布局模型，而不是拥有可以应用于任何UI组件的一整套布局规则 。
因为每个UI组件都有一个更小的一套布局需要考虑，所以布局可以大量优化 。
为了进一步简化布局，我们几乎将所有内容都转换为UI组件 。
这里是用Flutter代码来创建的一个带有布局的简单UI组件 。
new Center ( child: new Column( children:[ new Text ('Hello, World!')), new Icon (Icons.star, color: Colors.green) ] )这段代码在语义上足够清晰 。你可以轻松地想象它将会生成什么 。运行这段代码的显示结果如下：
Hello, World!在这段代码中，所有的组成部分都是一个UI组件，包括布局 。Center UI组件将其子组件集中在其母组件内（如屏幕） 。ColumnUI组件垂直排列其子组件（UI组件列表） 。该列表包含一个Text和一个Icon控件（具有一个颜色属性） 。
在Flutter中，居中显示和padding都是widgets，主题是适用于它们子组件的UI控件，甚至应用程序和导航也是widgets 。
Flutter包括很多用于布局的widgets，不仅仅含有列，还包括行、网格、列表等 。此外，Flutter还有一个独特的布局模型，我们称之为用于滚动的“长条布局模型 (sliver layout model)” 。Flutter中的布局非常快，可用于滚动 。试想一下，滚动必须如此快速平滑，以至于让用户感觉当他们在物理屏幕上拖动时，屏幕图像就像和他们的手指相连一样 。
通过使用布局进行滚动，Flutter可以实现高级滚动，如下所示 。请注意，这些是GIF动画，真正的Flutter应用程序更加平滑 。

移动端的未来为什么是Flutter？

文章插图
 

移动端的未来为什么是Flutter？

文章插图
 
在大多数情况下，Flutter仅需一次传递即可完成布局，这意味着布局所花的时间是线性增长的，所以它可以处理大量的widgets 。Flutter也可以利用缓存或其他功能来避免重复的布局 。
定制设计
因为UI组件现在是应用程序的一部分，你可以添加新的UI组件，并且可以自定义现有的UI组件，以使其具有不同的外观或感觉，或匹配公司的品牌，移动设计的趋势正在与几年前普遍使用的千篇一律的应用程序背离，开始走向让用户愉悦的定制设计 。


推荐阅读


上一篇：Redis 的主从搭建架构

下一篇：最实用的20个 Python系统运维常用库，学Python要认真