在是一篇优雅的 ~ MVI状态管理文章

我之前喜欢用 Jetpack Compose 开发，个人很喜欢 MVI 架构，代码相当优雅~《优雅永但是时》

Riverpod + MVI：架构没有最好的，只有合适的

说到主要思想，状态是唯一真相来源

MVI 三要素

• Model不可变的数据类，包含页面所有状态
• View纯展示层。只负责渲染 Model
• Intent使用者操作
• Notifier处理 Intent，更新 Model

AI 提示词调整器实现思路

需求概述 & 使用者痛点 🚩

传统实现往往面临以下痛点：

• 状态碎片化：多个 State 变量散落在不同 Widget 中，导致 UI 与业务状态不一致。
• 代码冗余：每个页面都需要写一套 setState异步处理和错误捕获逻辑。
• 难以测试：业务逻辑与 UI 紧耦合，单元测试几乎不可能。
• 内存泄漏风险：手动管理 Stream/Timer 时容易忘记取消。
• 可维护性差：功能迭代时修改散落的代码会引入新的 bug。

功能需求：

1. 切换 Tab
2. 选择 API 配置和模板
3. 输入原始提示词
4. 流式接收调整结果
5. 自动保存历史记录并持久化选择项

传统做法： + 个状态变量 + 行 StatefulWidget。

MVI + Riverpod 做法： 1 个 State 类 + 1 个 Notifier 类。

再看第一步先，定义 Model

// lib/features/optimization/domain/entities/optimization_state.dart
enum OptimizationStatus {
idle。// 空闲
loading,// 准备中
streaming,// 流式接收中
success,// 成功
error // 错误
}
class OptimizationState {
final OptimizationStatus status;final String originalPrompt;// 原始输入
final String optimizedPrompt;// 调整结果
final String errorMessage;按理说，final String currentTab;其实，// 当前 Tab
final String?selectedApiConfigId;final String?selectedTemplateId;其实，const OptimizationState({
this.status = OptimizationStatus.idle,this.originalPrompt = '',this.optimizedPrompt = ''。this.errorMessage = '',this.currentTab = 'userOptimize',this.selectedApiConfigId,this.selectedTemplateId,});// 🎯计算属性：是否正在处理
bool get isProcessing => status == OptimizationStatus.loading || status == OptimizationStatus.streaming;// 🎯计算属性：是否有结果
bool get hasResult => optimizedPrompt.isNotEmpty;// ✅不可变更新：创建新实例
OptimizationState copyWith({
OptimizationStatus?status,String?originalPrompt,String?optimizedPrompt,String?errorMessage,String?currentTab,String?selectedApiConfigId,String?selectedTemplateId。}) {
return OptimizationState(
从status来看，status?，this.status,originalPrompt: originalPrompt?，话说回来，this.originalPrompt。optimizedPrompt: optimizedPrompt?，this.optimizedPrompt,errorMessage: errorMessage?，this.errorMessage,currentTab: currentTab?，this.currentTab,selectedApiConfigId: selectedApiConfigId?，this.selectedApiConfigId,selectedTemplateId: selectedTemplateId?，this.selectedTemplateId,);}
}

关键点：

1. ✅ 所有状态集中在一个类，避免不一致。
2. ✅ 完全不可变，配合时间旅行调试。
3. ✅ 使用计算属性，让 UI 不再关心业务细节。
4. ✅ 枚举保证类型安全，杜绝拼写错误。

至于接下来，定义 Intent & Notifier

// lib/features/optimization/presentation/providers/optimization_provider.dart
class OptimizationNotifier extends StateNotifier {
final OptimizePromptUseCase _useCase;final SettingsRepository _settingsRepo;
StreamSubscription?
_streamSubscription;OptimizationNotifier
: super);不过，// ─── Intent : 切换 Tab ───
void switchTab {
final templateId = _settingsRepo.getSelectedTemplateId;state = state.copyWith(
currentTab: type。selectedTemplateId: templateId,");}
// ─── Intent :选择 API 配置 ───
void selectApiConfig {
state = state.copyWith;_settingsRepo.saveSelectedApiConfigId;}
// ─── Intent :选择模板 ───
void selectTemplate {
state = state.copyWith;_settingsRepo.saveSelectedTemplateId;}
// ─── Intent :执行调整 ───
Future optimize async {
// 参数校验 – 使用者痛点 #1：空输入未捕获导致崩溃
if .isEmpty) {
&tbnsp            // 把错误写进统一状态，让 UI 一致展示错误信息
(state = state.copyWith(
text=OptimizationStatus.error。

Oops re is some broken content due to truncation. Need to rewrite properly.

Let's continue from where we left off after copy of notifier code but ensure it's correct and complete.

We'll write full notifier code again clearly.

Continue after previous snippet:

We'll provide rest of notifier code with proper formatting and n continue sections.

Let's rewrite notifier block fully:

I previously loved developing with Jetpack Compose and was especially fond of MVI architecture—its code felt incredibly elegant. 《优雅永但是时》.

至于主要思想，状态是唯一真相来源

• M : 一个不可变的数据类，承载页面所有状态。
• I : 使用者行为——点击、输入、滑动等。
• E : 接收 Intent 并更新 Model。
• P : 完全渲染 Model 的纯 UI 层。

AI 提示词调整器实现思路 &使用者痛点分析 🚩

常见痛点

• 碎片化状态: 多个 `bool isLoading`、`String errorMsg` 分散在不同 `StatefulWidget` 中，导致 UI 与业务数据不一致。
• 冗余代码: 每个页面都要写 `setState{})`、异步 try/catch、加载动画等重复逻辑。
• 难以测试: UI 与业务紧耦合。使得单元测试几乎不可能，只能靠 `testWidgets` 手工交互。
• 资源泄漏: 手动管理 `StreamSubscription`/`Timer` 时忘记取消，引起内存泄漏或异常。
• b缺乏可维护性: 因为功能迭代，需要改动散落在多个文件里的同一套逻辑。

需求概览 :

* 切换 Tab * 在每个 Tab 下选择 API 配置 & 模板 * 输入原始提示词 * 流式接收调整结果 * 自动保存历史记录并持久化上次的选择

---

// lib/features/optimization/domain/entities/optimization_state.dart
enum OptimizationStatus {
idle。// 空闲
loading,// 准备中
streaming,// 流式接收中
success,// 成功
error      // 错误
}
class OptimizationState {
final OptimizationStatus status;final String originalPrompt;// 原始输入
final String optimizedPrompt;// 调整结果
final String errorMessage;话说回来，final String currentTab;// 当前 Tab
final String?selectedApiConfigId;final String?selectedTemplateId;const OptimizationState({
this.status = OptimizationStatus.idle,this.originalPrompt = '',this.optimizedPrompt = ''。this.errorMessage = '',this.currentTab = 'userOptimize',this.selectedApiConfigId,this.selectedTemplateId,});// 🎯计算属性 – 是否正在处理
bool get isProcessing =>
status == OptimizationStatus.loading ||
status == OptimizationStatus.streaming;// 🎯计算属性 – 是否已有结果
bool get hasResult => optimizedPrompt . isNotEmpty;// ✅不可变更新 – 创建新实例
OptimizationState copyWith({
OptimizationStatus?status,String?originalPrompt,String?optimizedPrompt,String?errorMessage,String?currentTab,String?selectedApiConfigId,String?selectedTemplateId,}) {
return OptimizationState(
status : status?，this . status,original Prompt : original Prompt?，this . original Prompt,optimized Prompt :optimized Prompt?，this .optimized Prompt,error Message :error Message?，this .error Message,current Tab :current Tab?，this .current Tab,selected Api Config Id :selected Api Config Id?，话说回来，this .selected Api Config Id。selected Template Id :selected Template Id?，this .selected Template Id,);
} }

关键点 :

1. ✅ 所有状态集中在一个类。不会出现 “UI 显示 loading，却仍然报错” 的不一致情况。其实，
2. ✅ 完全不可变 → 每次更新都生成新对象。配合 Riverpod 的快照机制，实现时间旅行调试。话说回来，
3. ✅ 使用计算属性 把衍生信息从 State 中抽离出来让 UI 更简洁。
4. ✅ 枚举 保证类型安全，再也不会出现 `'loadding'` 拼写错误。

// lib/features/optimization/presentation/providers/optimization_provider.dart
class OptimizationNotifier extends StateNotifier<OptimizationState> {
final OptimizePromptUseCase _useCase;final SettingsRepository _settingsRepo;StreamSubscription<String>?_streamSubscription;OptimizationNotifier
: super);// ── Intent ：切换 Tab ──
void switchTab{
final templateId=_settingsRepo.getSelectedTemplateI d;state=state.copyWith(
currentTab:type,selectedTemplat eI d:templateI d
);}
// ── Intent ：选择 API 配置 ──
void selectApiConfig{
state=state.copyWith;_settingsRepo.saveSelectedA piCon figI d;}
// ── Intent ：选择模板 ──
void selectTemplate{
state=state.copyWith;_settingsRepo.saveSelectedTempla teI d;}
// ── Intent ：执行调整 ──
Futurea optimize async{
// 🎯 参数校验 — 使用者痛点 #1 ：空输入未捕获导致崩溃
if.isEmpty){
state=state.copyW ith(
status的观点是。OptimizationStatu s.error,errorMessage:'🔴 Prompt cannot be empty',);return，}
// 🛑️ Cancel any previous stream to avoid race conditions
await _streamSubscription?.cancel，_streamSubscription=null;// 📈 Update UI → loading
state=state.copyW ith(
status的观点是，OptimizationStat us.loading。originalProm pt:originalPrompt,optimizedPro mpt:'',errorMessag e:'',);try{
final stream=_useCase.execute(
originalProm pt:originalPrompt,apiConfi gI d:state.selecte dApiConfi gI d!,templateI d:state.selecte dTempla teI d!,type:s tate.cur rentTa b,);state=state.copyW ith;_streamSubscription=stream.listen(
{
/// 累积流式内容；只触发一次 State 更新 → 渲染更高效
state=state.cop yWith(
optimizedP rompt:state.optimizedPr ompt+chunk,);},onError:{
state=state.cop yWith(
status的观点是。Optimiza tionStat us.error,errorMessag e:e.toString,);},onDone: async{
/// 自动保存历史记录 — 使用者痛点 #5 ：手动保存易忘记
if.isNotEmpty){
await _useCase.saveHistory(
promptOriginal:originalProm pt。promptOptimized:s tate.optimizedPro mpt,apiCo nfigI d:stat e.selec tedA piCo nfigI d!,templa teI d:s tate.sele ctedTemplat eI d!,tabType:s tate.cur rentTa b,);}
/// 最终切换为 success 状态
state=stat e.cop yW ith;},)，}catch{
state=stat e.cop yW ith(
从status来看。o ptimizationSt atus.error,errorMessag e:e.toString,);}
}
@override
void dispose{
_streamSubscription?.cancel，super.dispose;不过，}
}

1. ✅ 每个使用者操作对应一个明确的方法 —— Intent 即方法。自然形成单向数据流，
2. ✅ 所有业务错误统一写入 state.errorMessage。UI 可统一展示，无需分散判断。
3. ✅ 在 dispose 中统一取消订阅 → 防止内存泄漏，这是对 资源安全 的常用方法。
4. ✅ 将真正的业务调用委托给 Use‑Case，保持 Notifier “轻量”。

---

：Provider

// Providers 定义区
final dioProvider = Provider<Dio>=>Dio);final openAiApiServiceProvider =
Provider<OpenAiApiService>=>OpenAiApiService));final optimizePromptUseCaseProvider =
Provider<OptimizePromptUseCase>=>OptimizePromptUseCase(
apiService : ref.watch。apiConfigRepo : ref.watch,templateRepo : ref.watch,historyRepo : ref.watch,));/// 主要 StateNotifier Provider —— 自动管理生命周期、支持 override 用于单元测试
final optimizationProvider =
StateNotifierProvider.autoDispose<OptimizationNotifier。OptimizationState>{
return OptimizationNotifier(
ref.watch,ref.watch,);},dependencies:);

1. ✅ 所有外部依赖 可以轻松 mock 替换。
2. ✅ 使用 autoDispose 自动回收资源——页面离开即销毁 Notifier 与其内部 Stream。
3. ✅ 声明式依赖 明确告知 Riverpod 编译时检查循环依赖风险。

---

从第四步来看，View

dart
// lib/features/optimization/presentation/pages/home_page.dart
class HomePage extends ConsumerWidget {
@override
Widget build {
final state = ref.watch;final notifier = ref.read;return Scaffold(
说到appBar，AppBar),body: Padding(
padding: const EdgeInsets.all。child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,children:,selected:{state.currentTab},onSelectionChanged:{
notifier.switchTab;},),const SizedBox,
 /* ---------- API 配置选择 ---------- */
ApiConfigSelector(
selectedId : state.selectedApiConfigId,onSelected : notifier.selectApiConfig,),const SizedBox,/* ---------- 模板选择 ---------- */
TemplateSelector(
selectedId : state.selectedTemplateId,type : state.currentTab。onSelected : notifier.selectTemplate,),const SizedBox,/* ---------- 输入框 ---------- */
TextField(
decoration const InputDecoration,maxLines :5,onSubmitted :=>notifier.optimize,),const SizedBox,/* ---------- 调整按钮 ----------
* 按钮自动根据 isProcessing 禁用 → 避免重复请求
*/
ElevatedButton(
onPressed:
state.isProcessing?null :
=> notifier.optimize,child:
Text
),const SizedBox。/* ---------- 状态渲染 ----------
根据 Enum 状态分支渲染不同 UI。完全声明式，无任何 if‑else setState。*/
if
const LinearProgressIndicator,if(state.status==OptimizationStatus.streaming ||
state.status==OptimizationStatus.success)
SelectableText。if
Text('❌ ${state.errorMessage}',style:textStyle),],),),

);}
}

 

 :











. 状态一致性 ✔️ vs ❌​​​​​​​​​​​


dart
// ❌ Traditional Fragmented Flags
bool _isLoading=false;String，_error;

// ... 异步请求后忘记重置其中之一导致 UI 不一致

dart
// ✅ Riverpod + MVI - 单一枚举确保互斥
state = state.copyWith(status:
Optimiza tionStat us.loading);// ，话说回来，later
state = stat e.cop yWi th;


可测性 ✔️ vs ❌​

dart

// ❌ 无法直接 mock setS tate
testWidgets;

// ✅ 用 ProviderContainer 注入 Mock 用例即可验证整个流程
final container=
ProviderContainer(overrides:);final noti fier=
container.read;await noti fier.optimize;expect.status,Optimiza tionSta tus.s uccess);


内存安全 ✔️ vs ❌​

// ❌ 手动检查 mounted 防止 setS tat e after dispose
if{setS tat e;}


// ✅ autoDispose+dispose 自动回收
@override void dispose{_stre amSubscrip tion?怎么说呢，.cancel;}



// ❌ 一样逻辑散落于 PageA/B/C 各自 StatefulWidget
class PageA extends StatefulWidget {...}
class PageB extends StatefulWidget {...}


// ✅ 同一 Notifier 可被多页共享，只需引用同一 Provider
final optimizationProvider…class PageA extends ConsumerWidget{…}
class PageB extends ConsumerWidget{…}







错误做法 – 每收到一次 chunk 都触发完整 Widget 重建：

dart
stream.listen{
setState=>_result+=chunk);// 整体 rebuild 性能差
});

正确做法 – 把 Chunk 累加到 Immutable State 再让 Riverpod 自动刷新：

dart
_streamSubscription=
stream.listen(
{
state = state.copyWith(
optimizedProm pt:
state.optimizedPro mpt+chunk );},onError:{
state =
stat e.cop yW ith(status:
Optimiza tionStat us.erro r。errorMessa ge:e.t oString);},onDone:{
sta te=
stat e.cop yWi th(sta tus:
Optimiza tionStat us.suc cess );})，




使用 `autoDispose` 或手动覆写 `dispose` 来取消订阅与计时器。话说回来，

dart
class Optimizatio nNotifier extends StateNotif ier<Optimizatio nStat e>{
StreamSubscript ion<String&g t>?_
streamSubscript ion;

@override
void dispose{
_streamSubscript ion?.cancel，super.dispose;}
}





应用被杀后
打开，需要恢复上一次选中的 API 配置与模板。

dart
class Optimizatio nN otifier extends Stat eNotifie r<Optimizati onSta te&g t>{
fin al SettingsRepositor y _
settingsRepo;

Optimizati onN otifier
​​  ⁠
‑‑–init–‑–
loadPersistedSelections{
final apiConfIg=setting sR epo sitory.ge tSe le ctedAp iCOnfig I dd;fin al tem platE=_setting sRepos itory.ge tSel ectedTe mplate I dd;sta te=
‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌‌‍‌‌‍‍‌‌‍‌‌‍‎‎‎‎‎‏‏‏‏‏‏‏‏‎ ‎ ‏‪‭‭‭‮‮‮‮‬‬‬‫‫‫‫‫​​​​​​​​​​​ ​​​​​​​​​​​​​ ​​​​​​​​​ ​⁞⁞⁞⁞⁞⁞⁞⁞⁞⁞ ⁽₍₎₎ ⁽₍₂₎₎⁣⁣⁣⁣⁣⁣✱✱✱✱✱✱✱✱✨✨✨✨✨✨ ✨ ✨ ✨ ✨ ✨ ✨ 🔥🔥🔥🔥🔥 🔥 🔥 🔥 🔥 🔙🔙🔙⚙️⚙️⚙️⚙️⚙️⚙︎︎︎︎︎︎🟢🟢🟢🟢🟢⬛⬛⬛⬛⬛⬜⬜⬜⬜🌈🌈🌈🌈🌈🏳🏳🏳🚧🚧🚧⏰⏰⏰⏰⏰☕☕☕☕☕🐝🐝🐝🐝🐝🎉🎉🎉🎉🎉🥂🥂🥂🥂🥂💪💪💪💪💪📦📦📦📦📦🚚🚚🚚🚚🚚🔐🔐🔐🔐🔐🍃🍃🍃🍃🍃👻👻👻👻👻❤️❤️❤️❤️❤️🇨🇳🇺🇸🇬🇧🇫🇷🇩🇪 🇭K 🇮T 🇿A 😤😤😤😤😁😁😁😁😂😂😂😂🤔🤔🤔🤔🙄🙄🙄🙄 🙈🙈🙈🙈 🙊 🙊 🙊 🙊 😬😬😬 😭😭😭😭 👋 👋 👋 👋 💔 💔 💔 💔 ⓘⓘⓘⓘ ⓓⓓ ⓖⓖ ⓗⓗ ⓘⓘ ⓒⓨ⌘⌘⌛⌛⌛⌚⌚⇖⇖⇖⇖←←←←→→→→↑↑↑↑↓↓↓↓↔↔↕↕➕➖➗×÷÷×
"