flutter模版,flutter 文档

开源精粹（二）！22个实用、有趣的开源项目

作为一名开源爱好者，发掘优秀的开源项目是一件非常有趣的事情。在第一期中，我分享了单页个人网站模板、组装式 Flutter 应用框架、PHP 客户端库、Java 诊断工具等一些实用的库和工具。本期依旧会为大家分享一些前端、后端、移动开发的相关工具，希望你能“淘”到适合自己的工具。

1.Vue-EasyTable

Vue-EasyTable 是一款基于 Vue2.x 的 table 组件，具备自适应、表头与列固定、自定义单元格样式、自定义 Loading 等功能。

2.React-Calendar

这是一款具备原生日期格式的日历组件。它不依赖 Moment.js，支持日期选择范围，涵盖了各国语言，开箱即用。

3.Matter

CSS 实现的 Material 组件合集项目，作者已将部分作品开源，效果可以在 CodePen 上查看。

4.Revery

Revery 是一款用于构建高性能、跨平台桌面应用的框架。它类似于加速版的原生 Electron，除了拥有类似 React / Redux 的库，还具备 GPU 加速渲染功能，其内置的编译器速度也相当快。

5.Web Accessibility Guide

这是一个精选了 Web 可访问性贴士、技巧和最佳实践的开源项目，你将会学习到一些改善 Web 可访问性的实用做法。

1.SOFAJRaft

SOFAJRaft 是蚂蚁金服开源的生产级 Java Raft 算法库，它基于 Raft 一致性算法的生产级高性能 Java 实现，支持 MULTI-RAFT-GROUP，适用于高负载低延迟的场景，易于使用。

2. Dragonwell

阿里开源了 OpenJDK 发行版 Dragonwell，它提供长期支持，包括性能增强和安全修复。在数据中心大规模 Java 应用部署情况下，可以大幅度提高稳定性、效率以及性能。

3.Lawoole

Lawoole 是一款基于 Laravel 和 Swoole 的高性能 PHP 框架。它兼具了 Laravel 的特点，还解决了其功能背后的性能问题。同时，你还能感受到与 Laravel 一样的编码体验。

4.AntNest

AntNest 是一个简洁、快速的异步爬虫框架。它仅有 600 行代码，基于 Python 3.6+.

5.PHP-Awesome

这个仓库汇集了 PHP 优秀的资源，供你查询和参考。

1.FlutterBoost

FlutterBoost 是闲鱼开源的新一代 Flutter-Native 混合解决方案。它能够帮你处理页面的映射和跳转，你只需要关心页面的名字和参数即可。

2.MyLayout

MyLayout 是一套 iOS 界面视图布局框架，可谓 iOS 下的界面布局利器。它集成了 iOS Autolayout、Size Classes、Android 的 5 大布局体系、HTML/CSS 的浮动定位技术以及 Flex-Box 和 Bootstrap 框架等主流的平台的界面布局功能，并提供了一套简单、完备的多屏幕尺寸适配的解决方案。

3.SegementSlide

SegementSlide 是一个 iOS UI 库，它具备完整的滑滚及切换组件，旨在解决多层 UIScrollView 嵌套滚动的问题。

1.DevHub

DevHub 是一款跨平台的 GitHub 通知管理客户端，支持 Android、 iOS、网页和桌面上使用，帮助你便捷的接收 GitHub 各类通知。

2.Reqman

Reqman 是一个帮助后端工程师进行 API 测试的工具，同时也是一个基于 Node.js 的爬虫工具。

3.FreeCodeCamp

说到 FreeCodeCamp，或许大家不会陌生，而这个项目就是他们建立的开源课程和相应的代码库。网站提供了 6 大认证课程，也涉及了全栈开发认证。如果你感兴趣，不妨了解下。

4.Gitter

Gitter 是 GitHub 小程序客户端，作者采用 Taro 框架 + Taro UI 进行开发，而小程序内数据则来自 GitHub Api V3.

5.Awesome Podcasts

这个项目收集了各类实用的播客，涵盖了主流的编程语言，希望对你提升技术水平有所帮助。

6.编程图书大全

书籍不光能在你迷茫的时候，给予你答案，还能在你提升技能的时候，给予你帮助。这个仓库收集了众多编程图书，涉及主流编程语言、人工智能、算法、Linux、大数据等。看看，有木有你需要的。

7.VS Code Netease Music

很多开发者喜欢边写代码，边听音乐，VS Code Netease Music 这个插件就能满足你在 VS Code 上听歌的愿望。它使用 Webview 实现，不依赖命令行播放器。

Star-Battle

Star-Battle 是一款使用 JavaScript ES6、Canvas 开发的飞船射击类 游戏 。来 Enjoy 吧。

注：

如需转载，烦请按下方注明出处信息，谢谢！

相关问答

Q1: nuxtjs--ssr web界面模板

由于最近工作内容大部分时间转移到了android 和 flutter的研发上，web端的内容很久没有记录和更新了，还是需要把前面了解过的vuejs ssr方面的内容记录以下。

3、具体操作见layout/default

demo地址：

Q2: 补齐短板-开源IM项目OpenIM关于初始化/登录/好友接口文档介绍

OpenIM文档方面的建设一直远远落后于开发， 也经常被开发者诟病，在接下来一周的时间里，我们重点补齐文档，让开发者更轻松接入。由于app sdk底层都是go来实现，所以本文先写一个模板和框架，在接下来的时间里，会有iOS、Android、Flutter、Uniapp、jssdk同事补充具体的细节，并更新到官网


## 初始化及登录

初始化并登录成功回调，是正常使用OpenIM 服务的前提

| SDK              | 描述                                                        |

| :--------------- | :----------------------------------------------------------- |

| [Login]          | 登录，如果登录成功，必须退出登录才能再次执行登录操作        |

| [Logout]        | 退出登录                                                    |

| [GetLoginStatus] | 获取登录状态， 101：登录成功，  102：登陆中，  103：登录失败，  201：退出登录 |

| [GetLoginUser]  | 获取当前登录用户UserID，此时用户登录状态未知                |

| [initSDK]        | 初始化 SDK，整个生命周期执行一次，登录相关监听介绍如下：    |

OpenIM和调用方利用监听回调机制，和调用方信息互通，把登录状态通过异步回调方式即时传递给调用方，确保信息及时传达而不阻塞其主线程。

## 监听说明

| 登录相关监听        | 回调描述                                                    |

| :------------------- | :----------------------------------------------------------- |

| [OnConnecting]      | 连接中，在连接后台时（包括重连）回调                        |

| [OnConnectSuccess]  | 连接成功                                                    |

| [OnConnectFailed]    | 连接失败，如果因网络连接失败会重连，其他情况不重连          |

| [OnKickedOffline]    | 被踢下线，可能由于多端登录策略所致，或后台管理员强制其退出登录 |

| [OnUserTokenExpired] | 检测token过期回调                                            |

## 调用流程

OpenIM调用流程分为如下几步：

（1）初始化：在整个生命周期执行一次

（2）设置监听：包括群组监听，好友监听，用户监听，消息及会话监听，这些监听会在其他章节中描述

（3）登录：登录回调成功后再执行其他操作，否则可能出现资源加载未完成的错误

（4）收发消息等操作；

## 好友管理相关接口

OpenIM提供好友关系托管，比如好友申请，同意，以及好友获取等，OpenIM在客户端本地存储好友关系，并结合消息通知机制，按需调用后台接口，确保本地和服务端数据一致。同时利用监听机制，把数据变化通过异步回调传达调用方。OpenIM在收发消息时，默认不检查好友关系，您可以在配置文件中自行修改。OpenIM好友关系是双向关系，A添加B为好友后，则A在B的好友列表中，B也在A的好友列表中，A删除B，仅仅只是删除A的好友列表，而B的好友列表不受影响。同样，黑名单也类似。

| SDK                            | 描述                                                    |

| :----------------------------- | :------------------------------------------------------- |

| [GetDesignatedFriendsInfo]    | 获取指定好友的信息                                      |

| [GetFriendList]                | 获取所有的好友列表                                      |

| [SearchFriends]                | 通过关键词搜索好友                                      |

| [CheckFriend]                  | 检查是否好友关系                                        |

| [AddFriend]                    | 发起添加好友请求                                        |

| [SetFriendRemark]              | 设置好友备注                                            |

| [DeleteFriend]                | 删除好友（单向删除）                                    |

| [GetRecvFriendApplicationList] | 获取我收到的添加好友申请列表                            |

| [GetSendFriendApplicationList] | 获取我发起的的添加好友申请列表                          |

| [AcceptFriendApplication]      | 同意好友申请                                            |

| [RefuseFriendApplication]      | 拒绝好友申请                                            |

| [SetFriendListener]            | 设置好友、黑名单相关监听，用于UI层实时感知数据变化并刷新 |

## 监听说明

好友监听器的作用：调用方设置好友监听，好友关系的变化会通过OpenIM消息机制实时同步到需要感知的在线用户，包括用户的其他端，调用方根据回调事件做相关的数据处理。

比如用户B在Android端添加用户A为好友，用户A（所有在线的终端）收到B的好友申请，则A调用GetRecvFriendApplicationList获取收到的好友申请列表，刷新界面。同时，用户B在线其他的终端比如PC端也会收到通知，B调用GetSendFriendApplicationList获取发起的好友申请列表，刷新B发出的好友申请列表。

当然也可以利用回调的参数信息，做增量处理，而不用获取全量的好友申请列表。

以用户B申请添加用户A为例

| 好友及黑名单监听              | 描述                                                |

| :---------------------------- | :--------------------------------------------------- |

| [OnFriendApplicationAdded]    | 好友申请列表增加，主动发起者和被动添加者会收到      |

| [OnFriendApplicationDeleted]  | 好友申请列表删除，主动删除者会收到                  |

| [OnFriendApplicationAccepted] | 好友申请被同意，主动发起者和被动添加者会收到        |

| [OnFriendApplicationRejected] | 好友申请被拒绝，主动发起者和被动添加者会收到        |

| [OnFriendAdded]              | 好友增加，用户好友增加时会收到                      |

| [OnFriendDeleted]            | 好友删除，用户好友减少时会收到                      |

| [OnFriendInfoChanged]        | 好友信息改变，用户好友信息（比如昵称等）改变时会收到 |

| [OnBlackAdded]                | 黑名单增加，用户黑名单增加时会收到                  |

| [OnBlackDeleted]              | 黑名单移除，用户黑名单减少时会收到                  |

## 项目介绍

OpenIM继续领跑开源IM领域，在广大开发者的支持下，目前github star突破9k。在数据泄露、信息外泄、隐私滥用的时代，IM私有化部署需求旺盛。其中，政企协同办公对IM需求猛增，随着信息化技术的迭代升级以及信创产业加速落地和实践，协同办公软件的发展潜力将进一步被释放。“安全可控“逐步成为第一要素。对于社区交友领域，暴露出的隐私安全问题越来越多，私有化部署确保用户数据不泄露。

OpenIM从服务端到客户端SDK开源即时通讯（IM）整体解决方案，可以轻松替代第三方IM云服务，打造具备聊天、社交、办公功能的app。

github地址：

开发者中心：

## OpenIM团队

创始团队来自资深IM技术团队，我们致力于用开源技术创造服务价值，打造轻量级、高可用的IM架构，开发者只需简单调用 SDK，即可在应用内构建多种即时通讯及实时音视频互动场景。OpenIM优势：开源，安全，可靠，低成本。对于信息安全重视的电子政务，企业协同办公，OpenIM都是非常好的选择。

从公司成立之初就将“开源”作为核心战略来推进，开源充分体现了自由、平等、分享的互联网精神。

OpenIM邀请全球技术极客参与技术优化，让开发者轻松集成，让每一个应用都具备IM功能，同时考虑企业的接入成本、服务器资源以及最重要的数据安全性和私密性。

Q3: 2021-12-07 Flutter iOS快捷键入短信重复2次解决方案

问题场景: 在登录界面获取验证码短信时点击 键盘上方点击快捷输入短信验证码 会输入两次验证码.

解决方案1：

限制输入框输入的长度 ，短信验证几位就限制成几位.

快捷有效.但如果后期更换短信模板位数变化会有影响.

maxLength:[验证码位数]

解决方案2：

判断重复的验证码

定义 TextEditingController

TextEditingController _controller = TextEditingController();

造成原因: ??? 网上说出发了原生 UITextFieldTextDidChangeNotification 的问题导致的.

Q4: 全栈项目开发3：应用国际化和权限处理

对于现在的APP应用，国际化需求并不高，但是作为一项有用的功能，我们还是按部就班地去实现它，由于还未完成全局状态管理和全局事件总线，暂时使用了一个全局变量Locale去定义，因此要完成切换就需要手动修改变量值后重启应用（热更新是不可以的），目前仅实现简体中文和美式英文两种语言

1.引入国际化需要的包。

2.在Flutter节点下添加generate，可以在重启或者热更新时实时更新翻译文件。

3.在根目录下增加l10n.yaml文件，用于配置实时更新的内容。

4.在根Widget的MaterialApp中增加如下配置，大多都是来自第三步自动更新的内容，如果编译器不能自动识别，可以手动引入如下包：import 'package:flutter_gen/gen_l10n/app_localizations.dart';

5.编译翻译文件，在lib/I10n的目录下新增app_zh.arb和app_en.arb两个文件（如果要具体到国家代码可以新建为app_zh_CN.arb和app_en_US.arb）,文件采用Json的语法，Vscode等编辑器也有对应的语法插件，至于翻译语法，大家可以自行了解，限于篇幅，仅做常用的展示。

注：app表示变量名，后续可以使用AppLocalizations.of(context)!.app调用，语言切换时就会按照对应的翻译文件进行展示。

@app表示对app变量的描述，是给翻译人员看的，与代码运行无关。

模板语句，有时候需要实现类似“倒计时20秒”只有数字变化的语句，此时就形成了模板插值语句，在模板上插入数字，上述hit6即实现了这样一个语法，最终会被翻译为一个函数，读者可自行尝试。

关于iOS平台

尝试过国际化的读者可能发现在iOS平台无法顺利完成切换（上述全局变量方式和使用全局状态管理的实现方式有本质区别，注意区分），这是因为iOS应用程序有一套自建的语言环境管理机制，所以使用上面的方式适配国际化对于iOS应用程序是无效的，为了让iOS应用程序也能支持国际化，还需要在原生iOS工程中进行额外的配置。 使用Xcode打开Flutter项目的iOS原生工程，切换到工程面板，然后在Localization选项配置中添加中文支持即可。

在Android/ios平台权限处理是绕不开的内容，本应用作为demo应用，会尽可能地多索要权限，但是设计为仅在用户安装后第一次打开时索取一次，后续不再主动索取，仅在用户需要使用相关功能时引导用户给予权限即可。权限管理的实现相对简单，可以引用permission_handler包，并加入以下代码，在APP启动时调用一次requestAllPermission函数即可。

下章内容 ： 主题切换，欢迎页，引导页，

小破站同名，同步文章且定时直播编程，有兴趣可以移步

Q5: Flutter入门-Dart面向对象原理

Dart作为高级语言，支持面向对象的很多特性，并且支持基于mixin的继承方式，基于mixin的继承方式是指：一个类可以继承自多个父类，相当于其他语言里的多继承。所有的类都有同一个基类Object，这和特性类似于Java语言，Java所有的类也都是继承自Object，也就是说一切皆对象。

Dart 是一门面向对象的语言, 全部的类都是继承自 Object , 除了支持传统的 继承、封装、多态 , 还有基于组合(Mixin-based)的继承特性

类型推导(var/final/const)

var

final和const的区别

3.非零即真（ ）

4.字符串

5.集合

Dart中变量初始值为null，即使是int类型也可以是null（java中int默认是0， boolean默认是false）； Dart支持自识别，可以是用var定义变量，也可以直接指定具体类型； final或者const都可修饰不可变的变量，final变量只能赋值一次，const是编译时常量。

int和double是num子类，没有float类型； 支持字符串模板，用${expression}的方式来实现字符串效果，类似如字符串拼接； String可以使用单引号或者双引号； Dart没有数组，只有列表； 其中List，Set，Map不是抽象接口，是具体实现类，可直接使用； Map的key没有指定类型，key类型不一致不会报错；key不能相同，但是value可以相同，value可以为null。 var name = 'Tom';

方法也是对象，方法可赋值给一个变量； 如果方法的参数是解构出来的可以通过 @required 注解标注为必填 const Scrollbar({Key key, @required Widget child})； 支持可选参数，可选命名参数用{}包围，可选位置参数写在最后并且使用[]包围 String say(String from, String msg, [String device])； 支持默认参数 void enableFlags({bool bold = false, bool hidden = false}) {…}； 以_开头的方法都是私有的。 void main() {

支持闭包，闭包能够访问外部方法内部的局部变量

1.空替换?? expr1 ?? expr2，如果expr1是non-null，返回其值。否则执行expr2并返回其结果； 2.条件成员访问？.P?.y = 4; 如果p是non-null,则设置y的值等于4； 3.类型判定操作符（as，is，is!）； 4.级联操作，可以在同一个对象上连续调用多个函数以及访问成员变量；

和java不同的是，Dart可以抛出任意类型的对象； 程序不会强制要求开发中处理异常，但若发生异常，程序会中断； 其中异常主要分为Error和Exception两种类型。

创建对象可以不使用new关键字； Dart中没有public，private，protected这些关键字； 没有interfaces关键字，每一个类都是一个接口。我们可以用抽象类来类比java中的接口； Dart把多重继承的类叫做Mixins。

支持语法糖 Point(this.x, this.y)； 每个实例变量都会自动生成一个getter方法，Non-final变量还会自动生成一个setter； 命名构造函数，使用命名构造函数可以为一个类实现多个构造函数，也能更加清晰的表明你的意图；

断言是如果条件表达式不满足则停止代码执行； 断言只在检查模式下运行有效，如果在生产模式下运行则不会执行。

Dart 以两种模式运行： Dart 1.x 有生产模式和检查模式两种模式， Dart 2.x 中移除了检查模式。

注：建议在开发/测试模式中使用 检查模式 运行 Dart VM ，因为它会添加警告和错误以帮助开发和调试过程；选中的模式会强制执行各种检查，例如类型检查等。

dart标识符可以包括字符和数字，但不能以 数字开头 。

Dart 是一种面向对象的编程语言。

代码说明：定义了一个类 TestClass ，这个类拥有一个方法 disp() ，方法可以实现在终端打印字符串 Hello Dart! ，使用 new 关键字创建类的对象，该对象调用方法 disp() 。

关于dart的学习还有很多；我列出如下： Flutter高级工程师进阶学习资料；需要可以私信我。发送“核心笔记”或“手册”，即可领取资料！