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或我的代码错了？有人可以帮我？我还是新手，谢谢你。

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

Answer 1

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

图像溢出，可能阻止UI更新。
图像太大，你需要稍等一下才能加载。

我修改了一些代码：

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

上为此做了issue

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

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

更改值时，我的CachedNetworkImage不会更改

2 个答案: