Flutter 正则匹配实战:视图篇 - 构建可交互的正则应用

目录

一、需求分析

1. 界面分析

2.事件分析

3.数据分析

二、代码实现

1. 程序入口和 Logo

2.解析器与主体内容：ContentTextPanel

3. 头部栏: HomeTopBar

4. 主界面构建

三、关于一些细节的考究

1. 组件封装和函数封装

2. 关于视图更新问题

3. 让回调函数独立存在

---

如果说正则是魔法，那就只能用魔法打败魔法。本章，我们将在桌面平台，搭建如下的正则匹配应用。在输入正则表达式时，中间部分的文字会随之高亮。这里使用 macos 平台进行演示说明，其他平台表现一致。

---

一、需求分析

对于一项需求而言，我们将按照 界面构建、事件触发 和 数据维护 三个维度去分析。通过对这三者的分析，有助于让我们知道 想干嘛 和 该干嘛 。磨刀不误砍柴工，分析是实现需求很重要的环节。

---

1. 界面分析

小册课程有其特殊性，我打算循序渐进地对界面进行迭代，根据需求的逐步增加而不断完善，这样的 梯度 更有助于读者学习。现在来完成最简单，也是最核心的需求：

输入正则表达式，内容区文字可以高亮匹配。

界面中主要包含两个区域：头部栏 和 内容展示区。上下排列用 C