Flutter 正则匹配实战:视图篇 - 分组面板与交互

目录

一、匹配需求整体分析

1. 数据如何维护

2. 状态类的定义

3.事件的定义

二、 MatchBloc 与正则匹配逻辑

1. MatchBloc 类的实现

2.正则解析类 RegexParser

3.正则解析逻辑

三、视图层处理

1. 主面板界面优化

2.匹配面板的处理

3. 关于悬浮激活的状态

4. 底部栏匹配信息

四、 正则的配置信息切换

1. 通过 watch 观察变化

2. 切换配置事件

3. 重新构建的条件与 select

4.正则四个配置项作用

---

首先，大家可以自己实现一下：长按删除按钮，弹出 删除所有数据 的对话框，并执行删除所有数据的功能。这样方便清空测试数据，在这种场景下 DeleteMessagePanel 组件可以抽离一些配置属性，以便复用。

---

一、匹配需求整体分析

现在，所有的正则内容基本上介绍完毕，现在来好好整理一下匹配需求的流程。包括交互过程中的数据依赖关系，事件触发时数据的变化情况。如下所示，新增了 匹配信息面板 和 底部工具条。

其中匹配信息面板中包括所以的匹配结果，以及匹配结果中的分组情况；在悬浮时，可以在内容面板中看到对应的背景高亮。底部的工具条，左侧由于控制正则的四个配置项；右侧显示匹配的个数和组信息。