如何在加载新图像的同时继续显示旧图像？

Question

我是Flutter开发新手

我正在研究图像显示系统。

使用NetworImage显示图像。

Container(
      decoration: BoxDecoration(
          image: DecorationImage(
              image: NetworkImage(url), fit: BoxFit.contain)),
    )

当我必须显示下一张图片时，我所做的就是更改 url。这工作正常，但是当我这样做时，旧图像会被删除，直到加载新图像。

有没有办法在加载新图像之前一直显示旧图像？

Answer 1

您可以使用名为 Cached Network Image 的流行软件包。你可以做的是使用它的占位符来显示旧图像，代替 ProgressIndicator.

placeholder helps you show the Widget until your image is loaded

将您的旧 URL 传递给占位符，直到加载新图像

     CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => // use your widget here to show the older image,
        errorWidget: (context, url, error) => Icon(Icons.error),
     )

Answer 2

你检查过这个了吗:

CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),

您可以提供您自己的占位符作为小部件让我知道它是否有效

Answer 3

您可以像这样在显示当前图像的同时等待下一张图像..

import 'dart:async';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String firstURL = 'https://example_first_url';
  String nextURL = 'https://example_next_url';
  Completer<ImageInfo> completer = Completer();
  NetworkImage nextNetworkImg;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 400,
          width: 400,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: nextNetworkImg ?? NetworkImage(firstURL),
              fit: BoxFit.contain,
            ),
          ),
        ),
        SizedBox(height: 20),
        RaisedButton(
          child: Text('Next'),
          onPressed: onNext,
        ),
      ],
    );
  }

  void onNext() async {
    nextNetworkImg = await getNwImage(nextURL);
    setState((){});
  }

  Future<NetworkImage> getNwImage(String url) async {
    NetworkImage networkImg = NetworkImage(url);
    networkImg
        .resolve(ImageConfiguration())
        .addListener(ImageStreamListener((ImageInfo info, bool _) {
      completer.complete(info);
    }));
    await completer.future;
    return networkImg;
  }
}

如何在加载新图像的同时继续显示旧图像？

How do keep displaying old image while loading new image?

image

networkx

flutter