双厨狂喜 | Flutter & 正则匹配 - 小册上架

3,109 阅读4分钟

张风捷特烈 的第一本 Flutter 应用层的小册现在上架了,快来看看吧。 《Flutter 实战:正则匹配应用》 , 以正则匹配为核心需求,基于 Flutter 框架构建全平台应用。

image.png


1. RegExpo 项目的由来

当 Flutter 遇到正则表达式会发生什么样的故事?在去年过年期间,到现在正好一年的光景。当时想要找一款可以输入正则表达式,来高亮匹配文本的 Android 应用 ,这样可以很好地查看正则表达式的匹配效果。web 端倒是有不少这种网页,比如 regex101 。但找了半天,在移动端竟然没有的相关软件。

当时恰逢我想要研究 Flutter 的状态管理,正愁没有合适的项目。因为简单的示例代码很难体现状态管理的价值,而过于复杂的项目在背景铺垫上又很困难。我正想设计一个复杂程度适中的,有一定交互效果的,数据状态间有一些的依赖关系应用。

于是 正则表达式对文本的高亮匹配 ,这一需求恰好映入眼帘。再设计一些相关的需求,比如 记录文本关联正则 的增删改查操作。然后 RegExpo 项目就诞生了,它是一款全平台 的正则匹配应用。支持桌面端(Widows、Macos、Linux)和移动端(Android、OS) 以及 Web 端

而本册中的内容大半是对 RegExpo 项目实现过程的记录,也可以借此讨论一下 暗黑模式不同平台界面适配 等视图表现相关的话题:

image.png

另外,还会对 状态管理 的使用及其意义进行讨论,并基于此介绍项目中数据库的使用方式,以及数据的操作的方式。期间也会讨论项目中代码层次的划分,一步步认识 MVVM 架构存在的价值。本册旨在,从本质上思考 状态管理代码架构 的作用,认识它们对项目而言,可以解决的痛点问题,而非浮于表层、流于形式

image.png


2. RegExpo 项目的表现

下面来看一下 RegExpo 在不同平台的表现,如下是 Macos 桌面端的视图表现。最主要的功能是输入正则表达式时,主内容区域的文字根据匹配效果,进行高亮显示:

2022年12月23日13-49-34.gif

应用支持暗黑模式和亮色模式的切换:

2022年12月23日14-40-06.gif


另外,也会介绍 MacOS 、Windows 中的系统托盘的使用:

image.png


Web 在也有相同的界面展示效果和交互功能:

image.png


同时在视图界面上也适配了移动端,如下以 Android 移动端为例,iOS 中界面表现一致:

移动端 - 亮移动端 - 暗
image.pngimage.png

除此之外,还有 记录关联正则 两大需求。这两者对应的数据存放在 sqlite 数据库中,所以支持对数据的 增删改查 操作:

image.png

如下所示,记录面板选择记录后,会更新中间内容文字信息;另外每个记录对应着若干个 关联正则,在记录切换时,会影响关联正则面板的数据;关联面板中选中对于的正则表达式,又会影响输入框文字,进而通过更新正则影响中间内容的高亮。

2022年12月23日14-09-46.gif

匹配记录关联正则 这三个需求间就形成了比较复杂的数据依赖关系。而如何维护这些数据状态就是一件值得说道的事。


3. 关于 RegExpo 的开源

RegExpo 项目目前已经处于开源状态,大家可以下载项目运行查看效果,该项目会独立于小册,持续维护。也就是说这本小册阐述的是 RegExpo 从无到有的过程,在这个过程中,引发的一系列思考和注意点都会在本册中进行讨论。所以这本小册是 RegExpo 的萌生和发芽的起点,而非开花结果的终点。

image.png

目前 RegExpo 的功能还是比较少的,在今后会进行一些拓展。所以暂时还未正式宣布开源,只是在 github 中公开仓库,提供体验的机会。后面随着功能的完善,会正式构建应用产物,提供使用。


4. 本册与正则表达式

当然,本册并不是全是介绍 Flutter 对项目的构建,还有一小半的正则模块。在正则篇中将会全面介绍正则的语法,其中会结合应用,通过交互式的学习来介绍正则匹配。让我们 看得见 正则表达式的作用,可以让过程变得直观和有趣。

正则表达式.png


最后,还会探索文本对于 多个正则表达式 的高亮匹配,实现如下的代码高亮组件效果:

代码高亮+行号代码高亮+行号
image.pngimage.png

希望通过本册的学习,大家可以对正则表达式有新的认知;对 Flutter 的状态管理和代码结构产生自己的理解,并将其运用到日常开发之中。小册中如有错误、不合理之处或建议想法,欢迎在小册评论区这留言指正,感谢大家的支持 ~