Flutter 如何展示loading_page至home_page加载完成后自动过渡切换

核心思路是通过监听页面资源加载状态事件触发切换，完全不依赖定时延时，保证首页就绪后立即执行过渡。

基础实现步骤 #

1. 编写HTML结构 #

默认加载页前置显示，首页默认隐藏：

<!-- 加载页 -->
<div id="loading_page" class="page loading-page">
  <!-- 加载动画内容，比如进度条、动效等 -->
  <div class="loading-spinner"></div>
</div>

<!-- 首页 -->
<div id="home_page" class="page home-page" style="display: none;">
  <!-- 首页所有内容 -->
</div>

2. 编写过渡样式 #

通过opacity和visibility属性实现平滑过渡，避免display切换没有动画的问题：

.page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-page {
  background: #fff; /* 自定义加载页背景 */
  z-index: 9999;
}

.home-page {
  background: #f5f5f5; /* 自定义首页背景 */
  z-index: 1;
}

/* 隐藏状态类 */
.page.hidden {
  opacity: 0;
  visibility: hidden;
}

3. 编写加载监听逻辑 #

如果需要等首页所有资源（图片、字体、音视频等）全部加载完成再切换，监听window.load事件：

window.addEventListener('load', () => {
  const loadingPage = document.getElementById('loading_page');
  const homePage = document.getElementById('home_page');
  
  // 先显示首页
  homePage.style.display = 'block';
  // 给加载页加隐藏类触发过渡动画
  loadingPage.classList.add('hidden');
  
  // 过渡动画结束后完全移除加载页（可选，优化DOM结构）
  loadingPage.addEventListener('transitionend', () => {
    loadingPage.remove();
  }, { once: true });
});

如果只需要等DOM结构解析完成就切换，不需要等图片等资源加载，把事件换成DOMContentLoaded即可。

进阶优化（针对单页应用/首页有异步请求的场景） #

如果首页需要等接口请求返回数据后才算就绪，可以手动维护加载完成状态，所有就绪条件都满足后再触发切换：

// 定义加载状态计数器
let loadStatus = 0;
const totalRequiredLoads = 2; // 比如要等接口返回+资源加载两个条件

// 监听资源加载完成
window.addEventListener('load', () => {
  loadStatus++;
  checkAllLoaded();
});

// 模拟首页异步接口请求
fetch('/api/home-data')
  .then(res => res.json())
  .then(data => {
    // 渲染首页数据逻辑
    loadStatus++;
    checkAllLoaded();
  });

// 所有条件满足后执行切换
function checkAllLoaded() {
  if (loadStatus === totalRequiredLoads) {
    // 执行和上面一样的切换逻辑
    const loadingPage = document.getElementById('loading_page');
    const homePage = document.getElementById('home_page');
    homePage.style.display = 'block';
    loadingPage.classList.add('hidden');
    loadingPage.addEventListener('transitionend', () => loadingPage.remove(), { once: true });
  }
}

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