Flutter中如何使用PhotoViewGallery.builder加载网络图片

在Flutter中使用PhotoViewGallery.builder加载网络图片时遇到问题，具体代码如下：

PhotoViewGallery.builder(
  itemCount: imageUrls.length,
  builder: (context, index) {
    return PhotoViewGalleryPageOptions(
      imageProvider: NetworkImage(imageUrls[index]),
    );
  },
);

但运行时图片无法显示，控制台也没有报错信息。想问：

  1. 是否需要额外配置才能加载网络图片？
  2. 如何添加加载中和加载失败的占位图？
  3. 图片加载缓慢时如何优化？

更多关于Flutter中如何使用PhotoViewGallery.builder加载网络图片的实战教程也可以访问 https://www.itying.com/category-92-b0.html

2 回复

使用PhotoViewGallery.builder加载网络图片，需配合Image.network。示例代码：

PhotoViewGallery.builder(
  itemCount: imageUrls.length,
  builder: (context, index) {
    return PhotoViewGalleryPageOptions(
      imageProvider: NetworkImage(imageUrls[index]),
    );
  },
)

需先添加photo_view依赖，imageUrls为网络图片地址列表。

更多关于Flutter中如何使用PhotoViewGallery.builder加载网络图片的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用PhotoViewGallery.builder加载网络图片，需要结合CachedNetworkImage等网络图片加载库。以下是完整实现方法：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  photo_view: ^0.14.0
  cached_network_image: ^3.3.0

2. 完整代码示例

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view_gallery.dart';
import 'package:cached_network_image/cached_network_image.dart';

class NetworkPhotoGallery extends StatefulWidget {
  final List<String> imageUrls;
  final int initialIndex;

  const NetworkPhotoGallery({
    Key? key,
    required this.imageUrls,
    this.initialIndex = 0,
  }) : super(key: key);

  @override
  _NetworkPhotoGalleryState createState() => _NetworkPhotoGalleryState();
}

class _NetworkPhotoGalleryState extends State<NetworkPhotoGallery> {
  late int currentIndex;

  @override
  void initState() {
    super.initState();
    currentIndex = widget.initialIndex;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: [
          PhotoViewGallery.builder(
            scrollPhysics: const BouncingScrollPhysics(),
            builder: (BuildContext context, int index) {
              return PhotoViewGalleryPageOptions(
                imageProvider: CachedNetworkImageProvider(
                  widget.imageUrls[index],
                ),
                minScale: PhotoViewComputedScale.contained * 0.8,
                maxScale: PhotoViewComputedScale.covered * 2,
              );
            },
            itemCount: widget.imageUrls.length,
            loadingBuilder: (context, event) => Center(
              child: Container(
                width: 20.0,
                height: 20.0,
                child: CircularProgressIndicator(),
              ),
            ),
            backgroundDecoration: BoxDecoration(
              color: Colors.black,
            ),
            pageController: PageController(initialPage: widget.initialIndex),
            onPageChanged: (index) {
              setState(() {
                currentIndex = index;
              });
            },
          ),
          
          // 显示当前页码
          Positioned(
            top: MediaQuery.of(context).padding.top + 16,
            left: 0,
            right: 0,
            child: Center(
              child: Text(
                '${currentIndex + 1}/${widget.imageUrls.length}',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

3. 使用方法

// 在需要的地方调用
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => NetworkPhotoGallery(
      imageUrls: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg',
      ],
      initialIndex: 0,
    ),
  ),
);

主要特性说明：

  • 图片缓存：使用CachedNetworkImageProvider实现网络图片缓存
  • 手势支持：支持双指缩放、拖动等手势操作
  • 加载指示器：图片加载时显示进度条
  • 页码显示：顶部显示当前图片位置
  • 性能优化：使用builder按需构建，适合大量图片

这样就可以在Flutter中流畅地浏览网络图片画廊了。

回到顶部