Flutter移动开发实践与未来展望

terry 2年前 (2023-09-23) 阅读数 76 #移动小程序

1.移动开发现状

恰逢近期Google IO大会结束。会后，我还通过线上、线下与大家进行了交流。我给大家总结了最重要的问题：

1。谷歌是否再次打着“Kotlin优先”的口号推动Dart+Flutter冲突？

这个问题是最常被问到的问题之一。我先来说说我的观点：个人认为这并不矛盾，因为存在一个的误区，认为跨平台开发可以放弃原有的开发！

做过跨平台开发的同学应该知道，平台提供的功能一直都是有限的，当遇到各种《电外技能树》产品时，很多儒家的要求。有时你必须在框架之外提供支持。最常见的是混合开发或本机插件支持。

所以我在这里表示，目前Kotlin和Dart

‶能够更好地互补。在某种程度上，跨平台框架仍然存在。工作效率问题，比如为了新的需求需要重复开发原生扩展Android/IOS，是Aribnb一度决定放弃React Native的原因之一。

对我来说，网格的意义就是解决逻辑的端到端统一，至少可以避免逻辑的重复实现，或者Android 讨论谁是谁对谁错甚至可以连接到网络等。

`2。 React Native 与 Flutter 的比较`

Flutter 作为后来者，难免会被拿来与React Native。这个世界上的一切都是伟大的——迎头赶上。

它们在设计上有很多相似之处，响应式设计/异步支持/setState更新等，但也有各种不同之处，而大家最关心的是性能，支持，启动便捷性和稳定性

这四个方面：

Flutter 确实在性能上比 React Native 更好，如下图所示，这是由目前的框架决定的React Native同样处于下一代优化阶段，最直观的数据是：Xi201测试的8使用的GSY系列对比数据。

同时注意不要使用模拟器进行性能测试，尤其是IOS模拟器进行性能测试，因为Flutter在IOS模拟器中是纯CPU的，而实际设备是GPU硬件加速的，仅对比发布中的表现。

支持 Flutter 和 React Native，这两者都存在第三方软件包质量参差不齐的问题。目前在这方面Flutter比React Native弱，毕竟React Native已经发展了很长时间了。虽然版本号还不到1.0，但在JS的支持下拥有丰富的生态系统。另外，由于平台的特点，对WebView、地图等控件的支持还不够好。这一点也将在后面讲述。
就易于入门而言，Flutter在设置环境时具有更高的“成功率”，而不是反应本地的bumps就像黑洞一样。 React Native 这是因为它对平台控件的依赖。我至少尝试过接管一个React Native。运行和更新 SDK 版本的痛苦要少得多。
稳定性：Flutter大部分异常不会导致应用程序崩溃，其他在Release、UI等处以红色异常栈的形式出现，Rebug。

如果你是前端开发者，我建议你学习React Native。如果你是原生开发者，我建议你学习Flutter。

从React Native 0.59.x开始，React已经将很多内置的控制器和库移出了主项目，希望能够模糊React和React Native之间的界限，统一开发。这里的概念与 Flutter 非常相似。

Flutter暂时不支持热更新！！！！！！！！？类型和 dynamic 是运行时识别的动态声明，它们的使用有时容易出错。

如下图所示，

var定义为动态类型。
然后，定义时，它被初始化为 String 类型。目前，执行 ++ 函数会显示运行时错误。
如下图2所示，如果指定类型被初始化，则在编译时报告。你错了。

1.2。各种运算符

如下图所示，Dart支持很多有趣的运算符，如下所示：

执行时
如果为空则返回999；
后，如果AA为空，则返回AA并设置❀；
- AA 除 999 并打印结果 10。

1.3。支持运算符重载

如下图所示，Dart支持运算符重载，可以让我们的代码逻辑更加直观，简化代码过程中的调用。

1.4。方法作为参数传递

如下图所示，Dart中的方法可以作为参数传递。这种形式可以让我们更加灵活地组织代码的逻辑。† 活性糖代表 Dart Future 和 Stream 对应异步逻辑的操作飞镖。

同步*/返回对应Stream同步功能。

1.6，Mixins

支持混合模式Dart，如下图。混合时的基本顺序是从右到左进行的，与 super 相关，而 Dart

`Dartin`

关键字定义。

Flutter启动类使用mixins方法

`1.7，隔离`

Dart添加到单线程模式以提供线程之间真正的异步操作，并且因为中的线程飞镖

不共享内存，所以不会死锁，这也导致isolate之间的数据只能发送之间。与Scoket类似，它也提供了计算用于调用封装接口。 
1.8 call
Dart 为了将类作为函数来调用，可以默认实现call()

方法，♶de方法定义呼叫（）也可以。好的。

例如，如果我定义了CallObject

class CallObject {

  List<Widget> footerButton = [];

  call(int i, double e) => "$i xxxx $e";
}

复制代码

，那么可以用下面的

CallObject callObject = CallObject();
print(callObject(11, 11.0));
print(callObject?.call(11, 11.0));
复制代码

来执行，那么如果我定义了null，就可以通过

执行来执行。 2。 Flutter 中常见

2.1、ChangeNotifier

如下图所示，ChangeNotifier模式很常见‸F‸F‸F ，如文本字段中的

控制、覆盖 TextEditingController 可以快速设置数值显示。为什么是这样？

如下图，这是因为TextEditingController它内部是ChangeNotifier和❀TextField的子类 addListener 当我们更改值时，我们调用 notifyListener 触发内部setState。

2.2、InheritedWidget

Flutter中所有的空间共享都是通过它实现的，和我一样，内置本地化 或状态管理 scoope_model， flutter_redux 等都是基于它实现的。

下图为SliderTheme的自定义实现逻辑。默认的Theme包含SliderTheme，但是我们可以通过覆盖新的me♸来实现自定义，然后我们得到SliderTheme 通过主题 = SliderTheme （上下文）；，其中上下文的实现是元素❀。

程序中Elements inheritFromWidgetOfExactType

实现类型，InheritedElement>_inheritedWidgets对象

。 
_inheritedWidgets通常为空，仅当父控件为InheritedWidget或它♸❙in❀时初始化，并且当父控件为时InheritedWidget，这个地图逐级转发合并。所以当我们调用 context - inheritFromWidgetOfExactType时，我们可以查看父控件W。 2.3，StreamBuilder
StreamBuilder通常用于根据
❝异步构建页面。点击后，绿色框中的文字变成了  addNewxxx

，因为 streamp 在总体实现上发生了变化块 它们通常在处理图案时使用。

和 FutureBuilder

2.4 一样，状态参数使用

通常 Widget 都是同一个框架，并且已实现 Widget 在定义十字框绘图时，我们可以按照下图所示来实现。当我们通过点击setState来更改时，效果并没有出现。为什么？羊毛面料？

其实是因为状态对象的创建和更新时机：

1。 createState 仅在创建 StatefulElement 时创建。
2。 StatefulElement的CreateElement通常只在inflateWidget上调用。
3。当 updateChild 执行 inflateWidget 时，如果子进程存在并且可以更新，则不执行 inflateWidget。？、Layer四棵树，它们的功能是：
- Widget：这些是我们平常写的控件，F宇宙中的一切都是小部件 ，它们都是不可变的，并且一次一帧人们经常抱怨嵌套模式。当然，从另一个角度来说，如果写成Widget配置文件，其实更容易理解。元素 state 存储在此处，并且还充当 Widget 和 RenderObject 之间的桥梁。
- RenderObject：这是真正的工作（折叠、绘画等），它是真正的“dom”。
- Layer：定义受重绘影响的区域的整个重绘边界 (isRepaintBoundary)。
skia 绘图时，saveLayer比较消耗性能，比如透明合成，RR❙‸❙等可能需要saveLayer 调用并保存图层 清除GPU绘图缓存造成性能损失，所以如果开发过程中掉帧严重，可以对这个区域进行优化。
4。手势
颤动在手势中引入了比赛的概念，向下该活动在中尤为重要。
- PointerDownEvent是一切的开始。 Down 事件通常没有获胜者。
- 仅在 MOVE 和 UP 时竞争响应。
- 例如点击：Down即可参加比赛，当UP时决定获胜者。获胜条件是：
我，UP如果只有一个那就是这个了。如果
II和UP有多个，则强制序列中的第一个直接获胜。
- 这里有趣的一点是仅在UP时响应，那么为什么Down事件首先触发呢？
FLutter在这里完成了didExceedDeadline机制。实际上，当上面addPointer时，计时器就启动了。设备，默认为100毫秒，如果超过指定的时间UP，则执行此事件。
- 那么问题又来了，如果现在队列里有两个怎么办？
他们的onTapDown触发，但只获得了一个onTap。
- 如果两个滑动的ScrollView嵌套了怎么办？
举个简单的例子：当两个 SingleChildScrollView 嵌套时，布局会经历：
applyContentDimensions -> applyNewDimensions -> context.setCanDrag (physical .shouldAcceptUserOffset(this));
仅
VerticalDragGestureRecognizer 仅在以下情况下添加
处理手势。
量刑条件主要是返回数学。家长控制Scroll，会出现孩子没有添加VerticalDragGestureRecognizer而根本没有种族的情况。
5。动画
Flutter动画是如何实现的？
我们先看一下代码片段，那么执行代码的效果可以见下图2。
首先，这里有一个看的地方。目前，值 200 执行后会报告错误，因为 Tween 出现在白框中。 T此时出现。同时存在int和double，这是一个不可确定的问题，所以实际值应该是200.0。
同时，你会注意到代码中没有父。正常可以画200，这是因为我们的paint在我们正常情况下不遵循RenerObjcet，所以全屏

Canvas 画图与画布大小无关较旧的控件。

同时，动画由vsync同步信号触发，即混合SingleTi。及其内部 Ticker 覆盖 SchedulerBinding scheduleFrameCallback 同步信号以触发重绘。

动画后控制器点击区域与您的动画数据是否更改绘制或布局有关。？，甚至还有dva_flutter等，可以看到模式控制和flutter中的UI非常相似。

这里有一个简短的谈话scope_model。虽然只有一个文件，但非常漂亮。它使用 AnimationBuilder 的属性。

下图为访问代码。我们之前知道状态管理使用InheritedWidget来共享，当我们在model中进行数据更改时，无需调用通知页面已更新。

这里面的原理是什么？

实际上，scope_model内部使用AnimationBuilder，实现了可听接口。
当模型运行addListener来添加监听器，并且监听器方法运行setState。
所以当我们改变set方法时，调用notifyListenersSta会触发我去更新它，让它反映我之前所说的FLutter 常见的开发模式。

3。混合开发

Android从方便调试和分离集成的角度出发，我们通常会集成混合开发

❀gradle包装中的。

1。按照以下代码，在项目中运行gradle 脚本编辑，组件开发模式，使用apk

开发，使用提供集成、编辑 gradle 快速正常打包的代码。

如果Flutter项目插件有本地代码怎么办？

如果你开发过React Native，你应该知道安装女插件时需要运行React Native链接，目前Gradle和Gradle以及项目java代码正在改变了。

2。相比极具侵入性的React Native，Flutter非常聪明。

如下图所示，安装的插件显示在.flutter_plugins文件中，然后通过读取该文件，动态显示在设置文件中。和 flutter.gradle 版本中的介绍和依赖：

所以现在我们可以引用该包，修改我们的gradle脚本并使用fat-aar插件来打包本地项目。

3。混合开发最大的痛点是什么？

肯定是堆栈管理！！！因此开发了一个项目flutter_boost来解决这个问题。

堆栈与原始级别合并。
将 Surface 渲染屏幕替换为一个 engine 。
每个功能都是一个曲面。不渲染的页面通过屏幕截图进行缓存。

flutter_boost 截至2019年5月16日测试时，仅支持1.2之前的版本

4.PlatformView

在开发项目中还集成了n个对Flutter渲染的控制。舒莉尔的需求。

我们先来看看PlatformView在WebView❀之前是如何实现的。这有什么问题呢？

如下图所示，实际上 dart 只是使用 SingleChildRenderObjectWidget 元素，将大小传递给本机代码，然后在本机代码中显示它。

这种情况肯定是代码显示栈有问题，因为这个显示是和Flutter的渲染树分离的，动画肯定是不一致的。

`4.1 AndroidView`

AndroidView ->TextureLayer，使用Android中的辅助显示和虚拟内存显示原理。

共享内存，实时截图技术。
有问题，消耗内存，页面复杂，速度慢。

这部分因为之前已经讨论过，所以不再赘述

`3。 Flutter Web`

RN 因为是原生控件，所以很难集成react和react native。

flutter 作为一个 UI 框架，与平台无关。它在网络上使用 dart2js 的功能。比如Image

因为Flutter是一个UI框架，所以整体UI几乎是平台无关的，这一点和React Native有很大不同。（开发过程中我几乎是无意识的）
在Flutter_web中，UI层和渲染逻辑与Flutter几乎没有区别。底部的一些区别是： Canvas flutter_web 有一个 EngineCanvas 抽象，它是使用 dart2js 功能在内部生成的。标签。
React Native 平台关联太紧密，而 Flutter 在多个平台上优势明显。我们期待官方帮助解决大多数适配问题。

Flutter的跨平台特性能带来什么？ 
1。有些功能页面可以通过一组代码来实现，并通过插件来安装和部署。平台对应的高性能代码可以在网页、移动应用甚至电脑上编译，并且不存在Weex等兼容性问题。 
2。 “折扣策略”可以在应用程序中快速实施。例如，如果应用程序在某种情况下崩溃，可以更换为相同界面的h5屏幕，并且只需要保留这些代码的一份。
作者：连毛德小果
链接：https://juejin.im/post/5ce7ddf95188257a2b1eac8a
版权属于作者来源：如果是商业转载请联系作者允许。非商业转载请注明出处。