微信小程序蓝牙开发教程带你探索物联网的便捷与魅力
1057
2022-12-28
flutter 最佳架构（flutter框架的特点）
本篇文章给大家谈谈flutter 最佳架构，以及flutter框架的特点对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
今天给各位分享flutter 最佳架构的知识，其中也会对flutter框架的特点进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
在MaterialApp下面是所有组件的基类Widget，而在Widget的上层是statelessWdiget（无状态组件）、statefulWidget（有状态组件）和InheritedWidget(可以向子类View树种传递信息)，包括我们在上篇文章中用到的Scaffold、Center、Text都是statelessWdiget、statefulWidget的子类。
开始之前，我们需要知道一些名词的含义和作用，在这里不懂的也没有关系，逐渐往后面看，往后面使用后，会有越来越清晰的理解。
是我们app开发中常用的符合MaterialApp Design设计理念的入口Widget。
StatelessWidget是非动态的，它不依赖于除了传入数据以外的任何其他数据，这意味着改变其显示的唯一方式，就是改变传入其构造函数的参数。比如Text，Button，Icon这些控件。
StatefulWidget是动态的，他们允许我们创建一个能动随时间改变内容的widget，并且不依赖于其初始化时被传入的静态状态，可以随着用户的输入，各种形式的异步回包或其他形式的状态变化而变化。比如Image，CheckBox，Form这些控件。
Scaffold 翻译过来就是脚手架的意思，它实现了基本的 Material Design 可视化布局结构。简单的说，Scaffold就是一个提供 Material Design 设计中基本布局的 widget。
一个 MaterialApp 由多个 Scalfold 页面组成，每个 Scalfold 的主要结构如下：
AppBar：顶部导航栏
body：中间内容体
BottomNavigationBar：底部导航栏
它是一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget。
alignment:控制child的对齐方式
decoration:绘制在child后面的装饰
控件加入内/外边距。属性如下：
Row和Column分别是Flutter中的水平和垂直布局，对应Android里面的LinearLayout的水平垂直方向布局。
MainAxisAlignment (主轴)属性：
CrossAxisAlignment（交叉轴）属性：
配合Expanded使用，使Expanded中的child充满空白区域。Expanded组件必须用在Row、Column、Flex内。
属性：
效果：
Stack 这个是Flutter中布局用到的组件，跟Android中FrameLayout或RelativeLayout很像。是一个在布局中使用相当频繁的布局组件，相当重要的一个布局，这里当然要着重讲解。
国有，闲鱼架构团队负责人。在7月13号落幕的2019年Archsummit峰会上就近一年来闲鱼在FlutterFaaS一体化项目上的 探索 和实践进行了分享。
随着无线，IoT的发展，5G的到来，移动研发越发向多端化发展。传统的基于Native＋Web＋服务端的开发方式，研发效率低下，显然已经无法适应发展需要。
我们希望 探索 闲鱼这样规模的独立APP的高效研发架构。主要思路是围绕Flutter解决多端问题，并使Flutter与FaaS等无服务容能力打通，形成云端一体化的研发能力，支持一云多端的发展需要。在某些场景已经取得效果，希望分享过程中的思考，与大家交流。
闲鱼选择Flutter主要是出于高性能的考虑。Flutter高性能主要来源于2个原因：
更多比较：
没有银弹的解决方案，Flutter与RN各有优点。如何选择因素很多，关键看如何取舍，举个例子：
云端技术栈的打通，是减少协同的不错的解法。以往前端＋Node.js的一体化方案大家应该不会陌生，然而如果端侧使用了Flutter，那云侧Dart自然是第一选择。
FaaS的本质是运行在云端，那Dart适合用在云/Server上吗？
Dart语言早于Flutter，在最初的设计上，Dart就可以用于Web、Server。Dart具备一些服务端语言的特点：
闲鱼首先尝试将Dart作为普通的Server，替代传统的Java Server，然后再将Dart容器嵌入到FaaS容器中。建立Dart Server能力是第一步，也是主要的工作量所在。
闲鱼在Dart Server方面的建设思路：
开发期：
运行期：
上述内容实现了FlutterDart FaaS的技术栈的统一，但仅技术栈统一还远远不够，端、云的同学仍然无法真正互补和一体化打通，原因在于还有更多深入问题需要考虑：
面向这些问题，闲鱼的解法思路：
案例一，一体化在资源均衡方面的体现。在近期的一个项目中，云端一体化使原本2个月的项目时间，减少了20天。
案例二，一体化在业务闭环方面的体现。负责增长的一位开发同学，专注在增长业务上，在合适的情况下为合适的人投放合适的内容，以此带来用户的增长和活跃效果。一体化的方式下，可以统一云、端的切面，业务研发不再受云、端的限制。
一体化是建设高效研发框架的方向，并不是所有场景都需要一体化的开发，但一体化的Flutter、FaaS等技术组件，可以独立使用，也会带来效率提升，并且与原有的开发模式兼容。从一体化的思路去建设，可以使整体架构体系更加一致，也有机会做一体的架构沉淀。
未来闲鱼希望在一体化上做更多尝试和深入 探索 ，包括一体化工具、一体化业务平台、数据化智能化等方向。
2）点击的热区问题： OpacityTapWidget内部设置padding增加了点击的热区。
方式1与方式2的不同是，方式1再初始化时就会触发，监听者会在初始化时监听到false参数。
由于数据的存储和获取是异步的，但是在项目中使用同步的方法获取用户信息就很是有必要，所以该项目再初始化之前就初始化了shared_preferences，解决了在项目中使用同步的方法获取用户信息这个问题。
下面分享一下如何集成现有的项目和如何继承以及碰到的问题
1.首先第一步 修改gradle
因为 Flutter 当前仅支持为 x86_64，armeabi-v7a 和 arm64-v8a 构建预编（AOT）的库 所以我们需要修改gradle的文件限制 APK 中支持的架构，从而避免 libflutter.so找不到引起的崩溃
2.新建一个FlutterModel的工程
2.使用aar文件 因为所有工程统一使用jenkins打包所以我们放在本地肯定是不合适的
说以我们需要 打包aar并上传服务器
上传完成后在android中引用
在开发中遇到的问题
1.关于android和Ios中的跳转传参问题
这个问题在android端还是比较方便的 但是的在Ios端并不怎么好实现
最终决定使用flutter_boost来完成android和Ios与Flutter的通信操作
flutter_boost github地址： https://github.com/alibaba/flutter_boost
集成文档： https://github.com/alibaba/flutter_boost/blob/master/INTEGRATION.md
集成文档给出了 但是没有android的 尴尬
下满分享下android的集成
（1）在flutter的 pubspec.yaml工程中添加
（2）修改android工程
使用本地工程的时候需要在工程共添加
使用aar的时候不需要添加
（3）在android工程中添加对应的条状路由配置
（4）在使用默认的flutter_boost启动界面的时候可能碰到状态栏丢失的情况
所以最好集成BoostFlutterActivity写一个新的activity方便处理状态栏和activity进出动画
（5）跳转并传参
//params 传多个参数可以使用json的形式
2.在flutter中的网络框架使用的dio结果在ios的弹出loading的时候出现卡顿现象
解决方式：1.服务换证书 （但是后台太忙暂时没有支持的人员）
2.ios使用原生的loading解决
3.在使用dio的时候出现ios部分手机 网络请求缓慢问题
解决方法：请求的时候使用http 2.0协议
插件地址： https://github.com/flutterchina/dio/tree/master/plugins/http2_adapter
今日头条3M
闲鱼22M
百度贴吧13M
蚂蚁财富56.8M
百度网盘14M
手机淘宝15M
贝壳找房8M
由粗粒度小组件动态拼装出页面，Native端已经有很多成熟的框架，如天猫的Tangram。
开发语言：iOS、Android
适用场景：快速迭代的活动营销页面
优点：无侵入，更新简单
缺点：提前预埋，扩展性差，灵活性差
以webview作为容器的app，历史悠久，最早到2011年。
开发语言：HTML
适用场景：双端严格一致的银行类app，容器类的支付宝小程序等
优点：动态更新，跨平台
缺点：性能，加载速度
UI用Xml+JS表达，用Native View渲染。
开发语言：Xml+JS
适用场景：双端严格一致的银行类app，容器类的支付宝小程序等
优点：native组件，生态成熟
缺点：三方库crash，性能缺陷
UI用Dart表达，用Dart engine渲染。
Flutter官方不支持动态化。原因是Flutter在 Release 模式下构建的是 AOT 编译产物，在 Debug 模式下构建的是 JIT ，AOT 依赖的 Dart VM 和 JIT 并不一样， JIT Release 并不支持 iOS 设备。可行的方案是：AOT 需要一个编译后的 “Dart VM”。抽离一份 DartVM 独立编译，再以动态库的形式引入项目。
开发语言：Dart
适用场景：iOS、Android、Web、Desktop、Embed
优点：性能最佳
缺点：增大包体积 20MB+
大厂的主流方案。UI用JS表达，用Dart engine渲染。
开发语言：JS、类JS
适用场景：iOS、Android
优点：性能最佳
缺点：需要掌握JS、Dart两个语言和框架
大厂的主流方案。UI用Dart表达，用Dart engineX渲染。
开发语言：Dart
适用场景：iOS、Android
优点：性能最佳
缺点：需要改造Dart engine
1、 美团外卖Flutter动态化实践
2、 携程App 首页动态化探索
3、 Flutter 动态化在最右 App 中的实践
4、 Flutter 动态化热更新的思考与实践
5、 NOW直播Flutter动态搜索列表页实现
6、 Flutter动态化的方案对比及最佳实现-闲鱼
7、 基于JavaScript 的MXFlutter 关于flutter 最佳架构和flutter框架的特点的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 flutter 最佳架构的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于flutter框架的特点、flutter 最佳架构的信息别忘了在本站进行查找喔。
本文目录一览：
- 1、Flutter布局全解
- 2、Archsummit 2019重磅分享｜闲鱼Flutter＆FaaS云端一体化架构
- 3、编写一个非常精美的Flutter Todo-List项目
- 4、flutter 完整项目（mvvm架构）
- 5、Flutter混合开发实战
- 6、Flutter动态化方案调研
Flutter布局全解
由上面的架构图可以看出来，flutter最上层是google 的纸墨设计Material Design（MaterialApp）组件，关于Material Design设计理念大家可以去官网安利一下啊 material.io在MaterialApp下面是所有组件的基类Widget，而在Widget的上层是statelessWdiget（无状态组件）、statefulWidget（有状态组件）和InheritedWidget(可以向子类View树种传递信息)，包括我们在上篇文章中用到的Scaffold、Center、Text都是statelessWdiget、statefulWidget的子类。
开始之前，我们需要知道一些名词的含义和作用，在这里不懂的也没有关系，逐渐往后面看，往后面使用后，会有越来越清晰的理解。
是我们app开发中常用的符合MaterialApp Design设计理念的入口Widget。
StatelessWidget是非动态的，它不依赖于除了传入数据以外的任何其他数据，这意味着改变其显示的唯一方式，就是改变传入其构造函数的参数。比如Text，Button，Icon这些控件。
StatefulWidget是动态的，他们允许我们创建一个能动随时间改变内容的widget，并且不依赖于其初始化时被传入的静态状态，可以随着用户的输入，各种形式的异步回包或其他形式的状态变化而变化。比如Image，CheckBox，Form这些控件。
Scaffold 翻译过来就是脚手架的意思，它实现了基本的 Material Design 可视化布局结构。简单的说，Scaffold就是一个提供 Material Design 设计中基本布局的 widget。
一个 MaterialApp 由多个 Scalfold 页面组成，每个 Scalfold 的主要结构如下：
AppBar：顶部导航栏
body：中间内容体
BottomNavigationBar：底部导航栏
它是一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget。
alignment:控制child的对齐方式
decoration:绘制在child后面的装饰
控件加入内/外边距。属性如下：
Row和Column分别是Flutter中的水平和垂直布局，对应Android里面的LinearLayout的水平垂直方向布局。
MainAxisAlignment (主轴)属性：
CrossAxisAlignment（交叉轴）属性：
配合Expanded使用，使Expanded中的child充满空白区域。Expanded组件必须用在Row、Column、Flex内。
属性：
效果：
Stack 这个是Flutter中布局用到的组件，跟Android中FrameLayout或RelativeLayout很像。是一个在布局中使用相当频繁的布局组件，相当重要的一个布局，这里当然要着重讲解。
Archsummit 2019重磅分享｜闲鱼Flutter＆FaaS云端一体化架构
作者：闲鱼技术－国有国有，闲鱼架构团队负责人。在7月13号落幕的2019年Archsummit峰会上就近一年来闲鱼在FlutterFaaS一体化项目上的 探索 和实践进行了分享。
随着无线，IoT的发展，5G的到来，移动研发越发向多端化发展。传统的基于Native＋Web＋服务端的开发方式，研发效率低下，显然已经无法适应发展需要。
我们希望 探索 闲鱼这样规模的独立APP的高效研发架构。主要思路是围绕Flutter解决多端问题，并使Flutter与FaaS等无服务容能力打通，形成云端一体化的研发能力，支持一云多端的发展需要。在某些场景已经取得效果，希望分享过程中的思考，与大家交流。
闲鱼选择Flutter主要是出于高性能的考虑。Flutter高性能主要来源于2个原因：
更多比较：
没有银弹的解决方案，Flutter与RN各有优点。如何选择因素很多，关键看如何取舍，举个例子：
云端技术栈的打通，是减少协同的不错的解法。以往前端＋Node.js的一体化方案大家应该不会陌生，然而如果端侧使用了Flutter，那云侧Dart自然是第一选择。
FaaS的本质是运行在云端，那Dart适合用在云/Server上吗？
Dart语言早于Flutter，在最初的设计上，Dart就可以用于Web、Server。Dart具备一些服务端语言的特点：
闲鱼首先尝试将Dart作为普通的Server，替代传统的Java Server，然后再将Dart容器嵌入到FaaS容器中。建立Dart Server能力是第一步，也是主要的工作量所在。
闲鱼在Dart Server方面的建设思路：
开发期：
运行期：
上述内容实现了FlutterDart FaaS的技术栈的统一，但仅技术栈统一还远远不够，端、云的同学仍然无法真正互补和一体化打通，原因在于还有更多深入问题需要考虑：
面向这些问题，闲鱼的解法思路：
案例一，一体化在资源均衡方面的体现。在近期的一个项目中，云端一体化使原本2个月的项目时间，减少了20天。
案例二，一体化在业务闭环方面的体现。负责增长的一位开发同学，专注在增长业务上，在合适的情况下为合适的人投放合适的内容，以此带来用户的增长和活跃效果。一体化的方式下，可以统一云、端的切面，业务研发不再受云、端的限制。
一体化是建设高效研发框架的方向，并不是所有场景都需要一体化的开发，但一体化的Flutter、FaaS等技术组件，可以独立使用，也会带来效率提升，并且与原有的开发模式兼容。从一体化的思路去建设，可以使整体架构体系更加一致，也有机会做一体的架构沉淀。
未来闲鱼希望在一体化上做更多尝试和深入 探索 ，包括一体化工具、一体化业务平台、数据化智能化等方向。
编写一个非常精美的Flutter Todo-List项目
花费大概一个多月的时间，这个完全由Flutter编写的Todo-List项目总算初步完成了！现在，它终于要被开源出来了。
在开始介绍之前，先来简单的看一下真机运行效果吧
下面，针对使用者和开发者，我将来分别介绍一次
app中，可以在主题切换界面选择各种主题颜色进行切换，app自带六个默认主题，这些都是我经过多次尝试所挑选出来的颜色搭配。同时你也可以选择自定义主题颜色
在app中，每项任务都会带有一个图标，而app提供了所有 Flutter 自带的 Material design 风格的图标。这些图标，你同样可以进行任意颜色的自定义
在app中，有多项其他的操作是你可以进行自定义的
比如说主页测滑栏的头部展示内容。当然，还有一些其他的操作，就由你去自行体验了
当你完成了一项任务后，这个任务就会从主页转移到完成列表页面，在这里你可以看到任务的一些额外信息
那么，对于使用者的介绍就到这里结束
下面就是为广大开发者们介绍的时间了！
各位开发者们请扶好你们的秀发，下面就我来带领各位参观参观这个项目的内部构造
项目中使用了一些非常优秀的第三方库，也特别感谢这些开发者们，让我的发量保持健康
下面就是这些控件的信息
项目使用的状态管理框架是 <codeProvider</code ,而整个项目的架构如下
看起来是不是和 Android 中的 MVP 模式很像呢？其实都差不多的，只是名字略有不同罢了，你也可以就把上面的模式当作是 MVP 模式。
Flutter 可以说是特别适合这种架构模式的，因为视图跟随数据而变化，你基本上不用去关心View，只要去对数据进行操作就好了。
项目目录结构如下：
先说明一下除了 lib 外的其他目录：
然后是 lib 目录
项目创建于6月21日，到如今发布1.0.0版本花了三十多天的时间，虽然我做过很多测试，解决了很多bug，但是时间确实不充裕。纰漏也会在所难免
所以如果使用过程中遇到什么问题，或者对于项目有什么好的建议，欢迎在app中的反馈界面提出来，也可以在下面留下评论，又或者在github上提issue。
项目的UI设计与后台接口均由我独自一人完成，所以这也是为什么时间不够的原因。不过目前项目中只是包含了两个自己写的接口，后续计划中应该会加入登录功能，到时候会有很多接口操作。
若有兴趣，请持续关注！
如果你觉得这个app不错，或者这个项目有帮助到你，不妨给这个项目一个Star吧。项目后面也会持续保持更新和维护！
ToDo-List
UI项目地址
密码:Aczh
flutter 完整项目（mvvm架构）
1）点击效果：点击时child有一个透明度的变化2）点击的热区问题： OpacityTapWidget内部设置padding增加了点击的热区。
方式1与方式2的不同是，方式1再初始化时就会触发，监听者会在初始化时监听到false参数。
由于数据的存储和获取是异步的，但是在项目中使用同步的方法获取用户信息就很是有必要，所以该项目再初始化之前就初始化了shared_preferences，解决了在项目中使用同步的方法获取用户信息这个问题。
Flutter混合开发实战
之前开发了一个纯Flutter的项目，结果接到个新的需求需要使用Flutter单独开一个模块集成到原有的android项目中下面分享一下如何集成现有的项目和如何继承以及碰到的问题
1.首先第一步 修改gradle
因为 Flutter 当前仅支持为 x86_64，armeabi-v7a 和 arm64-v8a 构建预编（AOT）的库 所以我们需要修改gradle的文件限制 APK 中支持的架构，从而避免 libflutter.so找不到引起的崩溃
2.新建一个FlutterModel的工程
2.使用aar文件 因为所有工程统一使用jenkins打包所以我们放在本地肯定是不合适的
说以我们需要 打包aar并上传服务器
上传完成后在android中引用
在开发中遇到的问题
1.关于android和Ios中的跳转传参问题
这个问题在android端还是比较方便的 但是的在Ios端并不怎么好实现
最终决定使用flutter_boost来完成android和Ios与Flutter的通信操作
flutter_boost github地址： https://github.com/alibaba/flutter_boost
集成文档： https://github.com/alibaba/flutter_boost/blob/master/INTEGRATION.md
集成文档给出了 但是没有android的 尴尬
下满分享下android的集成
（1）在flutter的 pubspec.yaml工程中添加
（2）修改android工程
使用本地工程的时候需要在工程共添加
使用aar的时候不需要添加
（3）在android工程中添加对应的条状路由配置
（4）在使用默认的flutter_boost启动界面的时候可能碰到状态栏丢失的情况
所以最好集成BoostFlutterActivity写一个新的activity方便处理状态栏和activity进出动画
（5）跳转并传参
//params 传多个参数可以使用json的形式
2.在flutter中的网络框架使用的dio结果在ios的弹出loading的时候出现卡顿现象
解决方式：1.服务换证书 （但是后台太忙暂时没有支持的人员）
2.ios使用原生的loading解决
3.在使用dio的时候出现ios部分手机 网络请求缓慢问题
解决方法：请求的时候使用http 2.0协议
插件地址： https://github.com/flutterchina/dio/tree/master/plugins/http2_adapter
Flutter动态化方案调研
腾讯课堂14M今日头条3M
闲鱼22M
百度贴吧13M
蚂蚁财富56.8M
百度网盘14M
手机淘宝15M
贝壳找房8M
由粗粒度小组件动态拼装出页面，Native端已经有很多成熟的框架，如天猫的Tangram。
开发语言：iOS、Android
适用场景：快速迭代的活动营销页面
优点：无侵入，更新简单
缺点：提前预埋，扩展性差，灵活性差
以webview作为容器的app，历史悠久，最早到2011年。
开发语言：HTML
适用场景：双端严格一致的银行类app，容器类的支付宝小程序等
优点：动态更新，跨平台
缺点：性能，加载速度
UI用Xml+JS表达，用Native View渲染。
开发语言：Xml+JS
适用场景：双端严格一致的银行类app，容器类的支付宝小程序等
优点：native组件，生态成熟
缺点：三方库crash，性能缺陷
UI用Dart表达，用Dart engine渲染。
Flutter官方不支持动态化。原因是Flutter在 Release 模式下构建的是 AOT 编译产物，在 Debug 模式下构建的是 JIT ，AOT 依赖的 Dart VM 和 JIT 并不一样， JIT Release 并不支持 iOS 设备。可行的方案是：AOT 需要一个编译后的 “Dart VM”。抽离一份 DartVM 独立编译，再以动态库的形式引入项目。
开发语言：Dart
适用场景：iOS、Android、Web、Desktop、Embed
优点：性能最佳
缺点：增大包体积 20MB+
大厂的主流方案。UI用JS表达，用Dart engine渲染。
开发语言：JS、类JS
适用场景：iOS、Android
优点：性能最佳
缺点：需要掌握JS、Dart两个语言和框架
大厂的主流方案。UI用Dart表达，用Dart engineX渲染。
开发语言：Dart
适用场景：iOS、Android
优点：性能最佳
缺点：需要改造Dart engine
1、 美团外卖Flutter动态化实践
2、 携程App 首页动态化探索
3、 Flutter 动态化在最右 App 中的实践
4、 Flutter 动态化热更新的思考与实践
5、 NOW直播Flutter动态搜索列表页实现
6、 Flutter动态化的方案对比及最佳实现-闲鱼
7、 基于JavaScript 的MXFlutter 关于flutter 最佳架构和flutter框架的特点的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 flutter 最佳架构的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于flutter框架的特点、flutter 最佳架构的信息别忘了在本站进行查找喔。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
最近发表
推荐文章
热评文章
