目前跨端开发比较热门的就是 React NativeFlutter 了,到底该选哪门技术似乎也快成了大前端圈的一个热门话题。对于web前端来说,基于web生态的 React Native 应该是一个更加顺畅而自然的选择;但 Flutter 让人动心的地方就是高性能和 跨端UI一致性。而React Native 发展不太明朗和 Flutter 越发成熟的走势对比促使我从观望的心态转为加入 Flutter

这里主要就是记录一下学习Flutter的一些感想和看法:

  • 包管理
  • 布局和样式
  • json
  • 状态管理

包管理

pubspec.yaml 文件的作用类似于 npmpackage.json ,而yaml格式也比json方便。但是不能用命令行自动安装包却让习惯了npm的我觉得麻烦。因为Flutter 安装依赖包是这么一个流程:

  1. 打开pub.dev网站;
  2. 搜索需要的包,得到包的名称和版本;
  3. 把包名称和版本填入pubspec.yaml,最后才开始下载包。

我觉得应该直接命令行安装包,让它帮我们下载,名称版本自动写入pubspec.yaml。如果没有指定版本就是默认下载最新版本,因为很多时候我们并不想知道版本号,给我个能用的最新的版本号就ok了。

布局和样式

就和很多人想的一样,为什么不使用 jsx 或者 xml 格式进行布局,因为基于代码的方式看起来太不直观了,之所以这样听说主要是能更方便的和Dart的hot reload特性配合使用,代码改动能立刻反映布局变化。但我还是期待有适配转化 DSL 的框架出现。

Flutter一切都是widget,但是连很多属性都当成widget 这就让人有些看不明白了,比如 CenterAlignPadding,为什么不把常用的样式属性都加入到布局组件里面呢?这导致出现了这么一种情况:嵌套严重,一个很简单的功能需要层层嵌套才能实现,而且样式也不能方便的复用。目前比较合理的建议就是适当抽取出子组件减少嵌套。

Json

Dart 作为强类型的语言,一切皆是对象。Dart要方便操作json就得把json转化为对象,这就意味着每用到一个json,就需要定义一个对应的类,这也是强类型语言的通病了。这绝对让人很怀念 js/ts 这种对json操作非常自然顺畅的弱类型/函数式语言。当然也不是没有妥协的解决方案,比较方便的就是 json_modelFlutter实战作者写的一个工具库,步骤也简单:

  1. 在工程根目录下创建一个名为 "jsons" 的目录;
  2. 创建或拷贝Json文件到"jsons" 目录中 ;
  3. 运行 pub run json_model (Dart VM工程)or flutter packages pub run json_model(Flutter中) 命令生成Dart model类,生成的文件默认在"lib/models"目录下

状态管理

Flutter 使用initStatesetState方法设置widget状态,原理类似React。当然这只是widget内部控制状态用的,跨组件通信还是需要其他方案的。官方推荐是使用Provider,使用下来中规中矩吧,当然还可以使用大名鼎鼎的 Redux 以及 mbox。不过Redux本身就以过多的样板代码而出名,写React的时候就不喜欢用,hooks 出来后就果断就放弃Redux了。hooks才是真香啊,Flutter什么时候才支持类似的函数式状态管理方案呢?

总结

说了这么多,本质就是为什么 Flutter 不向以 React 为代表的 web 生态看齐?更大的原因是Flutter的很多理念和开发模式其实远远落后于 React 。这也是为什么习惯 react/vue 的 web前端 对于Flutter 感觉很别扭不顺手的原因了。

Flutter开发初探的更多相关文章

  1. Unity3D游戏开发初探—2.初步了解3D模型基础

    一.什么是3D模型? 1.1 3D模型概述 简而言之,3D模型就是三维的.立体的模型,D是英文Dimensions的缩写. 3D模型也可以说是用3Ds MAX建造的立体模型,包括各种建筑.人物.植被. ...

  2. 基于Unity的AR开发初探:第一个AR应用程序

    记得2014年曾经写过一个Unity3D的游戏开发初探系列,收获了很多好评和鼓励,不过自那之后再也没有用过Unity,因为没有相关的需求让我能用到.目前公司有一个App开发的需求,想要融合一下AR到A ...

  3. 浅谈Flutter(一):搭建Flutter开发环境

    学习内容来自: Flutter中文网  . Flutter实战 -------------------------------------------------------------------- ...

  4. 安装与配置Flutter开发环境

    这篇博客我们介绍了Flutter,并且对比了H5,React Native,Flutter. 由于Flutter是跨平台的开发框架,开发一次可以同时运行在Android和iOS上面,所以我们开发时最好 ...

  5. MAC安装flutter开发环境

    #最近在学flutter开发,写一篇记录一下安装的过程 1.配置flutter镜像地址  vim ~/.bash_profile 命令行输入后回车,打开.bash_profile配置镜像地址 expo ...

  6. saltstack自动化运维系列⑩SaltStack二次开发初探

    saltstack自动化运维系列⑩SaltStack二次开发初探 1.当salt运行在公网或者网络环境较差的条件下,需要配置timeout时间vim /etc/salt/master timeout: ...

  7. Flutter开发环境(Window)配置及踩坑记录

    Flutter 是 Google 用以帮助开发者在 iOS 和 Android 两个平台开发高质量原生 UI 的移动 SDK.Flutter 兼容现有的代码,免费且开源,在全球开发者中广泛被使用. F ...

  8. Flutter开发中的几个常用函数

    几个Flutter开发中的常用函数 /** 返回当前时间戳 */ static int currentTimeMillis() { return new DateTime.now().millisec ...

  9. [Dart] Flutter开发中的几个常用函数

    几个Flutter开发中的常用函数 /** 返回当前时间戳 */ static int currentTimeMillis() { return new DateTime.now().millisec ...

随机推荐

  1. pix三接口配置

    拓扑 R1 R1#conf t Enter configuration commands, one per line. End with CNTL/Z. R1(config)#int f0/0 R1( ...

  2. 移动端border:1px问题解决方案

    了解设备像素和css像素的因该知道,通常我们在写移动端时,是按照设计稿标注的像素除以设备的DPR来写真实的像素, 比如在iPhone6上,我们写的20px字体世界上在视觉效应上有20px; 所以当我们 ...

  3. Java 第十一届 蓝桥杯 省模拟赛 第十层的二叉树

    一棵10层的二叉树,最多包含多少个结点? 注意当一棵二叉树只有一个结点时为一层. 答案提交 这是一道结果填空的题,你只需要算出结果后提交即可.本题的结果为一个整数,在提交答案时只填写这个整数,填写多余 ...

  4. Java实现蓝桥杯算法提高P0102

    算法提高 P0102 时间限制:1.0s 内存限制:256.0MB 提交此题 用户输入三个字符,每个字符取值范围是0-9,A-F.然后程序会把这三个字符转化为相应的十六进制整数,并分别以十六进制,十进 ...

  5. Java实现 蓝桥杯 算法提高 新建Microsoft world文档

    算法提高 新建Microsoft Word文档 时间限制:1.0s 内存限制:256.0MB 问题描述 L正在出题,新建了一个word文档,想不好取什么名字,身旁一人惊问:"你出的题目叫&l ...

  6. Java实现蓝桥杯模拟递增的数

    问题描述 一个正整数如果任何一个数位不大于右边相邻的数位,则称为一个数位递增的数,例如1135是一个数位递增的数,而1024不是一个数位递增的数. 给定正整数 n,请问在整数 1 至 n 中有多少个数 ...

  7. Java实现 蓝桥杯VIP 算法训练 单词接龙

    问题描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的"龙"(每个单词都最多在"龙" ...

  8. 判断IP是否是IPV4

    bool isVaildIp(const char *ip) { int dots = 0; /*字符.的个数*/ int setions = 0; /*ip每一部分总和(0-255)*/ if (N ...

  9. vue之 :model和v-model的区别

    v-model通常用于input的双向数据绑定 <input v-model="parentMsg">,也可以实现子组件到父组件数据的双向数据绑定 :model是v-b ...

  10. k8s学习-集群安装

    3.kubernetes安装 3.1.规划 hostname ip 内存 核 硬 说明 harbor 192.168.136.30 2G 2 100G 私有仓库 koolshare 2G 2 20G ...