您当前的位置:首页 > 电脑百科 > 软件技术 > 应用软件

一篇带你了解跨平台的 UI 工具包—Flutter

时间:2023-03-29 12:08:42  来源:今日头条  作者:IT编程学习栈

Flutter是google开发的一套全新的跨平台、开源UI框架,支持IOSAndroid系统开发,并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个版本以来,目前Flutter已经发布了近60个版本,并且在2018年5月发布了第一个“Ready for Production Apps”的Beta 3版本,6月20日发布了第一个“Release Preview”版本。

Flutter 是一个跨平台的 UI 工具包,旨在允许代码在 iOS 和 Android 等操作系统之间重用,同时还允许应用程序直接与底层平台服务交互。目标是使开发人员能够交付在不同平台上感觉自然的高性能应用程序,在共享尽可能多的代码的同时拥抱存在的差异。

在开发过程中,Flutter 应用程序在 VM 中运行,该 VM 提供有状态的热重新加载更改,而无需完全重新编译。对于发布,Flutter 应用程序直接编译为机器代码,无论是 Intel x64 还是 ARM 指令,或者如果目标是 web,则编译为 JAVAScript。该框架是开源的,具有宽松的 BSD 许可证,并且拥有一个蓬勃发展的第三方包生态系统,可以补充核心库功能。

本概述分为多个部分:

  • 层模型:构建 Flutter 的部分。
  • 响应式用户界面:Flutter 用户界面开发的核心概念。
  • 小部件简介:Flutter 用户界面的基本构建块。
  • 渲染过程:Flutter 如何将 UI 代码转换为像素。
  • 平台嵌入器概述:让移动和桌面操作系统执行 Flutter 应用程序的代码。
  • 将 Flutter 与其他代码集成:有关 Flutter 应用可用的不同技术的信息。
  • Support for the web:结语 Flutter 在浏览器环境下的特性。

在Flutter诞生之前,已经有许多跨平台UI框架的方案,比如基于WebView的Cordova、AppCan等,还有使用html+JavaScript渲染成原生控件的React Native、Weex等。

基于WebView的框架优点很明显,它们几乎可以完全继承现代Web开发的所有成果(丰富得多的控件库、满足各种需求的页面框架、完全的动态化、自动化测试工具等等),当然也包括Web开发人员,不需要太多的学习和迁移成本就可以开发一个App。同时WebView框架也有一个致命(在对体验&性能有较高要求的情况下)的缺点,那就是WebView的渲染效率和JavaScript执行性能太差。再加上Android各个系统版本和设备厂商的定制,很难保证所在所有设备上都能提供一致的体验。

为了解决WebView性能差的问题,以React Native为代表的一类框架将最终渲染工作交还给了系统,虽然同样使用类HTML+JS的UI构建逻辑,但是最终会生成对应的自定义原生控件,以充分利用原生控件相对于WebView的较高的绘制效率。与此同时这种策略也将框架本身和App开发者绑在了系统的控件系统上,不仅框架本身需要处理大量平台相关的逻辑,随着系统版本变化和API的变化,开发者可能也需要处理不同平台的差异,甚至有些特性只能在部分平台上实现,这样框架的跨平台特性就会大打折扣。

Flutter则开辟了一种全新的思路,从头到尾重写一套跨平台的UI框架,包括UI控件、渲染逻辑甚至开发语言。渲染引擎依靠跨平台的Skia图形库来实现,依赖系统的只有图形绘制相关的接口,可以在最大程度上保证不同平台、不同设备的体验一致性,逻辑处理使用支持AOT的Dart语言,执行效率也比JavaScript高得多。

Flutter同时支持windowslinuxmacOS操作系统作为开发环境,并且在Android Studio和VS Code两个IDE上都提供了全功能的支持。Flutter所使用的Dart语言同时支持AOT和JIT运行方式,JIT模式下还有一个备受欢迎的开发利器“热刷新”(Hot Reload),即在Android Studio中编辑Dart代码后,只需要点击保存或者“Hot Reload”按钮,就可以立即更新到正在运行的设备上,不需要重新编译App,甚至不需要重启App,立即就可以看到更新后的样式。

在Flutter中,所有功能都可以通过组合多个Widget来实现,包括对齐方式、按行排列、按列排列、网格排列甚至事件处理等等。Flutter控件主要分为两大类,StatelessWidget和StatefulWidget,StatelessWidget用来展示静态的文本或者图片,如果控件需要根据外部数据或者用户操作来改变的话,就需要使用StatefulWidget。State的概念也是来源于Facebook的流行Web框架React,React风格的框架中使用控件树和各自的状态来构建界面,当某个控件的状态发生变化时由框架负责对比前后状态差异并且采取最小代价来更新渲染结果。



Tags:Flutter   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
Flutter是Google开发的一套全新的跨平台、开源UI框架,支持iOS、Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个版本以来,目前Flutter已...【详细内容】
2023-03-29  Tags: Flutter  点击:(0)  评论:(0)  加入收藏
大家好,我是 17。在 Flutter 中使用图片是最基础能力之一。17 做了精心准备,满满的都是干货!本文介绍如何在 Flutter 中使用图片,尽量详细,示例完整,包会!使用网络图片使用网络图片...【详细内容】
2023-03-06  Tags: Flutter  点击:(29)  评论:(0)  加入收藏
架构设计说明该篇文章,介绍并记录在大前端混合架构开发中的重要细节和流程。通过在安卓原生工程中集成两大主流混合框架React Native、Flutter,以及ReactJs[Vue],集成三类模块m...【详细内容】
2023-03-06  Tags: Flutter  点击:(14)  评论:(0)  加入收藏
作者 | 胥磊审校 | 孙淑娟随着移动应用的不断普及,各个公司都在寻找可以在多种设备上运行的跨平台应用解决方案,这里跨平台主要是指安卓和iOS。统计数据显示:截止2021年6月,安卓...【详细内容】
2023-02-09  Tags: Flutter  点击:(31)  评论:(0)  加入收藏
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个阿里开源基于 Flutter 进行渲染的高性能引擎&mda...【详细内容】
2022-11-03  Tags: Flutter  点击:(122)  评论:(0)  加入收藏
前言更改用户交互中的文本字段颜色。预览 当选择一个文本字段并接受输入时,它被称为具有“焦点”通常,用户通过点击将焦点转移到文本字段,开发人员通过使用本菜谱中描述的工具...【详细内容】
2022-11-02  Tags: Flutter  点击:(106)  评论:(0)  加入收藏
Flutter 作为火热的跨端工具包,在 github 上超过 120k 的关注量,可见一斑。基于目前本人正在学习 Flutter 的路上,会将整个学习的过程记录下来。本博文主要讲解环境的搭建,先把...【详细内容】
2022-10-18  Tags: Flutter  点击:(88)  评论:(0)  加入收藏
昨天刚发了一篇Python桌面开发库大全的微头条,就被同事安利了Flet这个库。这是一个非常新的库,今年6月份才发布的第一个版本,虽然很新,但是它背靠巨人-Flutter,可以让我们使用Pyt...【详细内容】
2022-09-02  Tags: Flutter  点击:(289)  评论:(0)  加入收藏
众所周知,Flutter 是一个非常优秀的开发框架,开发者可以借助它在 iOS 以及 Android 构建交互丰富的、精美的应用程序。在2022年谷歌开发大会上,作为I/O主题演讲的一部分,主创团...【详细内容】
2022-07-07  Tags: Flutter  点击:(185)  评论:(0)  加入收藏
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个简单又灵活的 flutter canvas 图形动画库Zerker...【详细内容】
2022-02-11  Tags: Flutter  点击:(906)  评论:(0)  加入收藏
▌简易百科推荐
Flutter是Google开发的一套全新的跨平台、开源UI框架,支持iOS、Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个版本以来,目前Flutter已...【详细内容】
2023-03-29  IT编程学习栈  今日头条  Tags:Flutter   点击:(0)  评论:(0)  加入收藏
ERP 是什么ERP是企业资源规划(Enterprise Resource Planning)的缩写,是一种集成化的企业管理软件系统。它可以帮助企业将各个业务部门的信息、流程和数据集成到一个统一的平台...【详细内容】
2023-03-21   职场叨叨  网易号  Tags:ERP   点击:(38)  评论:(0)  加入收藏
什么是erpERP 是企业资源规划 (Enterprise Resource Planning) 的缩写。它是一种用于组织内部数据管理和业务流程协调的软件系统。ERP 系统提供了一个统一的数据库,使得组...【详细内容】
2023-03-21  职场叨叨   网易号  Tags:ERP   点击:(10)  评论:(0)  加入收藏
一、含义不同MES系统的全称是manufacturing execution system,是一套面向制造企业车间执行层的生产信息化管理系统。其主要是可以为企业提供包括制造数据管理、计划排程管理...【详细内容】
2023-03-20  职场报料汇     Tags:MES   点击:(12)  评论:(0)  加入收藏
网络电话APP拨打电话,不但省钱,还可以满足我们对打电话的一些特殊需求,相比传统电话,网络电话可以智能显号呼叫,这样可以解决个人隐私安全问题,还可以防止电话被标记封号问题;还有...【详细内容】
2023-03-16  Vicky敏生活秀  今日头条  Tags:网络电话   点击:(20)  评论:(0)  加入收藏
网络中的录屏软件各式各样,给人看起来眼花缭乱的感觉。但是其中绝大部分的录屏软件都是不能免费使用,限制录制时长的。今天小编就向小伙伴分享2款免费软件无时间限制,全程干货,...【详细内容】
2023-02-03  数据蛙恢复专家   网易号  Tags:软件   点击:(33)  评论:(0)  加入收藏
在现在这个科技迅速发展的时代,各种3D模型已经在我们的学习和生活中随处可见。立体的三维模型能让我们对展示的对象有着更直观的认知。那么,那些炫酷的3D模型究竟是怎么做出来...【详细内容】
2023-02-02  渲大师    Tags:软件   点击:(29)  评论:(0)  加入收藏
译者| 朱先忠 审校 | 孙淑娟YOLOv8是什么?YOLOv8是Ultralytics公司推出的基于对象检测模型的YOLO最新系列,它能够提供截至目前最先进的对象检测性能。 借助于以前的YOLO模型版...【详细内容】
2023-02-02  朱先忠  51CTO  Tags:YOLOv   点击:(463)  评论:(0)  加入收藏
在高德地图、百度地图、腾讯地图等国内主流地图应用软件流行之前,Google的地图平台在国内市场的份额以及知名度是非常高的,尤其是Google Earth(谷歌地球)更是神一般的存在。后来...【详细内容】
2023-02-01  小雨谈科技  今日头条  Tags:谷歌地球   点击:(550)  评论:(0)  加入收藏
阿铭linux近16年的IT从业经验,6年+鹅厂运维经验,6年+创业公司经验,熟悉大厂运维体系,有从零搭建运维体系的实战经验。关注我,学习主流运维技能,让你比别人提升更快,涨薪更多!作为...【详细内容】
2023-01-16  蒲公英互联     Tags:rsync   点击:(85)  评论:(0)  加入收藏
站内最新
站内热门
站内头条