Dart CircularProgressIndicator小部件不'；图像加载时不会消失

我用的是这个飞镖包 食谱中有一个例子。我的问题是，当图像加载时，CircularProgressIndicator不会消失。下面是ListView的项目

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
import 'models/post.dart';

class PostItem extends StatelessWidget {
  const PostItem(this.post);

  final Post post;

  @override
  Widget build(BuildContext context) {
    return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Stack(
            children: <Widget>[
              const Center(
                  child: CircularProgressIndicator(
                valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
              )),
              ClipRRect(
                borderRadius: BorderRadius.circular(10.0),
                child: Center(
                  child: FadeInImage.memoryNetwork(
                    placeholder: kTransparentImage,
                    image: post.imageUrl,
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 8.0),
          Text(
            post.username,
            style: Theme.of(context).textTheme.headline,
          ),
          const SizedBox(height: 8.0),
          Text(
            post.text,
            style: Theme.of(context).textTheme.body1,
          ),
        ]);
  }
}

导入“包装：颤振/材料.省道”；
导入“package:transparent_image/transparent_image.dart”；
导入“模型/后省道”；
类positem扩展了无状态小部件{
const positem（this.post）；
最后职位；
@凌驾
小部件构建（构建上下文）{
返回列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
堆叠(
儿童：[
康斯特中心(
子对象：循环压缩机指示器(
valueColor:AlwaysStoppedAnimation（颜色.蓝色），
)),
ClipRRect(
边界半径：边界半径。圆形（10.0），
儿童：中心(
子项：FadeInImage.memoryNetwork(
占位符：K透明图像，
image:post.imageUrl，
),
),
),
],
),
const SizedBox（高度：8.0），
正文(
post.username，
风格：Theme.of（context）.textTheme.headline，
),
const SizedBox（高度：8.0），
正文(
post.text，
样式：Theme.of（context）.textTheme.body1，
),
]);
}
}

问题的一个重要原因是：

---

我的理解是，一旦图像加载，CircularProgressIndicator应该消失？

这是因为您将

CircularProgressIndicator

小部件与

ClipRect

堆叠在一起

当它第一次构建时，您没有url，这就是图像没有显示的原因。但是，一旦它有了内容，并且您重建了父树（插入了

positem

小部件），它将用图像刷新，但进度条不会消失，因为没有任何条件阻止其渲染

要解决这个问题，最简单的方法是，只需添加一个条件，如果您有一个url，那么您将显示一个

CircularProgressBar

，否则，您的内容将显示一个

ClipRect

(...)    
               Stack(
                    children: <Widget>[
                     post?.url != null
                      ? const Center(
                          child: CircularProgressIndicator(
                        valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
                      ))
                      : ClipRRect(
                        borderRadius: BorderRadius.circular(10.0),
                        child: Center(
                          child: FadeInImage.memoryNetwork(
                            placeholder: kTransparentImage,
                            image: post.imageUrl,
                          ),
                        ),
                      ),
                    ],
                  ),
(...)

---

这是因为您正在将

CircularProgressIndicator

小部件与

ClipRect

堆叠在一起

当它第一次构建时，您没有url，这就是图像没有显示的原因。但是，一旦它有了内容，并且您重建了父树（插入了

positem

小部件），它将用图像刷新，但进度条不会消失，因为没有任何条件阻止其渲染

要解决这个问题，最简单的方法是，只需添加一个条件，如果您有一个url，那么您将显示一个

CircularProgressBar

，否则，您的内容将显示一个

ClipRect

(...)    
               Stack(
                    children: <Widget>[
                     post?.url != null
                      ? const Center(
                          child: CircularProgressIndicator(
                        valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
                      ))
                      : ClipRRect(
                        borderRadius: BorderRadius.circular(10.0),
                        child: Center(
                          child: FadeInImage.memoryNetwork(
                            placeholder: kTransparentImage,
                            image: post.imageUrl,
                          ),
                        ),
                      ),
                    ],
                  ),
(...)

您可以尝试使用插件

您可以尝试使用插件

---

我猜这是因为它位于无状态小部件中，因此不会触发堆栈重绘。我猜这是因为它在一个无状态的小部件中，所以不会触发堆栈重绘。只是一个猜测。谢谢，这两种方法都只是加载了CircularProgressIndicator小部件，图像没有加载。我想知道我这样做的方式和cookbook示例之间有什么区别，在cookbook示例中不需要条件。这可能是因为你没有为特定小部件的父级重建树。你能提供这个例子的链接吗？如果无状态小部件中没有条件，则不可能使

循环滚动条

，因为正如名称本身所解释的，它是一个不可变的小部件。链接在问题中OK，该示例中发生了什么，是因为

circularprogesbar

仍在树上，但实际上位于

堆栈中图像的下方，这就是为什么您看不到它的原因。因为这只是一个示例，所以没有什么错，但您可能不希望发生这种情况（从性能角度讲）。在您的示例中，它也可以正常工作，不同之处在于图像与进度条有一点偏移，这使得它下面有一点可见，如您在gif中所示。谢谢，这两种方法都只是加载了CircularProgressIndicator小部件，我想知道我的操作方式和cookbook示例之间有什么区别，cookbook示例不需要条件。这可能是因为您没有为特定小部件的父部件重建树。你能提供这个例子的链接吗？如果无状态小部件中没有条件，则不可能使
循环滚动条
，因为正如名称本身所解释的，它是一个不可变的小部件。链接在问题中OK，该示例中发生了什么，是因为
circularprogesbar
仍在树上，但实际上位于
堆栈中图像的下方，这就是为什么您看不到它的原因。因为这只是一个示例，所以没有什么错，但您可能不希望发生这种情况（从性能角度讲）。在您的示例中，它也可以正常工作，不同之处在于，图像与进度条有一点偏移，这使得它下面有一点可见，正如您在gif中所示。CircularProgressIndicator使用此插件
返回大小框（宽：560，高：310，子级：CachedNetworkImage）显示为扭曲的椭圆形（//图像URL:）http://via.placeholder.com/350x150，imageUrl:http://notAvalid.uri“，//imageUrl:“根本不是uri”，占位符：（上下文，url）=>CircularProgressIndicator（），errorWidget:（上下文，url，错误）=>Icon（Icons.error），//fit:BoxFit.cover，），）；
errorWidget既不显示椭圆加载圆环也不显示椭圆加载圆环
new CachedNetworkImage(
       imageUrl: "http://via.placeholder.com/350x150",
       placeholder: new CircularProgressIndicator(),
       errorWidget: new Icon(Icons.error),
     ),