①flutter简介和环境构建①

一、 flutter简介

1. flutter是什么?

  flutter是一款接近原生安卓的移动应用程序开发框架,采用dart语言(强类型)开发,提高了丰富的UI和组件库,支持响应式编程、热加载程序(无需重启就能加载)。底层dart语言和java语言类似,具备面向对象编程开发的特性。flutter可以包含不同平台之间的差异,共同复用同一套代码,交付出具有原生体验的高性能不同平台应用

2. 为什么要学习flutter?

  使用基于webview的移动开发框架(如uniapp等),包含动画或者折叠面板打开时,渲染的时候会卡顿,对于原生体验感不好,对一些需求也不易拓展,灵活性差。flutter是基于Skia图形引擎,通过将Widget树转化为RenderObject树进行绘制。并且能支持与原生进行管道通信,实现一些特定设备所需的要求,这点是基于webView实现不了的。

3. flutter相比其他移动库UI有什么优势和难点?

优点: 快速开发、高性能、灵活性 、可拓展性、响应式编程、跨平台支持、支持热加载。

缺点: 学习成本高、构建大型应用程序开发复杂

4.flutter架构讲解

flutter架构图
  flutter总体分为三部分: 1、框架层 2、引擎层 3、内嵌层;框架层提供丰富UI和组件库用于开发flutter应用,引擎层是flutter的核心,主要用C++语言编写,提供flutter底层API接口,对于需要合成的场景负责进行栅格化。内嵌层是大多数平台都有的,负责提供一个函数的入口。

  框架最底层的Foundation提供基础服务,Animation、Painting、Getstures提供一些互动服务,是对底层进行的抽象,提供给上层使用。Rendering为渲染层,负责提供操作布局的抽象,当某些对象动态变更后,渲染树会根据变更情况来更新布局。Widget层是组合的抽象(页面+组件),每一个渲染层的渲染对象,会对应Widget层中的一个类(响应式编程模型就在该层级中被引入)。 Material和Cupertino库是提供的界面风格组件,分别对应安卓和苹果平台。

5. flutter渲染原理

  说到渲染的话,就必须清楚渲染时的数据结构是啥样的,如下所示:
在这里插入图片描述
  分别是组件树、元素树、渲染树。在flutter中,Material的一个组件就是一个Widget,一个界面中会有多个组件,对应多个Widget,构建成Widget树,而每一个widget会调用createElement()方法来创建一个element对象,从而构建出Elemnt树,而每个element节点又可以通过createRenderObject来创建渲染对象,多个渲染对象构建出渲染树的过程。Element的作用是连接组件和渲染对象,确保组件渲染的布局位置。

  element的出现,是为了进行复用和保持平衡的作用,减少频繁的创建和销毁渲染对象,以免降低性能。当widget树改变时,flutter会通过element树进行进行比较。如果某一个位置的widget不一样了,此时就会重新创建element。如果某个位置的widget和之前的widget一样时(两个widget相等或runtimeType与key相等),此时只需根据widget的数据内容进行修改渲染树的配置,不需要在进行创建和销毁,节省了开销。

  Widget是轻量级的,实例化消耗的性能很少;而RenderObject是重量级的,会改动布局,消耗比较大,尽量进行复用

遵循原则:

  1. 判断新的widget是否和老的widget是否同一组件类型
  2. 如果不是同一个类型,那就把Widget、Element、RenderObject分别从它们的树(包括它们的子树)上移除,然后创建新的对象
  3. 如果是一个类型,那就仅仅修改RenderObject中的配置,然后继续向下遍历

二、 flutter环境安装

  直接参考官网即可,官网安装配置环境变量很全:flutter中文网安装

  • 9
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值