Flutter on cubegao

Flutter中的三棵树是如何完成绘制的

Wed, 29 Sep 2021 21:44:00 +0800

定义

Widget:存放渲染内容、它只是一个配置数据结构，创建是非常轻量的，在页面刷新的过程中随时会重建。

其中Widget根据功能可以分为三类：

组合类StatelessWidget/StatefulWidget：比如我们常见的Container就是一个组合类的控件，它主要负责组合封装多个其他负责绘制的原子组件。

代理类inheritedwidget:它的父类是ProxyWidget，顾名思义。简单来说，InheritedWidget 的作用是向它的子 Widget 有效地传播和分享数据，当 InheritedWidget 作为一个Parent Widget时，它下面的Widget tree的所有Widget都可以去和 InheritedWidget 发生数据传递和交互。当数据发生改变时，一部分控件需要 rebuild，另外的控件不需要 rebuild 的时候，可以使用 InheritedWidget。

绘制类RenderObjectWidget：RenderObjectWidget会负责创建出负责实际渲染的RenderObject对象，RenderObject负责实际的layout()和paint()。后期有空，我会手动写一个RenderObject。

Element：是分离 WidgetTree 和真正的渲染对象的中间层，可以看成flutter的骨架。 Widget 用来描述对应的Element 属性，同时持有Widget和RenderObject，存放上下文信息，通过它来遍历视图树，支撑UI结构。

其中Element可以根据功能分成两大类：

组合类ComponentElement:主要包括如下 StatelessElement / StatefulElement / ProxyElement 子类；其中各Element都是与 Widget 对应的。

绘制类RenderObjectElement：RenderObjectElement对应的是RenderObjectWidget。

RenderObject用于应用界面的布局和绘制，负责真正的渲染，保存了元素的大小，布局等信息。

当应用启动时 Flutter 会遍历并创建所有的 Widget 形成 Widget树，通过调用 Widget 上的 createElement() 方法创建每个 Element 对象，形成 Element 树。最后调用 Element 的 createRenderObject() 方法创建每个渲染对象，形成一个 RenderObject 树。

如何通过Widget更新Element：

Element/ComponentElement：单个Element时候通过updateChild方法更新；

大致归纳一下，如下表：

如何在ListView中优雅的嵌套ListView

Tue, 06 Jul 2021 22:20:00 +0800

前言

日常的开发工作中，经常会遇到列表中嵌套ListView的需求。具体情况也分为两种。

1.竖向ListView嵌套横向ListView

常见的需求：竖向ListView行数不限制，横向ListView的列数不限制。具体情况如下图。

代码如下：

Stack存在无Positioned包裹的子组件，决定Stack尺寸的是无位置的组件中的最大的尺寸，Positioned不会影响Stack的尺寸。（当然如果子类全部是Positioned包裹的子组件，Stack会将自身尺寸设置为父级布局约束所允许的最大尺寸，为对齐子组件创造条件。）。此处用Positioned.fill,让ListView尽量占满整个Stack。接下来设置宽度，利用SizedBox的向下传递约束，向上传递尺寸的特性。用SizedBox(width: double.infinity)把宽度撑开到整个屏幕的宽度。接下来算出Item的高度，用Item的高度撑开Stack的高度。此处用Item的初衷只是为了定制高度，不能让Item显示在屏幕上，所以用Opacity隐藏Item，为了忽略掉事件响应，最后用上IgnorePointer。

如何解决Flutter中的依赖冲突

Thu, 22 Apr 2021 09:08:00 +0800

前言

今天更新第三方依赖库，执行flutter pub get后，报错了

Because project depends on path_provider 1.6.8 which doesn’t match any versions, version solving failed. pub get failed (1; Because project depends on path_provider 1.6.8 which doesn’t match any versions, version solving failed.) Process finished with exit code 1

分析为什么会出现冲突

查看文件pubspec.yaml是这个样子的

我们在开发Flutter项目中，经常会依赖第三方库。如果两个第三方库，同时依赖了某个库。比如库A要求path_provider最低版本为1.5.0，库B要求path_provider最低版本为1.6.8，当path_provider的版本更新为1.6.8时，虽然符合库B的要求，但是不符合库A的要求，这个时候就冲突报错了。

Flutter中的BuildContext到底是什么

Thu, 11 Mar 2021 16:55:00 +0800

前言

首先我们看看官方的定义：

[BuildContext] objects are actually [Element] objects. The [BuildContext] interface is used to discourage direct manipulation of [Element] objects. [BuildContext] 对象实际上是 [Element] 对象。 [BuildContext] 接口用于阻止直接操作 [Element] 对象。

根据官方这段注释，可以了解到BuildContext 实际上就是 Element 对象，产生的意义主要是为了防止开发者直接操作 Element 对象。

如何使用BuildContext

写一段大家很熟悉的代码

这里有同学好奇，_counter++;不写在setState的回调方法里可以生效吗？答案是可以的。但是我更推荐把和状态更新相关的操作，放在回调里面。这样更加的工程化管理。因为一个项目经过长时期的更新，你可能无法分清，这个方法里面的setState,是不是实际上起作用了，会造成代码冗余。

Flutter 嵌套过深的解决方案

Fri, 03 Jan 2020 18:33:00 +0800

写代码容易，读代码难。功能是都实现了，但是对维护人员来说，简直就是灾难。

##背景 Flutter 注重组合而非继承，要想搭建出 UI，需要组合不同功能的 Widget，如布局 Widget、响应 Widget、控件 Widget 等才能搭建出一个功能完善的UI界面，这便导致了嵌套地狱: 在顶级Widget的构造器中内嵌众多 Widget。

像下面这个例子，其实都不是最多层的，只要你卖力，可以超乎想象的)))))))))))))))))).....

在IDE上面看到是这样的。

Flutter 从入门到放弃

Mon, 10 Jun 2019 12:24:00 +0800

##看看历史你想想一套代码，移动端、web端、pc端都搞定！这生产力！非常值得学习了。

2015年5月 Dart 开发者峰会上，亮相了基于Dart 语言的移动应用程序开发框架Sky ，后更名为 Flutter。Dart语言2011年诞生，起初的竞对目标是Js，2016年谷歌的AdWords、AdSense和Fiber项目团队开始把Dart融入他们的前端应用开发。一项当时的内部报告表明，Dart可以帮助他们提升25%到100%的前端开发效率。谷歌内部的Dart代码量比去年增长了3.5倍。

5月7日， Google i/O大会官方宣布，Flutter 1.5 预览版来了，已支持移动、Web、桌面和嵌入式设备，也意味着它正式成为了支持多平台的轻量级 UI 框架，对于开发者而言越来越友好！

##看看架构 Flutter for Mobile

Flutter for web

##动手鼓捣一个最简单的Flutter应用程序，只需一个widget即可!

UIView 相当于 Flutter 中的什么？在 iOS 中，构建 UI 的过程中将大量使用view对象。这些对象都是 UIView 的实例。它们可以用作容器来承载其他的 UIView，最终构成你的界面布局。