路由生成器

Question

我试图避免图像加载延迟，该延迟会使其在我的无状态SplashScreen中弹出但没有运气。我尝试将图片加载到main()中，并将其传递给构造函数，但没有任何更改。

我读到了很多有关同一问题的答案，并且所有帖子都在有状态窗口小部件的扩展状态类的precacheImage中使用didChangeDependencies，所以我尝试了一下，但结果仍然相同甚至遵循答案示例和本文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图像stil尚未加载..所以我的解决方法不适用于Web。

我不敢相信像加载图像这样的基本操作必须如此复杂..让我认为Flutter毕竟不是一个好选择。您知道预缓存是否无法在网络上运行吗？我在最新的开发者频道上。

非常感谢。

Answer 1

使precacheImage方法与我的第一次尝试一起工作的一种方法是使SplashScreen保持无状态。然后，main()子级（通常为App()）将具有状态，可以预缓存所有需要的图像，并将它们通过构造函数中的最终bgImage属性在屏幕上传递。这样一来，所有内容都不会出现闪烁的bg图像。

main（）的孩子：

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);
...

SplashScreen（无状态）：

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),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

路由生成器

新建路由

AboutPageImagePreloader：

1 个答案:

main（）的孩子：

SplashScreen（无状态）：