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

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

您可以通过更改键 的值来强制完全重建小部件。例如，您可以创建一个 ValueKey来自 url 字符串 - 具有相同 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";
            });
          },
        ),
      ],
    );
  }
}