美文网首页
Flutter初识

Flutter初识

作者: Jisen | 来源:发表于2021-12-31 15:28 被阅读0次

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:时间线demo
  • flukit:futter中文社区出品的flutter UIKit
  • flutter-ui-nice:UI实践
  • flutter_easyrefresh:EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作,它支持几乎所有的Flutter控件。
  • fl_chart:强大的图表库
  • flutter_vignettes
  • flutter_spinkit:加载指示器

Getx

文章:

电子书:

知识库:

参考资讯:

相关文章

  • 初识flutter

    初识flutter 初识flutter

  • Flutter学习笔记 (一)

    (一)初识Flutter 1.Flutter是什么 Flutter is Google's UI toolkit ...

  • Flutter完全进阶手册

    Flutter  一、你好,Flutter    原生开发与跨平台技术    初识Flutter    Flut...

  • Flutter学习笔记(一)

    先附上学习和参考的网站Flutter中文网Flutter实战 初识Flutter 简介 Flutter是Googl...

  • 一、Flutter原理篇

    第一章: 初识Flutter 1.1 Flutter简介 Flutter 是 Google 推出并开源的移动应用开...

  • [Flutter]初识flutter

    最近公司内部掀起了一阵Flutter的热潮,我也追赶一下热潮,来玩一玩这个小东西. 语言基础 Dart传送门 开发...

  • Flutter初识

    一、Flutter是什么? 根据Flutter中文官网(英文官网)的解释:Flutter是谷歌的移动UI框架,可以...

  • 初识Flutter

    最近关注的很多公众号都推了关于Flutter的文章,还有就是Airbnb放弃React Native的新闻。Goo...

  • 初识Flutter

    话不多说,Flutter中文开发网站:https://flutterchina.club/setup-macos/...

  • 初识Flutter

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可...

网友评论

      本文标题:Flutter初识

      本文链接:https://www.haomeiwen.com/subject/tbggqrtx.html