在Flatter中从Firebase加载图像时使用CircularProgressIndicator小部件

我想知道如何将circularprogressindicator添加到从firebase获得的图像中。当我加载数据时，“文本”排在图像的前面，看起来并不优雅。这是我的密码。请检查我的代码并帮助我实现这一点。提前谢谢

class MyApp extends StatefulWidget {
  static const String id = 'Myapp_screen';
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(0.0),
        child: StreamBuilder(
          stream: Firestore.instance.collection('news').limit(20).snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return Center(
                  child: CircularProgressIndicator(
                value: null,
                strokeWidth: 2.0,
              ));
            } else {
              return ListView.builder(
                itemCount: snapshot.data.documents.length,
                itemBuilder: (context, index) {
                  DocumentSnapshot documentSnapshot =
                  snapshot.data.documents[index];
                  return Container(
                    child: Card(
                      child: Column(children: <Widget>[
                        Image.network(documentSnapshot['images']),
                        Text(documentSnapshot['title'])
                      ]),
                    ),
                  );
                },
              );
            }
          },
        ));
  }
}

类MyApp扩展StatefulWidget{
静态常量字符串id='Myapp_screen'；
@凌驾
_MyAppState createState（）=>\u MyAppState（）；
}
类MyAppState扩展了状态{
@凌驾
小部件构建（构建上下文）{
返回填充(
填充：常量边集全部（0.0），
孩子：StreamBuilder(
流：Firestore.instance.collection（'news'）.limit（20）.snapshots（），
生成器：（上下文，快照）{
如果（！snapshot.hasData）{
返回中心(
子对象：循环压缩机指示器(
值：null，
冲程宽度：2.0，
));
}否则{
返回ListView.builder(
itemCount:snapshot.data.documents.length，
itemBuilder：（上下文，索引）{
文档快照文档快照=
快照.数据.文档[索引]；
返回容器(
孩子：卡片(
子项：列（子项：[
Image.network（documentSnapshot['images']），
文本（文档快照['title']）
]),
),
);
},
);
}
},
));
}
}

导入“包装：颤振/材料.飞镖”；
导入“package:transparent_image/transparent_image.dart”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
最终标题=‘淡入图像’；
返回材料PP(
标题:标题,，
家：脚手架(
appBar:appBar(
标题：文本（标题），
),
主体：堆栈(
儿童：[
居中（子项：CircularProgressIndicator（）），
居中(
子项：FadeInImage.memoryNetwork(
占位符：K透明图像，
图像：'https://picsum.photos/250?image=9',
),
),
],
),
),
);
}
}

导入“包装：颤振/材料.飞镖”；
导入“package:transparent_image/transparent_image.dart”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
最终标题=‘淡入图像’；
返回材料PP(
标题:标题,，
家：脚手架(
appBar:appBar(
标题：文本（标题），
),
主体：堆栈(
儿童：[
居中（子项：CircularProgressIndicator（）），
居中(
子项：FadeInImage.memoryNetwork(
占位符：K透明图像，
图像：'https://picsum.photos/250?image=9',
),
),
],
),
),
);
}
}

您可以使用loading builder属性来实现此目的

下面的代码明确了您的想法

Image.network(
          'https://previews.123rf.com/images/blueringmedia/blueringmedia1701/blueringmedia170100692/69125003-colorful-kite-flying-in-blue-sky-illustration.jpg',
          loadingBuilder: (BuildContext context, Widget child,
              ImageChunkEvent loadingProgress) {
            if (loadingProgress == null) return child;
            return Center(
              child: CircularProgressIndicator(
                value: loadingProgress.expectedTotalBytes != null
                    ? loadingProgress.cumulativeBytesLoaded /
                        loadingProgress.expectedTotalBytes
                    : null,
              ),
            );
          },
        ),

---

您可以使用loading builder属性来实现此目的

下面的代码明确了您的想法

Image.network(
          'https://previews.123rf.com/images/blueringmedia/blueringmedia1701/blueringmedia170100692/69125003-colorful-kite-flying-in-blue-sky-illustration.jpg',
          loadingBuilder: (BuildContext context, Widget child,
              ImageChunkEvent loadingProgress) {
            if (loadingProgress == null) return child;
            return Center(
              child: CircularProgressIndicator(
                value: loadingProgress.expectedTotalBytes != null
                    ? loadingProgress.cumulativeBytesLoaded /
                        loadingProgress.expectedTotalBytes
                    : null,
              ),
            );
          },
        ),

---

---

谢谢你的回答。我做了所有的步骤，正如你在这里指出的，但微调器在后台工作，不会消失。有什么解决办法吗？很高兴它奏效了。请将答案标记为“已接受”，以便其他人也能接受。亲爱的朋友，是的，它工作了，但正如我在之前的评论中所说，微调器不断旋转，不会停止。是的，但根据您的回答，在listview图像中显示加载程序是令人满意的。为此创建新问题。感谢您的回答。我做了所有的步骤，正如你在这里指出的，但微调器在后台工作，不会消失。有什么解决办法吗？很高兴它奏效了。请将答案标记为“已接受”，以便其他人也能接受。亲爱的朋友，是的，它工作了，但正如我在之前的评论中所说，微调器不断旋转，不会停止。是的，但根据您的回答，在listview图像中显示加载程序是令人满意的。为此提出新问题。亲爱的维伦。感谢您的评论和帮助。是的，它是有效的，但我不知道这是因为您的代码还是这里有另一个原因，但列表不能顺利运行。我可以很慢地向下滚动。你对这个问题有什么看法吗？我不是100%确定，但我认为这是因为图像。此外，若您在emulator中进行测试，那个么它可能会更滞后。我想我在真实的设备和发布模式下都会很好。不幸的是，在真实的设备上它是落后的，但在模拟器中一切都很好。在发布模式下尝试真的很奇怪。很棒的解决方案！与LinearProgressIndicator配合使用效果更佳。亲爱的维伦。感谢您的评论和帮助。是的，它是有效的，但我不知道这是因为您的代码还是这里有另一个原因，但列表不能顺利运行。我可以很慢地向下滚动。你对这个问题有什么看法吗？我不是100%确定，但我认为这是因为图像。此外，若您在emulator中进行测试，那个么它可能会更滞后。我想我在真实的设备和发布模式下都会很好。不幸的是，在真实的设备上它是落后的，但在模拟器中一切都很好。在发布模式下尝试真的很奇怪。很棒的解决方案！使用LinearProgressIndicator效果更好。