flutter手写,手写flat

前端常用的框架有哪些？

前端三大框架，是Angular、React、Vue，这三个框架现在是最为流行也是最多人用的框架。

React：

1.声明式设计：React采用声明范式，可以轻松描述应用。

2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

3.灵活：React可以与已知的库或框架很好地配合。

优点：

1.速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。

2.跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。

3.模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。

4.单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构5.同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。6.兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。缺点：React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

Vue：

Vue是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

它有以下的特性：

1.轻量级的框架

2.双向数据绑定

3.指令

4.插件化

优点：

1.简单：官方文档很清晰，比Angular简单易学。

2.快速：异步批处理方式更新DOM。

3.组合：用解耦的、可复用的组件组合你的应用程序。

4.紧凑：~18kbmin+gzip，且无依赖。

5.强大：表达式无需声明依赖的可推导属性(computedproperties)。

6.对模块友好：可以通过NPM、Bower或Duo安装，不强迫你所有的代码都遵循Angular的各种规定，使用场景更加灵活。

缺点：

1.新生儿：Vue.js是一个新的项目，没有angular那么成熟。

2.影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。

3.不支持IE8。

Angular：

Angular是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

它有以下的特性：

1.良好的应用程序结构

2.双向数据绑定

3.指令

4.HTML模板

5.可嵌入、注入和测试

优点：

1.模板功能强大丰富，自带了极其丰富的angular指令。

2.是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；3.自定义指令，自定义指令后可以在项目中多次使用。

4.ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。

5.angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

缺点：

1.angular入门很容易但深入后概念很多,学习中较难理解。

2.文档例子非常少,官方的文档基本只写了api,一个例子都没有,很多时候具体怎么用都是google来的,或直接问misko,angular的作者。

3.对IE6/7兼容不算特别好,就是可以用jQuery自己手写代码解决一些。

4.指令的应用的最佳实践教程少,angular其实很灵活,如果不看一些作者的使用原则,很容易写出四不像的代码,例如js中还是像jQuery的思想有很多dom操作。

5.DI依赖注入如果代码压缩需要显示声明。

相关问答

Q1: Flutter真香，我用它写了个桌面版JSON解析工具

Flutter支持稳定的桌面设备开发已经一段时间了，不得不说，Flutter多平台支持的特性真的很香。我本人并没有任何桌面开发的经验，但仍然使用Flutter开发出了一个桌面版小程序，功能很简单，就是对输入的json做格式化处理和转模型。

话不多说，先来看看实际效果。 项目源码地址

开发环境如下：

Flutter : 2.8.1

Dart : 2.15.1

IDE : VSCode

JSON作为我们日常开发工作中经常要打交道的一种数据格式，它共有6种数据类型： null , num , string , object , array , bool 。我们势必对它又爱又恨。爱他因为他作为数据处理的一种格式确实非常方便简洁。但是在我们做Flutter开发中，又需要接触到json解析时，就会感觉非常棘手，因为flutter没有反射，导致json转模型这块需要手写那繁杂的映射关系。就像下面这样子。

数据量少还能接受，一旦量大，那么光手写这个解析方法都能让你怀疑人生。更何况手写还有出错的可能。好在官方有个工具**json_serializable**可以自动生成这块转换代码，也解决了flutter界json转模型的空缺。当然，业界也有专门解析json的网站，可以自动生成dart代码，使用者在生成后复制进项目中即可，也是非常方便的。

本项目以json解析为切入点，和大家一起来看下flutter是如何开发桌面应用的。

要让我们的flutter项目支持桌面设备。我们首先需要修改下flutter的设置。如下，让我们的项目支持 windows 和 macos 系统。

接下来使用 flutter create 命令创建我们的模版工程。

创建完项目后，我们就可以 run 起来了。

先来看下整体界面，界面四块，分别为功能模块、文件选择模块、输入模块、输出模块。

我们在新建一个桌面应用时，默认的模版又一个Appbar，此时应用可以用鼠标拖拽移动，放大缩小，还可以缩到很小。但是，我们一旦去掉这个导航栏，那么窗口就不能用鼠标拖动了，并且我们往往不希望用户将我们的窗口缩放的很小，这会导致页面异常，一些重要信息都展示不全。因此这里需要借助第三方组件 bitsdojo_window 。通过 bitsdojo_window ，我们可以实现窗口的定制化，拖动，最小尺寸，最大尺寸，窗口边框，窗口顶部放大、缩小、关闭的按钮等。

通过 InkWell 组件，可以捕捉到手势、鼠标、触控笔的移动和停留位置

这个功能是鼠标移动后的UI交互界面。要在窗口上显示一个提示框，可以使用 Overlay 。需要注意的是，由于在 Overlay 上的 text 的根结点不是 Material 风格的组件，因此会出现黄色的下划线。因此一定要用 Material 包一下 text 。并且你必须给创建的 OverlayEntry 一个位置，否则它将全屏显示。

读取说表拖拽的文件一开始想尝试使用 InkWell 组件，但是这个组件无法识别拖拽中的鼠标，并且也无法从中拿到文件信息。因此放弃。后来从文章《Flutter-2天写个桌面端APP》中发现一个可读取拖拽文件的组件 desktop_drop ，能满足要求。

使用开源组件 file_picker ，选完图片后的操作和拖拽选择图片后的操作一致。

Textfield 如果要显示富文本，那么需要自定义 TextEditingController 。并重写 buildTextSpan 方法。

在做导出功能时遇到下列报错，保存提示为没有权限访问对应目录下的文件。

通过Apple的开发文档找到有关权限问题的说明。其中有个授权私钥的key为 com.apple.security.files.downloads.read-write ，表示 对用户的下载文件夹的读/写访问权限 。那么，使用Xcode打开Flutter项目中的mac应用，修改工程目录下的 DebugProfile.entitlements 文件，向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ，并将值设置为YES，保存后重启Flutter项目。发现已经可以向下载目录中读写文件了。

当然，这是正常操作。还有个骚操作就是关闭系统的沙盒机制。将 entitlements 文件的 App Sandbox 设置为NO。这样我们就可以访问任意路径了。当然关闭应用的沙盒也就相当于关闭了应用的防护机制，因此这个选项慎用。

原文地址：

Q2: Flutter 之 交互

手势操作在 Flutter 中分为两类：

第一类是原始的指针事件（Pointer Event），即原生开发中常见的触摸事件，表示屏幕上触摸（或鼠标、手写笔）行为触发的位移行为；

第二类则是手势识别（Gesture Detector），表示多个原始指针事件的组合操作，如点击、双击、长按等，是指针事件的语义化封装。

指针事件表示用户交互的原始触摸数据，如手指接触屏幕 PointerDownEvent、手指在屏幕上移动 PointerMoveEvent、手指抬起 PointerUpEvent，以及触摸取消 PointerCancelEvent。在手指接触屏幕，触摸事件发起时，Flutter 会确定手指与屏幕发生接触的位置上究竟有哪些组件，并将触摸事件交给最内层的组件去响应。事件会从这个最内层的组件开始，沿着组件树向根节点向上冒泡分发。通过 hitTestBehavior 去调整组件在命中测试期内应该如何表现，比如把触摸事件交给子组件，或者交给其视图层级之下的组件去响应。关于组件层面的原始指针事件的监听，Flutter 提供了 Listener Widget，可以监听其子 Widget 的原始指针事件。

Listener(

  child: Container(

    color: Colors.black,

    width: 300,

    height: 300,

  ),

  onPointerDown: (event) = print("down $event"),// 手势按下回调

  onPointerMove:  (event) = print("move $event"),// 手势移动回调

  onPointerUp:  (event) = print("up $event"),// 手势抬起回调

);

Gesture 是手势语义的抽象，而如果我们想从组件层监听手势，则需要使用 GestureDetector 。GestureDetector 是一个处理各种高级用户触摸行为的 Widget，与 Listener 一样，也是一个功能性组件。

GestureDetector(// 手势识别

        child: Container(color: Colors.red,width: 50,height: 50),// 红色子视图

        onTap: ()=print("Tap"),// 点击回调

        onDoubleTap: ()=print("Double Tap"),// 双击回调

        onLongPress: ()=print("Long Press"),// 长按回调

        onPanUpdate: (e) {// 拖动回调

          setState(() {

            // 更新位置

            _left += e.delta.dx;

            _top += e.delta.dy;

          });

        },

      ),

Q3: 程序员的开源月刊《HelloGitHub》第 68 期

HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。

这里有实战项目、入门教程、黑 科技 、开源书籍、大厂开源项目等，涵盖多种编程语言 Python、Java、Go、C/C++、Swift...让你在短时间内感受到开源的魅力，对编程产生兴趣！

1、 toybox ：该项目将 200 多个常用的 Linux 命令行工具，做成一个可执行文件。从而可以让 Android 这种原本不支持 Linux 命令的系统，也得以用上 ls、find、ps 等命令。还可以用于快速构建最小的 Linux 环境

2、 the_silver_searcher ：比 ack 更快的命令行搜索工具。速度快、功能强大、使用简单，支持 Linux、Windows、macOS 操作系统，还能够整合进 Vim 和 Emacs 等编辑器

3、 WindTerm ：支持 SSH/Telnet/Serial/Shell/Sftp 的终端工具。虽然该软件完全免费，但部分代码尚未完全开源，对安全敏感的同学可以再观望下

4、 wavefunctioncollapse ：基于波函数坍缩 (WFC) 算法，实现的无限城市示例。城市里有房子、楼梯、树木、连接房屋的通道，你可以在城市中自由移动、跳跃、飞行，但不论你怎么移动都找不到尽头，因为这座城市会无限延伸

5、 NETworkManager ：管理和解决网络问题的工具。它集成了 IP 和端口扫描、WiFi 分析器、跟踪路由、DNS 查询等工具

6、 ppsspp ：能够运行在 Android 和 PC 上的开源 PSP 模拟器

7、 leocad ：用来创建虚拟乐高模型的 CAD 工具。适用于 Windows、Linux 和 macOS 系统

8、 csshake ：用 CSS 实现抖动效果

9、 MangoDB ：真正开源的 MongoDB 替代品。它底层采用 PostgreSQL 作为存储引擎，用 Go 语言实现了 MongoDB 协议，所以几乎兼容所有的 MongoDB 库，迁移起来毫无负担。如果你用不到 MongoDB 的高级功能，还受限于它的开源协议，那么这个项目可作为 MongoDB 的开源替代方案。它才刚刚起步，建议观望一段时间或做足测试再用于生产环境

10、 caddy ：用 Go 编写的轻量级 Web 服务器。它相较于 Apache、Nginx 这些知名 Web 服务器，独特点在于提供了编译好的可执行文件，实现了真正的开箱即用。无需任何配置即可拥有免费的 HTTPS、自动把 Markdown 文件转化成 HTML 等人性化的功能。如果是搭建中小型的 Web 服务，它完全够用而且省时省心

11、 croc ：可以让任意两台计算机，安全方便地传输文件和文件夹的工具。轻松实现端到端加密的跨平台文件传输，还支持多文件传输、传输中断和恢复等功能

12、 jnativehook ：获取键盘和鼠标事件的 Java 库。轻松监听按键、鼠标移动、点击等事件

13、 spider-flow ：用流程图的方式编写爬虫的平台。无需写代码就可以快速完成一个简单的爬虫

14、 greenDAO ：高性能的 Android ORM 库。拥有体积小、易于使用、支持数据库加密等特点，通过它 Android 开发者可以采用面向对象的方式操作数据库，不需要再手写和拼接 SQL 啦

15、 vue-color-avatar ：纯前端实现的矢量风格头像生成网站。可以通过搭配不同的素材，生成个性化头像。该项目使用 Vite + Vue3 开发，能够帮助前端初学者熟悉 Vue3 语法并掌握项目搭建的相关知识

16、 colorfu ：自动生成由文字/颜色/图片/纹理元素组成的壁纸

17、 pm2 ：Node.js 的进程管理工具。它容易上手操作简单，可以有效地提高 Node.js 程序运行的稳定性，支持自动重启、负载均衡、不停服务重启、性能监控等功能，多用于生产环境中管理、监控 Node.js 进程

18、 automa ：通过图形化界面拖拽功能模块，实现浏览器自动操作的扩展工具。轻松实现自动填表、截图、定时执行等操作。让浏览器自动完成预设工作流的插件，从而减少重复性操作提高效率

19、 PyWebIO ：快速构建 Web 应用的 Python 工具。通过该项目你可在不写 HTML、CSS、JS 代码的前提下，仅用 Python 快速完成一个包含数据展示、表单的小型 Web 应用页面

20、 pottery ：以 Python 的方式操作 Redis 的库。忘记那些 Redis 命令吧，只要你知道如何使用 Python 字典，那么你就会用这个库操作 Redis

21、 zulip ：完全开源的企业级即时通讯项目。后端采用 Python 语言实现性能足够强大，功能齐全相当于开源、免费的 Slack，拥有拖拽上传文件、代码高亮、Markdown 语法、应用整合、容易接入的 API 等功能，还支持 Web、PC、iOS 和 Android 主流平台，众多知名企业都在用，能够有效地提高团队沟通和办公效率。同时该项目对新手用户友好，如果你想加入一个不错的 Python 开源项目，推荐你花时间研究下它一定会有所收获

22、 webssh ：简单的 SSH 连接服务器的 Python Web 应用。该项目后端采用 Tornado Web 框架和 Python SSH 库 paramiko，前端是 TypeScript 写的命令行前端组件 Xterm.js 实现。整个项目简单还具有实用价值，可作为 Python Web 的实战项目学习

23、 django-debug-toolbar ：Django 的调试工具栏。可显示当前请求和响应有关的各种调试信息，包括耗时、SQL、配置、性能等信息

24、 hyperfine ：命令行基准测试工具。可用来查看和对比命令的耗时，支持多次运行的统计分析、结果导出等功能

25、 xcode-dev-cleaner ：用于清理各种 Xcode 的缓存数据，释放存储空间。注意是清除 Xcode 缓存数据，不是卸载 Xcode 哈

26、 toml ：更易读和易于维护的配置文件格式。如果你厌倦了 INI 的局限性、层层嵌套的 JSON 和 YAML 令人心惊胆战的缩进语法，不防给 TOML 一个机会，它支持多种数据类型、抛弃了缩进和嵌套，而且众多流行编程语言都有对应的库。TOML 已经足够成熟，绝对值得一试

27、 waka-readme-stats ：自动在 GitHub 个人首页展示编程时长的工具。该项目通过 WakaTime 记录用户在 IDE 的使用时间，统计编程时长和数据，然后采用 GitHub Action 自动获取并动态更新到 GitHub 个人首页。轻而易举地展示自己的编程时长

28、 PathPlanning ：常见的路径规划算法集合。项目包含了 Python 代码实现、运行过程动画以及相关论文

29、 howdy ：为 Linux 系统提供人脸识别解锁电脑的工具。通过电脑内置的摄像头和红外设备，实现了类似 Windows Hello 风格的身份认证，可用于登陆、锁屏、sudo 等任何需要输入密码的地方

30、 The-Open-Book ：开源的电子水墨屏阅读设备。动手能力强的同学可跟着这个项目，从焊电路板开始亲手制作出一个类 Kindle 的 4.2 英寸阅读设备

31、 fl_chart ：Flutter 图表库。它支持折线图、条形图、饼图、散点图和雷达图

32、 ugo-compiler-book ：《从头开发一个迷你 Go 语言》该书教你从头实现迷你 Go 语言，内容包含了词法解析、语法树构建、函数闭包、接口、CGO 的实现等内容

33、 archbase ：教科书《计算机体系结构基础》第三版

34、 spring-in-action-v6-translate ：《Spring 实战第 6 版》中文翻译

35、 best_AI_papers_2021 ：2021 年必看的人工智能论文列表。该项目不是简单的罗列论文，它不仅包含相关论文的代码、效果展示，还有深入的文章和讲解视频。通过学习这些前沿的人工智能论文，提前了解 AI 在未来更多可能性

36、 AnimeGANv2 ：可以将图片和视频转换成漫画风格的工具。采用的是神经风格迁移+生成对抗网络（GAN）的组合，转换速度快

感谢您的阅读，如果觉得内容还不错的话 求赞、求分享 ，您的每一次支持都将让 HelloGitHub 变得更好！

Q4: Web前端开发的核心技术有哪些

1.开发语言

HTML发展历史有二十多年，历经多次版本更新，HTML5和CSS3的出现又是一次革新，有些人认为前端开发要掌握的技能简单，不就是制作网页 嘛，其实不然，web前端需要掌握的核心语言xHTML+CSS+Java，Java作为最难的语言之一，许多编程高手也不敢妄 自菲薄自封精通。由于Java与html的差异性，以及静动态分开处理的一些好处。在大公司编写静态效果和动态效果往往是分开由不同的人完成 的。小公司因为需要压缩成本，就要求每个人会的越多越好，如果您想往项目经理发展，能懂一两门**语言，绝对是锦上添花!

2.浏览器兼容性

互联网目前主流浏览器有IE6789，Firefox，Chrome，Opera，Safari，遨游，包括国内主流的搜狗，腾讯 TT，360，the World等等;从内核上讲主要有IE的，遨游版IE，safari，firefox以及opera的，这些都是大家常见的，如果你身边有老网虫喜欢收藏 浏览器，你翻翻他的硬盘，相信几十款肯定是有的(或查看前端社区中的浏览器大全)。每种内核对代码的解析是不完全一样的，即使同样内核也可能存在很大差异，如IE和遨游版的IE。不说非主流的浏览器，就主流的浏览器要做到完全兼容，也并非易事，需要长时间的积累和测试，需要前端开发工程师对前端开发的热爱和激情。

目前移动互联网的发展趋势也不容小觑，将慢慢占据互联网的主要份额。移动互联网最突出的好处是方便和及时，试想一下，走在某地风景很好，拍下来后自 动分享给各路好友，因此手机上的浏览器兼容也看刻不容缓，现在手机上的浏览器也是纷繁复杂，主流的UCWEB，safari，IE，3G门户的，以及 symbian低端机的“残缺儿童”，包括国外流行手机我们不知道的一些浏览器，更糟糕的是这些浏览器解析因为手机硬件的不同，每个浏览器得到的结果都是 完全不同的。

3.hack技术

由于不同的浏览器对CSS的解析认识不一样，因此会导致生成的页面效果不一样，这个时候就需要针对不同的浏览器写不同的CSS，这个过程叫CSS hack。虽然我们写代码都要求按照标准，不写hack代码，但实际工作中为了兼容主流浏览器，hack代码是免不了的，所以这也应该是每个前端开发人员 必备的技能。

4.业内标准

目前Web前端开发中提到最多的就是W3C标准，这是一系列标准的集合，代表了互联网发展的方向，也代表了前端开发的一种信仰。写的代码都要100%通过标准验证，为通过标准验证而感到自豪，会有效推动互联网的快速发展。

5.开发工具

目前比较流行的是Dreamweaver， 其曾经风靡一时，到现在也没有退出历史舞台，证明DW还是有很大优势的，尤其是针对初学者，其强大的提示功能可以帮助我们很快的熟悉并掌握网页布局，但现 在更提倡的是纯手写代码，既体现技能方面的卓越，也可有效避免使用DW等工具产生的冗余代码。