Flutter中imageUrl动态变化时CachedNetworkImage不显示占位符答案

【问题标题】：CachedNetworkImage does not show the placeholder when imageUrl dynamically change in FlutterFlutter中imageUrl动态变化时CachedNetworkImage不显示占位符
【发布时间】：2018-07-28 08:08:02
【问题描述】：

当我在加载新图像时更改 imageUrl 属性时，我希望 CachedNetworkImage 显示占位符，而是显示上一个 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";
            });
          },
        ),
      ],
    );
  }
}

【问题讨论】：

标签： dart flutter

【解决方案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";
            });
          },
        ),
      ],
    );
  }
}

【讨论】：