ainatipen 发表于 2022-1-1 17:52

Flutter初识

Flutter简介


Flutter 由 Google 的工程师团队打造,用于创建高性能、跨平台的移动应用。Flutter 针对当下以及未来的移动设备进行优化,专注于 Android and iOS 低延迟的输入和高帧率。

Flutter 可以给开发者提供简单、高效的方式来构建和部署跨平台、高性能移动应用;给用户提供漂亮、快速、jitter-free 的 app 体验。

官网:https://flutter.dev

Flutter中文网:https://flutterchina.club
跨平台自绘引擎


Flutter使用自己的高性能渲染引擎来绘制widget。这样不仅可以保证在Android和iOS上UI的一致性,而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。

Flutter使用Skia作为其2D渲染引擎,Skia是Google的一个2D图形处理函数库,包含字型、坐标转换,以及点阵图都有高效能且简洁的表现,Skia是跨平台的,并提供了非常友好的API,目前Google Chrome浏览器和Android均采用Skia作为其绘图引擎。

Flutter 2.0 现已支持iOS、Android、Fuchsia(Google新的自研操作系统)、Web(Flutter for web)和PC开发。
Flutter框架结构


Flutter官方提供的Flutter框架图:

1-1.41c572c4.png

Flutter Framework


这是一个纯 Dart实现的 SDK,它实现了一套基础库,自底向上,我们来简单介绍一下:

底下两层(Foundation和Animation、Painting、Gestures)在Google的一些视频中被合并为一个dart UI层,对应的是Flutter中的dart:ui包,它是Flutter引擎暴露的底层UI库,提供动画、手势及绘制能力。

Rendering层,这一层是一个抽象的布局层,它依赖于dart UI层,Rendering层会构建一个UI树,当UI树有变化时,会计算出有变化的部分,然后更新UI树,最终将UI树绘制到屏幕上,这个过程类似于React中的虚拟DOM。Rendering层可以说是Flutter UI框架最核心的部分,它除了确定每个UI元素的位置、大小之外还要进行坐标变换、绘制(调用底层dart:ui)。

Widgets层是Flutter提供的的一套基础组件库,在基础组件库之上,Flutter还提供了 Material 和Cupertino两种视觉风格的组件库。而我们Flutter开发的大多数场景,只是和这两层打交道。
Flutter Engine


这是一个纯 C++实现的 SDK,其中包括了 Skia引擎、Dart运行时、文字排版引擎等。在代码调用 dart:ui库时,调用最终会走到Engine层,然后实现真正的绘制逻辑。
开源资源:

flutter:官方开源框架awesome-flutter:关于Flutter库、工具、教程、文章等一系列很棒的资源列表。也可以访问https://flutterawesome.com,查找需要的组件。Gallery:官方的demo应用flutter-go:阿里巴巴开源的,flutter 开发者帮助 APP,包含 flutter 常用 140+ 组件的demo 演示与中文文档DoraemonKit:简称 "DoKit" 。一款功能齐全的客户端( iOS 、Android、微信小程序、Flutter )研发助手,你值得拥有。https://www.dokit.cn/FlutterExampleApps:一些基础入口的Flutter例子flutter/plugins:官方提供的一些插件MMKV:MMKV 是基于 mmap 内存映射的 key-value 组件,底层序列化/反序列化使用 protobuf 实现,性能高,稳定性强。从 2015 年中至今在微信上使用,其性能和稳定性经过了时间的验证。(现已支持Flutter)gsy_github_app_flutter:Flutter 超完整的开源项目,功能丰富,适合学习和日常使用dio:dio是一个强大的Dart Http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等...flutter_wanandroid:基于Google Flutter的WanAndroid客户端,支持Android和iOS。包括BLoC、RxDart 、国际化、主题色、启动页、引导页,拥有较好的项目结构&比较规范的代码!flutter_deer:Flutter 练习项目(包括集成测试、可访问性测试)。内含完整UI设计图,更贴近真实项目的练习。Best-Flutter-UI-Templates:最佳UI模板实践HistoryOfEverything:时间线demoflukit:futter中文社区出品的flutter UIKitflutter-ui-nice:UI实践flutter_easyrefresh:EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作,它支持几乎所有的Flutter控件。fl_chart:强大的图表库flutter_vignettesflutter_spinkit:加载指示器
Getx


getx:GetX 是 Flutter 上的一个轻量且强大的解决方案:高性能的状态管理、智能的依赖注入和便捷的路由管理。

Flutter GetX使用---简洁的魅力!

GetX项目级实战

Flutter GetX 快递App(Bilibili视频)

使用Getx进行状态管理

使用Getx的依赖注入binding

Flutter状态管理终极方案GetX第一篇——路由
文章:

Q音直播Flutter包裁剪方案(iOS)MOO 音乐中的Flutter 模糊方案分析UME - 丰富的Flutter调试工具2020年20个Flutter最漂亮的UI库和项目Flutter在美团外卖的实践亮相Google I/O,字节跳动是这样应用Flutter的【译】 Flutter 延迟加载组件 【包体积优化 | 动态化】带你全面了解 Flutter,它好在哪里?它的坑在哪里? 应该怎么学?ListView流畅度翻倍!!Flutter卡顿分析和通用优化方案Flutter瀑布流及通用列表解决方案Flutter 实现类似美团外卖店铺页面滑动效果Flutter 流畅度优化组件 KeframeFlutter - 循序渐进 Sliver
电子书:

Flutter技术解析与实战.pdf《Flutter实战》
知识库:

闲鱼技术/FlutterFlutter学习指南Flutter老孟/控件大全
参考资讯:

字节跳动为何选用Flutter?并非最优选,但它可能是不一样的未来!Flutter2新特性Flutter2.0重磅发布!带你一文打尽Flutter Engage
页: [1]
查看完整版本: Flutter初识