如何为无状态小部件正确预缓存图像？

Question

我试图避免图像加载延迟导致它在我的无状态 SplashScreen 中弹出但没有成功。我尝试在 main() 中加载图像并将其传递给构造函数，但没有任何变化。

我阅读了很多关于同一个问题的答案，并且所有post都在didChangeDependencies中使用precacheImage in extend State class of a Stateful Widget，所以我试过了，但即使按照答案示例和本文 https://alex.domenici.net/archive/preload-images-in-a-stateful-widget-on-flutter.

结果仍然相同

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
  
}

class _SplashScreenState extends State<SplashScreen> {

  Image logo;

  @override
  void initState() {
    super.initState();
    logo = Image.asset(
      'assets/notification.png',
      height: 170,
      width: 170,
    );
  }

    @override
      void didChangeDependencies() {
      super.didChangeDependencies();
      precacheImage(logo.image, context);

    }
  @override
  Widget build(BuildContext context) {


    return Scaffold(
      backgroundColor: Colors.redAccent,
      body: Center(
        child: Padding(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              SizedBox(
                height: 150,
              ),
              logo,
              SizedBox(
                height: 60,
              ),
              Expanded(
                child: Text(
                  AppLocalizations.instance.text('Splash screen message'),
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 25,
                      fontWeight: FontWeight.w500,
                      letterSpacing: 1.5),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

我找到了答案中所示的解决方法，但如果您没有预缓存图像并将它们传递到使用它们的屏幕的有状态小部件，问题仍然存在。

例如，在我的网站中，我设置了自己的导航器服务，因此屏幕不会从有状态小部件返回：

路线生成器

Route<dynamic> generateRoute(RouteSettings settings) {
  switch (settings.name) {
    case HomeRoute:
      return _getPageRoute((HomePage()));
    case AboutRoute:
      return _getPageRoute(AboutPage());
    case RetailerAccessRoute:
      return _getPageRoute(RetailerAccess());
  }
}

所以我设置了两个中间页面 HomePageImagePreloader 和 AboutPageImagePreloader 并返回了它们：

路由生成新

Route<dynamic> generateRoute(RouteSettings settings) {
  switch (settings.name) {
    case HomeRoute:
      return _getPageRoute((HomePageImagePreloader()));
    case AboutRoute:
      return _getPageRoute(AboutPageImagePreloader());
    case RetailerAccessRoute:
      return _getPageRoute(RetailerAccess());
  }
}

AboutPageImagePreloader :

class AboutPageImagePreloader extends StatefulWidget {
  @override
  _AboutPageImagePreloaderState createState() => _AboutPageImagePreloaderState();
}

class _AboutPageImagePreloaderState extends State<AboutPageImagePreloader> {
  Image bgImageDesktop;
  Image bgImageMobile;

  @override
  void initState() {
    super.initState();
    bgImageDesktop = Image.asset('assets/aboutUsDesktopBg.jpg');
    bgImageMobile = Image.asset('assets/aboutUsMobileBg2.jpg');
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    precacheImage(bgImageDesktop.image, context);
    precacheImage(bgImageMobile.image, context);

  }
  @override
  Widget build(BuildContext context) {
    return AboutPage(bgImageDesktop: bgImageDesktop, bgImageMobile: bgImageMobile);
  }
}

向 'HomePage' 和 AboutPage 构造函数添加了必要的图像，但是当网站加载时，背景第一 bg 图像仍然没有加载..所以我的解决方法在网络上不起作用..

我无法相信像加载图像这样的基本操作必须如此复杂..让我觉得 Flutter 毕竟不是一个好的选择.. 你知道预缓存是否不能在网络上工作吗？我在最新的开发频道..

非常感谢。

Answer 1

使 precacheImage 方法与我的第一次尝试结合使用的一种方法是让 SplashScreen 保持无状态。然后 main() child （通常是 App() ）将有状态预缓存所有需要的图像并通过构造函数中的最终 bgImage 属性在屏幕中传递它们。这样就可以全部加载，没有闪烁的 bg 图像。

main() 的 child :

class _FixitState extends State<Fixit> {
  final FirebaseAnalytics analytics = FirebaseAnalytics();
  Image logo;
  Image loginBg;

  @override
  void initState() {
    super.initState();
    logo = Image.asset('assets/notification.png');
    loginBg = Image.asset('assets/mainBg.png');
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    precacheImage(logo.image, context);
    precacheImage(loginBg.image, context);

  }

  @override
  Widget build(BuildContext context) {

...

home: BlocBuilder<AuthenticationBloc, AuthenticationState>(
        builder: (context, state) {

          if (state is Unauthenticated) {
            return LoginScreen(userRepository: widget._userRepository, bgImage: loginBg,);
          }

...

return SplashScreen(logo: logo);
...

启动画面（无状态）：

class SplashScreen extends StatelessWidget {
  final Image logo;

  const SplashScreen({Key key, @required this.logo}) : super(key: key);

  @override
  Widget build(BuildContext context) {


    return Scaffold(
      backgroundColor: Colors.redAccent,
      body: Center(
        child: Padding(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              SizedBox(
                height: 150,
              ),
              Image(image: logo.image,height: 170,
                width: 170,),
              SizedBox(
                height: 60,
              ),
              Expanded(
                child: Text(
                  AppLocalizations.instance.text('Splash screen message'),
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 25,
                      fontWeight: FontWeight.w500,
                      letterSpacing: 1.5),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

如何为无状态小部件正确预缓存图像？

How to properly precache images for stateless widgets?

preload

flutter

路线生成器

路由生成新

AboutPageImagePreloader :

main() 的 child :

启动画面（无状态）：