​覆盖90%开发场景的《Flutter开发手册》​

news2024/10/13 21:05:27

哈喽,我是老刘

我本人是带客户端团队的,带着团队切换到Flutter上也已经差不多6年了。
但也不是只写客户端App。基于Flutter来说,也写过桌面端、Web端程序。
但是坦白说,真没有一个Flutter项目是同时覆盖6个平台的。

为啥呢?
我觉得很多人理解的夸6个平台可能是个伪命题。

大多数项目不具备跨越6个平台的资格

来看看我们常用的软件
微信
最开始有个web端,后来被放弃了,现在只有手机端和桌面端
支付宝
好像主要就是手机端
爱优腾等
手机端、Web端倒是比较全,但是桌面端就不怎么全了。

其它的我就不一一列举了。
你看即使是那些国民级的应用,也没有横跨6个平台的。
我自己用的软件中,真正横跨六个平台的好像只有Obsidian。
但是Obsidian的内核是web技术,只不过在PC端基于Electron而移动端基于Capacitor。
所以某种程度上可以理解为在6个端,分别给web内核套了一个不同的壳。

为什么极少有软件横跨6个平台呢?
我觉得大致上有三类原因
1、应用场景不需要
比如像支付宝这样的软件,主要的应用场景就在手机上,开发pc端的价值不高。
2Web端可以代替桌面端
目前PC上浏览器的性能和流畅性都已经非常好了。
所以除了少数交互非常重的软件外,大多数以信息展示为主的软件都可以在Web端流畅运行。
而且PWA和Webassemble两种技术又进一步提升了Web的覆盖范围。
如果用户不需要安装单独的软件就可以得到足够好的使用体验,而开发者也不需要发布新版本就可以更新功能,那是不是比单独开发一个PC端好得多呢?
3、开发成本太高
想想原先开发手机端App
即使只有Android和iOS两个平台,公司需要养两个团队。
而开发中也经常会因为两个平台的差异,需要协调开发进度、资源等不同平台带来的问题。
如果想要同时维护6个平台的原生开发,复杂度和成本怕是要几何量级提高。
即使是使用Flutter这样平台一致性极高的跨平台框架,仍然难以避免在不同平台进行适配。
比如Android上有系统级的侧滑返回按钮,iOS平台上就没有完全对应的操作。

对大多数产品来说,即使是用Flutter开发,如果要支撑覆盖六个平台的成本。
也需要产品的用户规模足够的大。
但是又有多少个产品能有机会成长到这一步呢?

好的,如果说同时覆盖6个平台在大多数时候是个伪命题,那Flutter能够一次开发6个平台运行的意义在哪里?

单类平台跨多个端

比如Android和iOS
Windows、linux和Mac

其实对所有的跨平台开发框架来说,这种场景都是最好的。
因为它规避了一个最大的问题,就是不同类型的平台其UI、功能是不完全一样的。

比如同样是视频播放类的App
在手机端和PC端,页面布局、交互方式都不太一样。
我们现有的跨平台框架最主要的功能就是UI层的复用。
如果UI要有较大差异,那跨平台的优势就会大打折扣。

所以跨平台框架最有优势的场景就是单类平台的多端开发。
比如我们的产品只有Android和iOS端,目前使用Flutter开发。
大多数的UI和业务逻辑代码只需要写一套。
少数情况比如Android和iOS的行为有差异,则在Dart代码中判断不同平台然后分别处理。

但是实际生活中我们用到的很多App还是同时有手机、pad和pc端或者手机、pad和web端的。
Flutter针对这种场景就无用武之地了吗?
其实不是的,这种场景使用Flutter开发也非常适合,只不过需要亿点点策略。

Flutter开发手机、pad和pc端App的策略

这个策略其实也很好理解,就是更精细化的架构分层。
我们先来看一下一个常见App的架构:

image.png

不管使用哪种分层设计策略,一般来说从宏观上大致可以分为三层。
如果你在么一层中的各个功能模块划分是比较清晰的话,那么可以发现:
1、对于下面两层来说,即使在不同类型的平台比如手机端和pc端,它们都用到的模块功能大概率是一致的。
比如逻辑层中的购物车模块。如果手机端和pc端都存在购物车模块,那么这两个端上购物车模块的逻辑功能是一样的。
比如大家都是添加、删除、批量管理、批量结算等操作。
2、对于UI层,相同模块的功能是不一样的。
比如还是购物车,手机端的购物车页面和pc端的购物车页面从布局到交互可能都不一样。

那么,基于上面的特点,我们在使用Flutter开发这种App时,就有了可以遵循的策略。
1、对于业务逻辑层和数据层,可以一套代码多端复用。

对于不包含UI的部分,需要拆分成多个独立的功能模块。
可以把这些模块打包在一个工程中统一进行代码管理。
也可以根据会在哪些端上用到以及迭代速度不同,拆分成2~4个工程,分别进行管理。
不同端上的App可以引用不同的模块。
但是要注意,同一个模块大部分代码应该是不区分平台的。
如果一个模块中有很多判断平台的代码,那应该就要去考虑拆分不同的模块了,甚至有可能一开始模块划分的维度就不合理。

2、对于UI层,需要区分不同的平台。

UI层划分平台,并不是说每个平台单独写一套代码,完全不复用。
而是UI层的代码复用的方式不一样。
我举个例子,微信在手机端和pc端的页面布局是不一样的。
 

image.png

image.png

但是仔细观察会发现,手机端和pc端会话列表部分的布局是一样的,顶多是替换了一个背景色。
那我们就可以开发一个会话列表组件。
在手机端把这个组件放到回话列表页面里。
在PC端,就放在主页面的左侧。
而不管是手机端还是pc端这个组件请求的接口和返回的数据结构都是一致的。

所以从上面的例子可以看出在UI层,我们复用的是组件而不是整个模块。
而在各种各样的App中也能大量看到这样的场景,就是虽然不同端上的页面布局不一致,但是里面的大块元素其实是一样的。
当然也一定会有一些元素或者组件,只在某一个端上使用。
这种情况就把这些组件放到独属于这个端的工程中就好。

这里插一个题外话,这个例子也能说明另外一个问题,就是为啥Flutter中会把padding之类的功能做成独立组件而不是每个组件的属性。
如果我们开发了一个回话列表组件,在手机和pc端复用。
因为手机和pc上这个组件的大小和位置都不一样。
我们这个会话组件本身不需要关心自己是在哪个端运行,自身的位置和大小都可以由不同端上提供的外部布局组件决定。
这样设计不同代码的耦合程度是极低的。
但是如果这些功能都是通过组件的属性来实现的,那就需要给回话组件设计多个构造参数,用于传入位置、边距、缩进等信息。

总结

前面我们介绍了如何利用Flutter开发跨不同类型平台的实现方案。
当只需要跨同类终端时,比如Android和iOS,就可以通过一个Flutter工程搞定。
如果需要跨越不同类型终端,比如手机和pc端,主要就是要通过多个工程,管理不同层级代码的不同复用方式。
那么回到我们最初的问题。Flutter一套代码跨越6个终端确实是可行的,也有其在实战中的意义。
只不过当面临不同的覆盖范围时需要选择不同的实战方案。

好了,如果看到这里的同学有学习Flutter的兴趣,欢迎联系老刘,我们互相学习。
点击免费领老刘整理的《Flutter开发手册》,覆盖90%应用开发场景。
可以作为Flutter学习的知识地图。
覆盖90%开发场景的《Flutter开发手册》

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2106944.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

分布式版本管理工具——Git拉取Github项目到本地仓库

Git拉取(下载)github项目到本地仓库 一、前言二、拉取github项目至本地三、结束语 一、前言 不得不说,如果懂得利用好Git以及github,能够在很大程度上帮助到我们的日常学习与工作,这里我简单的给大家介绍如何使用Git下…

内部类(定义在类的内部)

a.成员内部类(Inner Class) 1.不能单独存在,必须依附于外部类。 2.Outer.Inner inner outer.new Inner(); 3.内部类可以访问当前外部类的private属性和方法,可以用”外部类名.this“访问外部实例的属性和方法。 …

Windows键盘快捷方式

键盘快捷方式是两个或多个键的组合,可用于执行通常需要鼠标或其他指针设备才能执行的任务。 使用键盘快捷方式你可以更轻松地与电脑进行交互,从而在使用 Windows 和其他应用时节省时间和精力。 大多数应用还提供加速键,以让你能够更轻松地使…

机器人笛卡尔空间轨迹规划原理与MATLAB实现

机器人笛卡尔空间轨迹规划是指在给定的笛卡尔坐标系(通常是三维空间坐标系)中规划机器人的末端执行器(如抓手、焊枪等)的移动路径。这种规划方式直观且易于理解,因为它直接关联到任务空间中机器人的位置和姿态。下面将…

分享购买率拉满的8个商品详情页设计技巧!

电子商务网站的商品详情页是商家和设计师关注的重点之一。这一页面在用户决策是否购买商品方面发挥着至关重要的作用。如果一个优质商品没有配套有效的详情页,其转化率将会显著下降,从而影响流量和销量,最终可能导致店铺的淘汰。无论销售何种…

[ComfyUI]Flux​:不花钱免费白嫖最强反推JoyCaption​,仅需几步无门槛轻松搞定

大家好我是极客菌!!! 今天文章主题将为大家介绍一款优秀的图像反推模型:Joy Caption。这是由作者Fancy Feast开发的Joy Caption模型,是在谷歌的SigLIP模型和Meta的最新Llama3.1 模型的基础之上,使用Adapte…

数学建模竞赛论文写作方法

数模竞赛论文结构剖析 摘要问题重述模型假设符号说明问题分析模型建立模型求解结果及分析检验与推广模型评价参考文献附录 摘要 摘要一般应包括: 用一两句话说明原题中要求解决的问题明确说明建立了什么模型,在数学上属于什么类型,建模的…

Spring Boot技术构建的创新在线拍卖系统

系统测试 1.1系统测试的目的 程序设计不能保证没有错误,这是一个开发过程,在错误或错误的过程中都是难以避免的。虽然这是不可避免的,但我们不能使这些错误始终存在于系统中,错误可能会造成无法估量的后果,如系统崩溃&…

PyTorch:优化读取LMDB数据的五大策略

LMDB:http://www.lmdb.tech/doc/index.html lmdb存放千万级别数据IO问题 https://github.com/OFA-Sys/Chinese-CLIP/issues/46 PyTorch LMDB读取慢的原因 LMDB是一种嵌入式键值存储引擎,它具有快速、可靠和高效的特点。然而,与常规文件格式相比&#…

提前购|基于SSM+vue的创新型产品提前购平台(源码+数据库+文档)

创新型产品提前购平台 基于SSMvue的创新型产品提前购平台 一、前言 二、系统设计 三、系统功能设计 系统功能实现 后台模块实现 管理员模块实现 发布企业管理实现 个体管理实现 投资企业管理实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选…

110001安庆巡检_工艺巡检

安庆巡检_工艺巡检 一. 工艺配置二. 点检计划三. 点检任务四. 复检任务1. 复检列表1.1 页面展示 2. 复检任务下发2.1 操作说明2.2 业务说明2.3 表关联说明ps_recheck_task工艺工序参数_复检详情表 3. 复检详情2.1 获取参数点检详情2.2 获取复检详情列表 4. app端复检任务提交4.…

1989-2022年各省基尼系数、城镇基尼系数、农村基尼系数数据

1989-2022年各省基尼系数、城镇基尼系数、农村基尼系数数据 1、时间:1989-2022年 2、来源:各省年鉴、统计年鉴 3、范围:31省 4、指标:基尼系数、城镇基尼系数、农村基尼系数 5、计算说明:参照田为民的文章《中国基…

河南省第三届职业技能大赛 网站技术(世赛选拔)项目任务书

河南省第三届职业技能大赛 网络安全(世赛选拔)项目样题 Module_A 网页设计制作:一、项目简介:二、具体要求1. 网站基本元素2. 内容区域3.网站页面开发 三、该模块要收集的文件 Module_B 后台模块开发:Module_C 前端游戏设计:一、游…

Matter协议解析

Matter协议文档: https://csa-iot.org/wp-content/uploads/2024/05/matter-1-3-core-specification.pdf https://csa-iot.org/wp-content/uploads/2024/05/matter-application-cluster-specification.pdf https://csa-iot.org/wp-content/uploads/2024/05/matter-1…

2024年【陕西省安全员C证】免费试题及陕西省安全员C证作业模拟考试

题库来源:安全生产模拟考试一点通公众号小程序 2024年陕西省安全员C证免费试题为正在备考陕西省安全员C证操作证的学员准备的理论考试专题,每个月更新的陕西省安全员C证作业模拟考试祝您顺利通过陕西省安全员C证考试。 1、【多选题】下列关于坡度大于25…

坐牢第三十五天(c++)

一.作业 1.使用模版类自定义栈 代码&#xff1a; #include <iostream> using namespace std; template<typename T> // 封装一个栈 class stcak { private:T *data; //int max_size; // 最大容量int top; // 下标 public:// 无参构造函数stcak();// 有参…

Linux操作系统 :文件管理(实验报告)

一、实验目的 熟练掌握Shell特性和文件管理命令的使用方法 二、实验环境 硬件&#xff1a;PC电脑一台&#xff0c;网络正常&#xff1b; 配置&#xff1a;win10系统&#xff0c;内存大于8G 硬盘500G及以上 软件&#xff1a;VMware、Ubuntu16.04、 三、实验内容 Linux的文件…

【python】socket 入门以及多线程tcp链接

Socket 入门 及 多线程tcp链接 网络基础知识三要素 Socket是套接字的意思,是网络编程的核心对象,通信两端都独有自己的Socket对象, 数据在两个Socket之间通过 字节流(TCP协议) 或者 数据报包(UDP协议)的形式进行传输. 本文主要针对tcp流程进行讲解 socket-tcp流程图 1.创建服…

面试高频:MySQL索引

1 概念 索引是一种特殊的文件&#xff0c;包含着对数据表里所有记录的引用指针。可以对表中的一列或多列创建索引&#xff0c; 并指定索引的类型&#xff0c;各类索引有各自的数据结构实现。&#xff08;具体细节在后续的数据库原理课程讲解&#xff09; 2 作用 数据库中的表…

栈栈栈专题

一、基础 Leetcode 3174. 清除数字 class Solution { public:string clearDigits(string s) {string st; // 用string模拟栈的行为for(auto& v: s){if(isdigit(v)) st.pop_back();else st v;}return st;} }; 二、进阶 三、邻项消除 四、合法括号字符串 五、…