值更改后，我的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,
        ],
      )
    );
  }

这是因为CachedNetworkImage还是我的代码错误？ 有人能帮我吗 ？ 我还是扑朔迷离的谢谢。

库： https : //github.com/renefloor/flutter_cached_network_image

Answer 1

您的代码工作正常，但是有两个问题要处理：

1. 图像溢出，并且可能阻止UI更新。
2. 图像太大，您需要等待一些时间才能加载它们。

我已经修改了您的一些代码：

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 imagejadwal = new CachedNetworkImage(
      imageUrl: switchState
          ? "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("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: imagejadwal),
          ],
        )
    );
  }
}

我设法解决了您的问题，此插件有两种实现方式，以下一种应为您解决。 我不确定状态未更新的原因（可能无法覆盖imageUrl）

无论如何，这是您的解决方法：

class CachedImageExample extends StatefulWidget {
  @override
  _CachedImageExampleState createState() => new _CachedImageExampleState();
}

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

  @override
  Widget build(BuildContext context) {
    var switchButton = new Switch(
      value: toggle,
      onChanged: (bool value) {
        setState(() {
          toggle = value;
        });
      },
    );
    var img= new Image(image: new CachedNetworkImageProvider(
        toggle
            ? "https://drive.google.com/uc?export=download&id=1v-dA5bG7Fwk_hJvL2wu4Z9P10JdsaWIe"
            : "https://drive.google.com/uc?export=download&id=1qfdI_yM7rzdLMqRizlr76445qc0IQKhD"));


    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: 200.0,
                height: 200.0,
                child: img),
          ],
        )
    );
  }
}

更新：使图像适合整个屏幕

class CachedImageExample extends StatefulWidget {
  @override
  _CachedImageExampleState createState() => new _CachedImageExampleState();
}

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

  @override
  Widget build(BuildContext context) {
    var switchButton = new Switch(
      activeColor: Colors.amber,
      activeTrackColor: Colors.amberAccent,
      inactiveThumbColor: Colors.amber,
      value: toggle,
      onChanged: (bool value) {
        setState(() {
          toggle = value;
        });
      },
    );

    return new Scaffold(
        appBar: new AppBar(
          actions: <Widget>[
            switchButton
          ],
          title: new Text("TestImage"),
        ),
        body:
            new Container (
              decoration: new BoxDecoration(
                image: new DecorationImage(
                  fit: BoxFit.cover,
                    image:
                new CachedNetworkImageProvider(
                    toggle
                        ? "https://drive.google.com/uc?export=download&id=1v-dA5bG7Fwk_hJvL2wu4Z9P10JdsaWIe"
                        : "https://drive.google.com/uc?export=download&id=1qfdI_yM7rzdLMqRizlr76445qc0IQKhD"
                )
                ),
              ),

),
    );
  }
}

Answer 2

我尝试了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。 我在github上为此提出了一个问题

您也可以使用堆栈。 这样，您可以更好地控制从一幅图像到另一幅图像的动画。 例如

            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），请考虑缩小该图像以提高应用程序的性能。