跳转到正文
YGJoon 技术博客

Flutter 项目案例(六):从详情页进入提交面板

发布于:
·967 字 · 约 2 分钟·作者:
从详情页进入表单时,已有选择怎样带过去、失败时又该保留什么?本文落到共享状态、时段选择和提交面板的实现。
Flutter 项目案例(六):从详情页进入提交面板文章封面
目录

详情页只是流程入口

详情页可以展示多条可选内容。用户点击主要操作后,流程先检查必要的登录和位置状态,再准备提交所需的数据。把前置条件放在交互入口处理,能避免它们散落在各个卡片布局中。

流程开始时,页面将所选内容、目标地点和当前选项交给共享表单状态,再打开底部面板。下面是去掉业务字段后的示意代码:

void openSubmission(
  FormState formState,
  Item selectedItem,
  Location selectedLocation,
  List<Selection> selectedOptions,
) {
  final input = SubmissionInput(
    item: selectedItem,
    location: selectedLocation,
    options: selectedOptions,
  );
  formState.update(input);
  formState.open();
}

共享状态容器如果在应用启动时注册,就可以跨详情页和底部面板保存表单数据。也因此,每次打开面板前都要明确哪些字段需要重置,哪些字段应该保留。

默认计划时段是另一条异步链路

页面会异步请求一段时间内的可选时段,过滤默认日期,再找第一个有效选项并写入表单状态。这个请求没有被等待,创建面板可以先打开,时间稍后更新。

这一点能让交互更快,但也带来时序和空列表边界:接口没有默认日期,或者默认日期没有可计划时段时,如果直接通过列表索引取第一个元素,空列表就会抛出异常,而且用户可能得不到明确反馈。更稳妥的实现会先检查列表是否为空,明确显示“暂无可计划时段”,并决定是否禁用提交。

分清视图、业务状态和服务请求

视图负责展示内容和发出操作意图;页面状态负责准备提交上下文;共享表单保存地点、条目、日期、备注、支付方式和金额;网络层负责发送请求。这个链路说明 GetX 共享控制器可以降低页面间传参复杂度,但全局控制器也需要更严格的初始化和清理边界。

实际审查时,可以重点追问:

经验总结

这篇我重点验证的是表单”残留”问题:全局共享表单在面板关闭时不清字段,下次打开会带上上次的备注和支付方式——这是共享状态最常见的坑。如果是我来写,open() 之前会先写一个 resetForNew(),明确哪些字段重置、哪些保留,而不是靠”记得清”。另一个是默认时段的空列表边界:接口返回空时直接取索引 0 会抛异常,稳妥做法是先判空,显示”暂无可计划时段”并禁用提交。这两处都是”代码能跑、但边界没 cover”的典型,review 时值得逐条对照。

小结

这类流程通常横跨多个页面和状态对象。把“进入前置条件”“准备业务上下文”“打开面板”“异步补全日期”分开看,能够解释为什么某些问题只在快速操作或连续创建时出现。


分享这篇文章:


相关文章

上一篇
Flutter 项目案例(四):首页数据解析、compute 与页面活跃状态
下一篇
Flutter 项目案例(五):地图位置选择、搜索结果与地址回传