flutter动画— —Hero +photo_view 实现微信朋友圈图片预览

photo_view预览单张图片

依赖

photo_view: ^0.14.0 #微信图片

单张图片的预览

// PhotoView(
//imageProvider:
// NetworkImage(widget.arguments["imageUrl"]),
// )

class HeroPage extends StatefulWidget {
  final Map arguments;
  const HeroPage({super.key, required this.arguments});
  @override
  State<HeroPage> createState() => _HeroPageState();
}

class _HeroPageState extends State<HeroPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
          onTap: () {
            Get.off(
              MyPayTest(),
              transition: Transition.noTransition,
            );
          },
          child: Hero(
              tag: widget.arguments["imageUrl"],
              child: Scaffold(
                  backgroundColor: Colors.black,
                  body: Center(
                    child: AspectRatio(
                        aspectRatio: 9 / 16,
                        child: PhotoView(
                          imageProvider:
                              NetworkImage(widget.arguments["imageUrl"]),
                        )),
                  )))),
    );
  }
}

photo_view多张图片预览

依赖

photo_view: ^0.14.0 #微信图片

多张图片的预览

PhotoViewGallery.builder(
itemCount: 5,
builder: ((context, index) {
return PhotoViewGalleryPageOptions(
imageProvider: NetworkImage(listData[index]["imageUrl"]));
}))

PhotoViewGallery.builder(
scrollPhysics: const BouncingScrollPhysics(),
builder: (BuildContext context, int index) {
return PhotoViewGalleryPageOptions(
imageProvider:
NetworkImage(widget.imageItems[index]["imageUrl"]),
);
},
scrollDirection: widget.direction,
itemCount: widget.imageItems.length,
backgroundDecoration:
const BoxDecoration(color: Colors.black),
pageController: PageController(initialPage: 1),
onPageChanged: (index) => setState(() {
currentIndex = index;
}))

PhotoViewGallery.builder属性：