张风捷特烈 的第一本 Flutter 应用层的小册现在上架了，快来看看吧。 《Flutter 实战：正则匹配应用》 , 以正则匹配为核心需求，基于 Flutter 框架构建全平台应用。
1. RegExpo 项目的由来
当 Flutter 遇到正则表达式会发生什么样的故事？在去年过年期间，到现在正好一年的光景。当时想要找一款可以输入正则表达式，来高亮匹配文本的 Android 应用 ，这样可以很好地查看正则表达式的匹配效果。web 端倒是有不少这种网页，比如 regex101 。但找了半天，在移动端竟然没有的相关软件。
当时恰逢我想要研究 Flutter 的状态管理，正愁没有合适的项目。因为简单的示例代码很难体现状态管理的价值，而过于复杂的项目在背景铺垫上又很困难。我正想设计一个复杂程度适中的，有一定交互效果的，数据状态间有一些的依赖关系应用。
于是 正则表达式对文本的高亮匹配 ，这一需求恰好映入眼帘。再设计一些相关的需求，比如 记录文本 和 关联正则 的增删改查操作。然后 RegExpo 项目就诞生了，它是一款全平台 的正则匹配应用。支持桌面端(Widows、Macos、Linux)和移动端(Android、OS) 以及 Web 端。
而本册中的内容大半是对 RegExpo 项目实现过程的记录，也可以借此讨论一下 暗黑模式、不同平台界面适配 等视图表现相关的话题：
另外，还会对 状态管理 的使用及其意义进行讨论，并基于此介绍项目中数据库的使用方式，以及数据的操作的方式。期间也会讨论项目中代码层次的划分，一步步认识 MVVM 架构存在的价值。本册旨在，从本质上思考 状态管理 和 代码架构 的作用，认识它们对项目而言，可以解决的痛点问题，而非浮于表层、流于形式。
2. RegExpo 项目的表现
下面来看一下 RegExpo 在不同平台的表现，如下是 Macos 桌面端的视图表现。最主要的功能是输入正则表达式时，主内容区域的文字根据匹配效果，进行高亮显示：
应用支持暗黑模式和亮色模式的切换：
另外，也会介绍 MacOS 、Windows 中的系统托盘的使用：
在 Web 在也有相同的界面展示效果和交互功能：
同时在视图界面上也适配了移动端，如下以 Android 移动端为例，iOS 中界面表现一致：
| 移动端 - 亮 | 移动端 - 暗 |
|---|---|
|
|
除此之外，还有 记录 和 关联正则 两大需求。这两者对应的数据存放在 sqlite 数据库中，所以支持对数据的 增删改查 操作：
如下所示，记录面板选择记录后，会更新中间内容文字信息；另外每个记录对应着若干个 关联正则，在记录切换时，会影响关联正则面板的数据；关联面板中选中对于的正则表达式，又会影响输入框文字，进而通过更新正则影响中间内容的高亮。
匹配、 记录 和 关联正则 这三个需求间就形成了比较复杂的数据依赖关系。而如何维护这些数据状态就是一件值得说道的事。
3. 关于 RegExpo 的开源
RegExpo 项目目前已经处于开源状态，大家可以下载项目运行查看效果，该项目会独立于小册，持续维护。也就是说这本小册阐述的是 RegExpo 从无到有的过程，在这个过程中，引发的一系列思考和注意点都会在本册中进行讨论。所以这本小册是 RegExpo 的萌生和发芽的起点，而非开花结果的终点。
目前 RegExpo 的功能还是比较少的，在今后会进行一些拓展。所以暂时还未正式宣布开源，只是在 github 中公开仓库，提供体验的机会。后面随着功能的完善，会正式构建应用产物，提供使用。
4. 本册与正则表达式
当然，本册并不是全是介绍 Flutter 对项目的构建，还有一小半的正则模块。在正则篇中将会全面介绍正则的语法，其中会结合应用，通过交互式的学习来介绍正则匹配。让我们 看得见 正则表达式的作用，可以让过程变得直观和有趣。
最后，还会探索文本对于 多个正则表达式 的高亮匹配，实现如下的代码高亮组件效果：
| 代码高亮+行号 | 代码高亮+行号 |
|---|---|
|
|
希望通过本册的学习，大家可以对正则表达式有新的认知；对 Flutter 的状态管理和代码结构产生自己的理解，并将其运用到日常开发之中。小册中如有错误、不合理之处或建议想法，欢迎在小册评论区这留言指正，感谢大家的支持 ~
作者：张风捷特烈
链接：https://juejin.cn/post/7189173938600017977
网友评论