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

一篇带你了解跨平台的 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   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
五大跨平台桌面应用开发框架:Electron、Tauri、Flutter等
一、什么是跨平台桌面应用开发框架跨平台桌面应用开发框架是一种工具或框架,它允许开发者使用一种统一的代码库或语言来创建能够在多个操作系统上运行的桌面应用程序。传统上...【详细内容】
2024-02-26  Search: Flutter  点击:(47)  评论:(0)  加入收藏
Flutter 中 onTap 事件的 5 条规则让你脱颖而出
小事情决定了你的熟练程度,这些小细节的有趣之处在于它们的丰富性。您将在代码库中的数百个位置遇到 onTap 事件。增强它们可以对代码的可维护性和最终用户体验产生重大的...【详细内容】
2023-11-04  Search: Flutter  点击:(182)  评论:(0)  加入收藏
Flutter 地图在携程的最佳实践
作者简介Leo,携程高级移动开发工程师,关注跨端技术,致力于高效、高性能开发。Jarmon,携程高级移动开发工程师,专注 Flutter、iOS 开发。本文将重点突出基于 flutter-boost 的混...【详细内容】
2023-07-07  Search: Flutter  点击:(251)  评论:(0)  加入收藏
一篇带你了解跨平台的 UI 工具包—Flutter
Flutter是Google开发的一套全新的跨平台、开源UI框架,支持iOS、Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个版本以来,目前Flutter已...【详细内容】
2023-03-29  Search: Flutter  点击:(178)  评论:(0)  加入收藏
快速掌握 Flutter 图片开发核心技能
大家好,我是 17。在 Flutter 中使用图片是最基础能力之一。17 做了精心准备,满满的都是干货!本文介绍如何在 Flutter 中使用图片,尽量详细,示例完整,包会!使用网络图片使用网络图片...【详细内容】
2023-03-06  Search: Flutter  点击:(262)  评论:(0)  加入收藏
混合开发架构|Android工程集成React Native、Flutter、ReactJs
架构设计说明该篇文章,介绍并记录在大前端混合架构开发中的重要细节和流程。通过在安卓原生工程中集成两大主流混合框架React Native、Flutter,以及ReactJs[Vue],集成三类模块m...【详细内容】
2023-03-06  Search: Flutter  点击:(212)  评论:(0)  加入收藏
跨平台开发,Flutter还是React Native?
作者 | 胥磊审校 | 孙淑娟随着移动应用的不断普及,各个公司都在寻找可以在多种设备上运行的跨平台应用解决方案,这里跨平台主要是指安卓和iOS。统计数据显示:截止2021年6月,安卓...【详细内容】
2023-02-09  Search: Flutter  点击:(152)  评论:(0)  加入收藏
基于 Flutter 构建的高性能 Web 渲染引擎 Kraken
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个阿里开源基于 Flutter 进行渲染的高性能引擎&mda...【详细内容】
2022-11-03  Search: Flutter  点击:(371)  评论:(0)  加入收藏
Flutter 焦点管理 FocusScope 组件
前言更改用户交互中的文本字段颜色。预览 当选择一个文本字段并接受输入时,它被称为具有“焦点”通常,用户通过点击将焦点转移到文本字段,开发人员通过使用本菜谱中描述的工具...【详细内容】
2022-11-02  Search: Flutter  点击:(422)  评论:(0)  加入收藏
Flutter 系列 - 环境搭建
Flutter 作为火热的跨端工具包,在 github 上超过 120k 的关注量,可见一斑。基于目前本人正在学习 Flutter 的路上,会将整个学习的过程记录下来。本博文主要讲解环境的搭建,先把...【详细内容】
2022-10-18  Search: Flutter  点击:(239)  评论:(0)  加入收藏
▌简易百科推荐
系统优化工具,Ultimate Windows Tweaker软件体验
电脑上的Windows优化工具年年都有,每年还会翻着花样地出现新东西,都不带重复的。每个人都可以上来折腾一番Windows...从这个角度来说,Windows系统还挺“稳定”的,经得起各种用户...【详细内容】
2024-04-10  果核剥壳    Tags:系统优化   点击:(2)  评论:(0)  加入收藏
Telegram怎么不显示在线?
在Telegram中,您可以通过进入“设置” -> “隐私与安全” -> “最后在线时间”,然后选择“没有人”或者自定义特定的人群,以隐藏自己的在线状态。这样设置后,其他用户将无法看到...【详细内容】
2024-04-04  HouseRelax    Tags:Telegram   点击:(3)  评论:(0)  加入收藏
谷歌 Gmail 新规生效:为遏制钓鱼 / 欺诈情况,日群发超 5000 封邮件账号需验证
IT之家 4 月 2 日消息,谷歌为了增强对垃圾邮件和网络钓鱼攻击的管控,今天宣布正式启用新措施:对于向 Gmail 邮箱账号日群发数量超过 5000 封的用户,需要其在域名中设置 SPF / DK...【详细内容】
2024-04-02    IT之家  Tags:Gmail   点击:(12)  评论:(0)  加入收藏
钉钉AI升级多模态:能根据图片识人、翻译、创作、多轮问答
新浪科技讯 3月28日午间消息,钉钉AI助理迎来升级,上线图片理解、文档速读、工作流等产品能力,探索多模态、长文本与RPA技术在AI应用的落地。基于阿里通义千问大模型,升级后的钉...【详细内容】
2024-03-28    新浪科技  Tags:钉钉   点击:(13)  评论:(0)  加入收藏
都2024年了,谁还在用QQ聊天啊?
你还在用 QQ 吗?之所以突然这么问,是因为前些天腾讯发了份热气腾腾的财报。随手翻了翻,发现 QQ 这个老企鹅,居然还有5.54 亿多人每个月都在坚持登录。虽说和辉煌时候没法比了,但...【详细内容】
2024-03-26    差评  Tags:QQ   点击:(9)  评论:(0)  加入收藏
腾讯QQ浏览器工具权益卡上线PC端,每月最低6元
IT之家 1 月 29 日消息,腾讯 QQ 浏览器此前在手机端上线工具权益卡,现将部分权益适用范围拓展至 PC 端,每月 10 元,连续包月为 6 元。开通后用户可以在 QQ 浏览器软件内享有由腾...【详细内容】
2024-01-29    IT之家  Tags:QQ浏览器   点击:(76)  评论:(0)  加入收藏
开源工具Ventoy更新:新增对FreeBSD 14.0的支持
近日,开源装机工具Ventoy发布了1.0.97版本的更新。本次更新的主要亮点是新增了对FreeBSD 14.0版本的支持,并修复了启动问题以及解决了几个Linux独有的bug等。同时,官方还修复了...【详细内容】
2024-01-25    中关村在线  Tags:Ventoy   点击:(38)  评论:(0)  加入收藏
微软Copilot Pro来了:个人用户也能在Word里用GPT-4,20美元/月
面向个人用户的微软Copilot会员版来了。一个月多交20刀(约合人民币142元),Microsoft 365个人版/家庭版用户就能在Word、Excel、PPT等Office全家桶中用上GPT-4。就像这样,不用在C...【详细内容】
2024-01-16    量子位  Tags:Copilot Pro   点击:(90)  评论:(0)  加入收藏
微软 Edge 浏览器支持双引擎同时搜索功能,便利与槽点并存
IT之家 1 月 15 日消息,微软广告和网络服务部门首席执行官 Mikhail Parakhin 近日透露了一个微软 Edge 浏览器的隐藏功能:双引擎同时搜索。顾名思义,该功能允许用户同时使用两...【详细内容】
2024-01-16    IT之家  Tags:Edge   点击:(61)  评论:(0)  加入收藏
11个面向设计师的必备AI工具
译者 | 布加迪审校 | 重楼在当今快速发展的设计领域,人工智能(AI)工具已成为不可或缺的创新催化剂。这些工具专门用于提高效率和创造力,从而重新定义传统的设计方法。AI正在彻底...【详细内容】
2024-01-09    51CTO  Tags:AI工具   点击:(95)  评论:(0)  加入收藏
站内最新
站内热门
站内头条