Flutter ConnectionState.waiting状态下AssetImage无法显示问题咨询

云原生阿岚

2026-10-2

问题原因

你遇到的现象本质是异步任务调度优先级和组件重复重建的问题：AssetImage的资源加载属于UI侧低优先级异步任务，优先级低于你传给FutureBuilder的getIsLogin()任务，getIsLogin()执行完成前图片加载回调不会被调度；同时FutureBuilder状态切换时重复创建LoginScreen实例，会打断正在进行的图片加载流程，导致需要等Future完成后才能重新加载显示图片。

解决方案

方案1：预缓存登录页资源图片（推荐）

在应用启动阶段提前把图片加载到内存缓存中，后续使用时直接读取缓存，不会触发异步加载流程。修改main函数代码如下：

void main() async {
  // 确保Flutter基础框架初始化完成
  WidgetsFlutterBinding.ensureInitialized();
  // 预缓存登录页用到的图片
  await precacheImage(
    const AssetImage("asset/images/banner.jpg"),
    WidgetsBinding.instance.rootElement!,
  );
  runApp(const MyApp());
}

方案2：避免FutureBuilder重复创建LoginScreen实例

不要在builder方法里每次都实例化新的LoginScreen，提前创建好实例复用，防止图片加载被中断，修改main.dart代码如下：

// 提前实例化LoginScreen，全程复用同一个对象
final LoginScreen loginScreen = const LoginScreen();

// 省略其他层级代码
home: FutureBuilder(
  future: getIsLogin(),
  builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
    if(snapshot.connectionState == ConnectionState.waiting){
      return loginScreen;
    }
    // 已登录返回首页，未登录返回登录页，同样复用已有实例
    return snapshot.data == true ? const HomePage() : loginScreen;
  },
)