Question

我希望CachedNetworkImage在加载新图像时更改imageUrl属性时显示占位符，但它显示的是先前imageUrl中的先前图像。

例如，如果我有这样的设置，其中有一个CachedNetworkImage和一个按钮。按下按钮后，状态将更新，并且CachedNetworkImage的imageUrl属性将更新。发生这种情况时，我希望CachedNetworkImage在从新图像Url加载新图像时显示占位符。如何实现我想要的？

class SampleState extends State<SamplePage> {
  String imageUrl = "https://example.com/someImage.png";

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        CachedNetworkImage(
          imageUrl: imageUrl,
          placeholder: Center(child: CircularProgressIndicator()
        ),
        RaisedButton(
          child: Text("Change image"),
          onPressed: () {
            setState(() {
              imageUrl = "https://example.com/anotherImage.png";
            });
          },
        ),
      ],
    );
  }
}

Answer 1

您可以通过更改key的值来强制完全重建窗口小部件。例如，您可以从URL字符串创建ValueKey-具有相同URL的两个键是相等的。

class SampleState extends State<SamplePage> {
  String imageUrl = "https://example.com/someImage.png";

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        CachedNetworkImage(
          key: new ValueKey<String>(imageUrl),
          imageUrl: imageUrl,
          placeholder: Center(child: CircularProgressIndicator()
        ),
        RaisedButton(
          child: Text("Change image"),
          onPressed: () {
            setState(() {
              imageUrl = "https://example.com/anotherImage.png";
            });
          },
        ),
      ],
    );
  }
}

当Flutter中imageUrl动态更改时，CachedNetworkImage不显示占位符

1 个答案: