BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

谷歌的跨平台移动UI框架Flutter开始Beta测试

| 作者 Sergio De Simone 关注 17 他的粉丝 ,译者 谢丽 关注 11 他的粉丝 发布于 2018年3月13日. 估计阅读时间: 4 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

看新闻很累?看技术新闻更累?试试下载InfoQ手机客户端,每天上下班路上听新闻,有趣还有料!

Flutter现在开始Beta测试。谷歌创建这个框架是希望为iOS和Anroid应用提供跨平台的界面,虽然不是标准的,但看上像原生的。

React Native类似,Flutter支持反应式风格的UI定义方法。它与其他跨平台Web视图框架的区别是,它基于Dart,这样就不需要JavaScript来连接UI和OS平台提供的原生服务,如位置服务、传感器访问、相机等等。借助提前编译成原生代码的Dart,Flutter节省了使用JavaScript桥接时的上下文切换开销。

旨在提供原生UI外观的跨平台框架使用原生实现的小部件来描绘按钮、表格等。通常,这还需要App的不同部分使用JavaScript桥接来通信,导致速度变慢。为了避免这个问题,Flutter提供了自己的小部件集合,直接在OS平台提供的画布上描绘这类控件。这种方法的另外一个好处和Dart的UI布局机制有关。Android LayoutsiOS Constraints都旨在提供抽象概念描述在屏幕上布局UI元素的任何可能的方法,和这些CSS盒子模型不同,每个Flutter小部件都有自己的简单布局模型。具体来讲,如果要让一个小部件居中,则可以把它放到一个Center小部件里。类似地,如果要在其四周留有边距,则可以把它放在一个Padding小部件里。下面是一个简单的例子,一个Center小部件中包含一个文本和一个图标,两者垂直排列:

new Center(
  child: new Column(
    children: [
      new Text('Hello, World!')),
      new Icon(Icons.star, color: Colors.green)
    ]
  )
)

在Flutter中,所有的主题和导航都表示为小部件,因此,你可以改变UI的外观或者使用不同的父部件浏览不同视图的方式。

从Flutter进入Alpha阶段开始,谷歌就一直致力于更好的工具集成、Android Studio和Visual Studio Code支持、更好的平台互操作性、更好的热重载以及一个针对部件树的部件查看器

由于Flutter使用了Dart,所以可以促进其应用的一个关键因素是,可用的第三方程序包让开发人员可以重用代码,而不必什么东西都从头开始编码。这包括类似发送网络请求、导航处理这样的东西,以及使用Firebase、SQLite、Facebook Connect等外部SDK。感兴趣的读者可以查看Flutter上可用的程序包目录,其中包括1000多个程序包,看看其中是否包含自己需要的一切。

谷歌表示,在向1.0迈进的过程中,他们的重点是稳定性和支持更多的场景,例如,让Flutter更容易嵌入到已有的App中使用内联WebViews,等等。

如果想试用Flutter beta,只要按照安装说明来操作即可。此外,务必看一眼Flutter GalleryPosse Gallery这些有用的链接

查看英文原文Google’s Cross-Platform Mobile UI Framework Flutter Now in Beta

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT