Flutter图片详情展示插件photo_detail的使用

Flutter图片详情展示插件photo_detail的使用

特性

PhotoDetail插件用于在详细页面上通过PageView查看多张图片。当移动到详细页面时应用了hero动画。你还可以拖动图片上下移动，如果超出一定区域，则会返回到前一个页面。

视频

使用

下面是一个完整的示例，展示了如何使用photo_detail插件来实现图片详情展示功能。

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

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  PageController? _pageController = PageController();

  final List<String> _imageList = [
    "assets/box.png",
    "assets/car.png",
    "assets/market.png",
  ];

  [@override](/user/override)
  void dispose() {
    _pageController?.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: [
              // 动态生成图片列表
              ...List.generate(
                _imageList.length,
                    (index) => _image(_imageList[index], index),
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget _image(String assetName, int initialPage) {
    return GestureDetector(
      child: SizedBox(
        height: 200,
        width: 200,
        child: Hero(
          tag: assetName,
          child: Image.asset(assetName),
        ),
      ),
      // 点击图片跳转到详情页
      onTap: () {
        PhotoDetail(
          context: context,
          pageView: _pageView(initialPage),
          appBar: AppBar(
            elevation: 0,
            backgroundColor: Colors.red,
            title: const Text("详情"),
          ),
        );
      },
    );
  }

  PageView _pageView(int initialPage) {
    _initPageController(initialPage);
    return PageView.builder(
      controller: _pageController,
      itemCount: _imageList.length,
      itemBuilder: (context, index) {
        String assetName = _imageList[index];
        return Hero(tag: assetName, child: Image.asset(assetName));
      },
    );
  }

  // 初始化PageController
  void _initPageController(int initialPage) {
    if (_pageController != null && _pageController!.hasClients) {
      _pageController!.dispose();
    }
    _pageController = PageController(initialPage: initialPage);
  }

}

示例代码

下面是完整的示例代码，展示了如何在Flutter项目中集成和使用photo_detail插件。

import 'package:example/home_screen.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}