如何在加载图像时添加进度条或循环进度此代码（颤振）？我尝试了不同的解决方案，但没有运气:(

Posted 2023-02-23

【中文标题】如何在加载图像时添加进度条或循环进度此代码（颤振）？我尝试了不同的解决方案，但没有运气:(

【英文标题】：How can I add a progress bar or Circular Progress this code(Flutter) while an image is loading? I have tried different solutions but no luck :(

【发布时间】：2021-06-08 02:19:05

【问题描述】：

如何在加载图像时添加进度条或循环进度此代码（Flutter）？我尝试了不同的解决方案，但没有运气:(。

如何在加载图像时添加进度条或循环进度此代码（Flutter）？我尝试了不同的解决方案，但没有运气:(。

import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

class OnlineImage extends StatefulWidget 
  @override
  _OnlineImageState createState() => _OnlineImageState();

class _OnlineImageState extends State<OnlineImage> 
  final imageList = [
    'https://colorlinemapsapp.000webhostapp.com/wallpaper/DHA%20PESHAWAR%20UPDATE%20PLAN%20(%20A%20)-Model%20(1)_page-0001.jpg',
  ];
//images url
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.deepPurple,
        title: Text("Hayatabad Master Plan"),
      ),
      // add this body tag with container and photoview widget
      body: Container(
        child: Center(
          child: Container(
            height: 800,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Card(
                elevation: 20,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: PhotoViewGallery.builder(
                    itemCount: imageList.length,
                    builder: (context, index) 
                      return PhotoViewGalleryPageOptions(
                        basePosition: Alignment.center,
                        imageProvider: NetworkImage(imageList[index]),
                        minScale: PhotoViewComputedScale.contained * 0.8,
                        maxScale: PhotoViewComputedScale.covered * 5,
                      );
                    ,
                    scrollPhysics: BouncingScrollPhysics(),
                    backgroundDecoration: BoxDecoration(
                      color: Theme.of(context).canvasColor,
                    ),

                  ),
                ),
              ),
            ),[enter image description here][1]
          ),
        ),
      ),
    );
  
 ```


  [1]: https://i.stack.imgur.com/znE6t.jpg
  [2]: https://i.stack.imgur.com/6xJ7b.gif

【参考方案1】：

使用This 插件来实现。

将此添加到您的包的 pubspec.yaml 文件中：

dependencies:
  cached_network_image: ^2.5.1

并将其包含为：

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

关于你的案子

class OnlineImage extends StatefulWidget 
     @override
    _OnlineImageState createState() => _OnlineImageState();
    
   class _OnlineImageState extends State<OnlineImage> 
     final imageList = [
    'https://colorlinemapsapp.000webhostapp.com/wallpaper/DHA%20PESHAWAR%20UPDATE%20PLAN%20(%20A%20)-Model%20(1)_page-0001.jpg',
  ];
//images url
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.deepPurple,
        title: Text("Hayatabad Master Plan"),
      ),
      // add this body tag with container and photoview widget
      body: Container(
        child: Center(
          child: Container(
            height: 800,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Card(
                elevation: 20,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: PhotoViewGallery.builder(
                    itemCount: imageList.length,
                    builder: (context, index) 
                      return PhotoViewGalleryPageOptions(
                        basePosition: Alignment.center,
                        imageProvider:CachedNetworkImage(
 imageUrl: imageList[index],
 placeholder: (context, url) => new CircularProgressIndicator(),
 errorWidget: (context, url, error) => new Icon(Icons.error),
),
                        minScale: PhotoViewComputedScale.contained * 0.8,
                        maxScale: PhotoViewComputedScale.covered * 5,
                      );
                    ,
                    scrollPhysics: BouncingScrollPhysics(),
                    backgroundDecoration: BoxDecoration(
                      color: Theme.of(context).canvasColor,
                    ),

                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  
 ```

【讨论】：

实际上，我是 Flutter 新手，我必须将您的代码放入我的代码中。

@waseemafzal 嘿，检查插件页面。你不会后悔的！此外，它还包含一个示例

@waseemafzal 查看我的答案，我已对其进行了编辑。

ibb.co/64MGShB ，请检查一下，我有一些错误，

谢谢大家的帮助