Flutter Bloc实战：如何实现不遮挡原有UI的刷新加载覆盖层

要实现不替换原有UI的刷新覆盖层，核心思路是使用Stack组件将原有界面与加载覆盖层叠加，而非在不同状态下返回完全不同的Widget。以下是修改后的代码：

Widget build(BuildContext context) {
  return BlocBuilder<ABloc, AState>(
    builder: (context, state) {
      // 判断是否处于加载/刷新状态
      final isRefreshing = state is AStateLoading || state is AStateRefreshing;

      return Stack(
        children: [
          // 始终渲染原有完整UI
          _buildFullUI(
            // 仅当状态为就绪时传递有效状态，否则传null（可根据实际需求调整）
            state is AStateReady ? state : null,
          ),
          // 如果处于刷新状态，叠加覆盖层
          if (isRefreshing)
            IgnorePointer(
              // 阻止用户与底层UI交互
              child: Container(
                width: double.infinity,
                height: double.infinity,
                // 半透明背景，增强覆盖层视觉效果
                color: Colors.black.withOpacity(0.3),
                child: const Center(
                  // 居中显示加载指示器
                  child: CircularProgressIndicator(),
                ),
              ),
            ),
        ],
      );
    },
  );
}

关键细节说明： #

• Stack组件：用于将原有UI和加载覆盖层垂直堆叠，原有UI作为底层，覆盖层在上方。
• IgnorePointer：防止用户在刷新过程中点击底层的按钮或其他交互元素，避免重复触发请求。
• 半透明背景：通过Colors.black.withOpacity(0.3)实现，既可以突出加载指示器，又能让用户看到底层UI的状态。
• 状态判断：仅在加载/刷新状态下显示覆盖层，其余时间只渲染原有UI。

你可以根据需求调整覆盖层的背景颜色、透明度，或者替换CircularProgressIndicator为自定义的加载组件。

内容的提问来源于stack exchange，提问作者gvaish