Question

我正在使用此飞镖包here flutterio食谱中有一个示例。我的问题是，当图像加载时，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,
          ),
        ]);
  }
}

问题的图像：

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

Answer 1

发生这种情况是因为您将CircularProgressIndicator小部件与ClipRect堆叠在一起。

首次构建时，您没有url，这就是图像未显示的原因。但是，一旦包含内容并重建父树（插入PostItem小部件的位置），它就会随图像刷新，但是进度条不会消失，因为没有任何条件可以阻止其渲染。

要解决此问题，最简单的方法是添加一个条件，如果您有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,
                          ),
                        ),
                      ),
                    ],
                  ),
(...)

如果您不打算堆叠项目，则实际上可以删除Stack小部件并将其直接放置在您的列中。以下是完整的示例（没有Stack）。

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>[
      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,
                ),
              ),
            ),
      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,
      ),
    ]);
  }
}

Answer 2

您可以尝试使用cached_network_image插件

new CachedNetworkImage(
       imageUrl: "http://via.placeholder.com/350x150",
       placeholder: new CircularProgressIndicator(),
       errorWidget: new Icon(Icons.error),
     ),

加载图像时，CircularProgressIndicator小部件不会消失

2 个答案: