dart - 当值更改时，我的 CachedNetworkImage 不会更改

Question

  @override
  Widget build(BuildContext context) {
    var switchButton = new Switch(
        value: detail,
        onChanged: (bool value){
          setState(() {
            detail = value;
          });
        },
    );
    var imagejadwal = new CachedNetworkImage(
      imageUrl: switchButton.value?"https://drive.google.com/uc?export=download&id=1v-dA5bG7Fwk_hJvL2wu4Z9P10JdsaWIe":"https://drive.google.com/uc?export=download&id=1qfdI_yM7rzdLMqRizlr76445qc0IQKhD",
      placeholder: new CircularProgressIndicator(),
      errorWidget: new Icon(Icons.error),
    );

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Column(
        children: <Widget>[
          new Align(
            alignment: Alignment.topRight,
            child: switchButton,
          ),
          imagejadwal,
        ],
      )
    );
  }

It's because the CachedNetworkImage or my code is wrong ? Can someone help me ? I'm still new at flutter Thank you.

图书馆:https://github.com/renefloor/flutter_cached_network_image

Answer 1

我尝试了 aziza 的代码，但它对我也不起作用。

我更改了 CachedNetworkImage 中的一些代码，这似乎有效，我更改了“didUpdateWidget”:

@override
void didUpdateWidget(CachedNetworkImage oldWidget) {
  super.didUpdateWidget(oldWidget);
  if (widget.imageUrl != oldWidget.imageUrl ||
    widget.placeholder != widget.placeholder){

  _imageProvider = new CachedNetworkImageProvider(widget.imageUrl,
      errorListener: _imageLoadingFailed);

  _resolveImage();
  }
}

它需要更改其 ImageProvider。我做了一个issue在 github 上的那个

您也可以使用 Stack。通过这种方式，您可以更好地控制从一个图像到另一个图像的动画。例如

            class _CachedImageExampleState extends State<CachedImageExample> {
              bool switchState = true;

              @override
              Widget build(BuildContext context) {
                var switchButton = new Switch(
                  value: switchState,
                  onChanged: (bool value) {
                    setState(() {
                      switchState = value;
                    });
                  },
                );
                var imagejadwal1 = new CachedNetworkImage(
                  imageUrl: "https://drive.google.com/uc?export=download&id=1v-dA5bG7Fwk_hJvL2wu4Z9P10JdsaWIe",
                  placeholder: new CircularProgressIndicator(),
                  errorWidget: new Icon(Icons.error),
                );


                var imagejadwal2 = new CachedNetworkImage(
                  imageUrl: "https://drive.google.com/uc?export=download&id=1qfdI_yM7rzdLMqRizlr76445qc0IQKhD",
                  placeholder: new CircularProgressIndicator(),
                  errorWidget: new Icon(Icons.error),
                );

                return new Scaffold(
                    appBar: new AppBar(
                      title: new Text("TestImage"),
                    ),
                    body: new Column(
                      children: <Widget>[
                        new Align(
                          alignment: Alignment.topRight,
                          child: switchButton,
                        ),
                        new Container (
                          //width: 500.0,
                          ///container to deal with the overflow, you may not want to use it with hardcoded
                          ///height because it will not allow the view to be responsive, but it is just to
                          ///make a point about dealing with the overflow
                            height: 400.0,
                            child: new Stack(children: <Widget>[
                              new Opacity(opacity: switchState ? 1.0 : 0.0, child: imagejadwal1),
                              new Opacity(opacity: switchState ? 0.0 : 1.0, child: imagejadwal2,)
                            ],)),
                      ],
                    )
                );
              }
            }

我注意到当显示第二张图片(蓝色)时，开关的动画没有显示。这是一张非常大的图片 (2550x3300)，请考虑缩小图片以提高应用的性能。