Flutter：photo_view图片预览功能

sunly_2024-11-21 18:33

导入SDK

js 复制代码

photo_view: ^0.15.0

单张图片预览，支持放大缩小

js 复制代码

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

...
...

class _MyHomePageState extends State<MyHomePage>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('标题'),
      ),
      body: Center(
        child: PhotoView(
            imageProvider: const NetworkImage('https://cdn.uviewui.com/uview/swiper/1.jpg'),
        ),
      ),
    );
  }
}

多张图片预览，支持放大缩小，滑动显示

js 复制代码

class _MyHomePageState extends State<MyHomePage>{
  var bannerList = [
    'https://cdn.uviewui.com/uview/swiper/1.jpg',
    'https://cdn.uviewui.com/uview/swiper/2.jpg',
    'https://cdn.uviewui.com/uview/swiper/3.jpg',
  ];
  int _current = 0;
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          appBar: AppBar(
            title: const Text('标题'),
          ),
          body: Center(
              child: PhotoViewGallery.builder(
                itemCount: bannerList.length,
                builder: (context,index){
                  return PhotoViewGalleryPageOptions(imageProvider: NetworkImage(bannerList[index]));
                },
                onPageChanged: ((index){
                  setState(() {
				    _current = index;
                    print('图片滑动触发：$_current');
                  });
                }),
                pageController: PageController(initialPage: _current), // 可以配置默认显示第几张图片
              )
          ),
        ),
        Positioned(
          left: 0,
          bottom: 0,
          right: 0,
          child: Container(
            alignment: Alignment.center,
            child: Text('${_current+1}/${bannerList.length}',style: TextStyle(fontSize: 20,color: Colors.white,decoration: TextDecoration.none),),
          )
        )
      ],
    );
  }
}