欢迎光临
我们一直在努力

Flutter 空结果提示:先拆开内容、状态与恢复回调

Flutter 空结果,先说清为什么空

查询还没结束,列表暂时为空,页面就显示“暂无资料”;请求失败后,也显示同一张插图。用户看不到数据,组件却把三个不同原因压成了一个 items.isEmpty。

空结果组件负责解释已经确定的状态,不应该负责猜请求结果。本文给出 Flutter 的状态判断与短内容布局初稿,使用虚构资料列表,没有编译、设备运行、大字体或辅助技术验证记录。配图是概念示意。

列表为空,不足以决定展示什么

至少先区分尚未查询、加载中、明确空结果和请求失败。若已有旧数据正在刷新,还要决定保留旧结果并标明刷新,还是切换到等待状态;不能因为新数组暂时清空,就闪一下“没有数据”。

已确认情境合适的说明方向可能的动作
还未提交查询条件 请先选择条件 聚焦或进入条件区
查询进行中 正在查询 按业务支持提供取消等待
条件下没有匹配项 当前条件没有匹配资料 清除或修改筛选
首次确实无内容 当前还没有资料 按权限提供创建入口
请求失败 未能取得查询结果 保留条件并重试

这些文案需要由真实业务条件决定。后端权限过滤、分页边界或数据源未就绪,不应被组件擅自解释成“整个系统没有资料”。

相同空列表表象对应不同恢复动作

内容组件只接收已经决定好的文案

可以让调用方传入标题、说明与可选动作。下面片段假设这些参数已在外层定义,展示的是布局核心,不是完整 Widget 类:

SliverFillRemaining(
hasScrollBody: false,
child: Padding(
padding: const EdgeInsets.all(24),
child: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 480),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(title, textAlign: TextAlign.center),
const SizedBox(height: 12),
Text(message, textAlign: TextAlign.center),
if (onAction != null) …[
const SizedBox(height: 16),
TextButton(onPressed: onAction, child: Text(actionLabel)),
],
],
),
),
),
),
)

它要放在合适的 CustomScrollView.slivers 中,不能直接作为普通 Column 子项。SliverFillRemaining 的空间分配取决于视口、前面的 sliver 与子内容;hasScrollBody: false 表达子内容没有自己的滚动主体,并不意味着任何长文本都已经验证可用。

480 和间距是讲解初稿,实际应接项目布局与文字主题。不要用固定高度把整个提示锁死,尤其是说明变长或系统字体放大时。这里也没有添加大幅装饰插图,以免它比恢复动作更占空间。

回调名称要表达真实动作

筛选无结果时,按钮可以叫“清除筛选”,调用方清理相应条件并重新查询;首次无内容时,若用户有创建权限,可以提供“创建资料”;网络失败时,则保留条件重试。不要把它们都叫 onRetry,再让组件内部根据文案猜测行为。

可选动作也要有一致的参数约束:onAction 不为空时,actionLabel 必须是可理解的非空文案。权限不足时可以不给创建入口,但应依据业务说明接下来能做什么,不要留下一个永远禁用、原因不明的按钮。

查询动作还应保留身份。用户清除了旧筛选并发起新查询,旧请求迟到时不能覆盖新结果,再把页面切成“没有匹配项”。空结果展示需要绑定产生它的查询条件与请求身份,而不是只保存一个全局布尔值。

不让恢复操作造成焦点失落

用户激活“清除筛选”后,组件可能立即被加载状态替换,按钮从树中消失。实际实现需要决定焦点接下来去哪里,以及怎样让用户知道查询正在进行。不能因为状态管理重建成功,就认定键盘和辅助技术路径成立。

纯装饰图不应重复播报无意义名称;标题、说明与操作顺序应让用户理解原因和下一步。是否需要额外语义通知,取决于状态变化与平台表现,不能给所有空结果统一加一段强制播报。

本例没有执行焦点或语义树检查,因此不提供“已读屏通过”的肯定记录。

待运行样本要包括内容和状态切换

可以准备一组自有样本:短说明、长中文说明、中英混排、无动作、有动作、权限不足、窄窗口、横屏和大字体。除了静态画面,还要走一遍“筛选无结果→清除筛选→加载→有结果”,再走一次失败重试。

检查时记录状态来源、查询身份、字体设置、布局约束和观察结果。Flutter 的溢出提示、按钮是否可达、恢复后焦点位置需要实际运行,不能拿本文信息图代替。

这种短内容组件适合放在既有列表页的结果区域。整页引导、复杂空白工作台与多步骤首次使用流程,可能需要不同的信息结构;已有大量数据的分页末尾也不应突然显示“首次无内容”。

先把“为什么没有列表”说清楚,再让内容组件表达原因与下一步。空结果不必复杂,但不能替请求失败或未知状态作出没有依据的判断。


官方依据(2026-10-21 核对,当日在线 Flutter API,未运行本地 SDK):SliverFillRemaining、ConstrainedBox、SingleChildScrollView(不同滚动布局的约束边界)。正文仅含核心片段,无随文工程或下载材料。

赞(0)
未经允许不得转载:171主机测评 » Flutter 空结果提示:先拆开内容、状态与恢复回调
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址