Flutter图像处理插件photox_pro的使用

Flutter图像处理插件photox_pro的使用

photox_pro 是一个用于显示交互式图像的全方位解决方案（新增了功能）。

特性

• 平滑地将图像动画化为全屏并返回。
• 可通过滑动来关闭图像。
• 支持捏合缩放。
• 当提供多个图像时，自动生成可滑动的画廊。

开始使用

在你的 pubspec.yaml 文件中添加 photox_pro 作为依赖项：

flutter pub add photox_pro

导入 PhotoX：

import 'package:photox_pro/photox_pro.dart';

使用示例

以下是一个简单的示例，展示了如何使用 PhotoX 插件来显示和处理图像：

[@override](/user/override)
Widget build(BuildContext context) {
  return Container(
    height: 400,
    width: 400,
    child: PhotoX(
      dismissMode: DismissMode.swipeVertical,
      placeholder: (context, url) => const Center(child: CircularProgressIndicator()),
      items: [
        PhotoXItem(
            id: "1",
            resource: "assets/img1.jpeg",
            isAsset: true
        ),
        PhotoXItem(
            id: "2",
            resource: "https://picsum.photos/1020/1020",
            isAsset: false
        ),
        PhotoXItem(
            id: "3",
            resource: "https://picsum.photos/1021/1021",
            isAsset: false
        ),
      ]
    )
  );
}

其他参数

dismissMode

dismissMode 参数控制图像的关闭方式。支持以下两种模式：

• DismissMode.swipeAny：可以从任何方向滑动关闭图像。
• DismissMode.swipeVertical：仅从垂直方向滑动关闭图像。

// 示例代码
dismissMode: DismissMode.swipeVertical

注意：DismissMode.swipeAny 模式只能用于单个 PhotoXItem。

showPageIndicator

是否在缩略图画廊中显示页面指示器。

// 示例代码
showPageIndicator: true

pageIndicatorAlignment

页面指示器相对于画廊的对齐方式。

// 示例代码
pageIndicatorAlignment: Alignment.bottomCenter

pageIndicatorActiveColor

活动气泡的颜色。

// 示例代码
pageIndicatorActiveColor: Colors.blue

pageIndicatorInactiveColor

非活动气泡的颜色。

// 示例代码
pageIndicatorInactiveColor: Colors.grey

pageIndicatorBackgroundColor

页面指示器的背景颜色。

// 示例代码
pageIndicatorBackgroundColor: Colors.black.withOpacity(0.5)

pageIndicatorBubbleRadius

指示器气泡的半径。

// 示例代码
pageIndicatorBubbleRadius: 5.0

pageIndicatorBubblePadding

气泡之间的间距。

// 示例代码
pageIndicatorBubblePadding: 5.0

fullscreenGalleryTitleTextStyle

全屏画廊中 AppBar 标题的样式。

// 示例代码
fullscreenGalleryTitleTextStyle: const TextStyle(color: Colors.white, fontSize: 20.0)

fullscreenGalleryAppBarLeadingWidget

自定义的 AppBar 领导小部件。

// 示例代码
fullscreenGalleryAppBarLeadingWidget: IconButton(
  icon: const Icon(Icons.arrow_back),
  onPressed: () {
    Navigator.pop(context);
  },
)

完整示例代码

以下是完整的示例代码，演示了如何使用 photox_pro 插件来显示和处理图像：

import 'package:flutter/material.dart';
import 'package:photox_pro/photox_pro.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 MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("DismissMode.swipeVertical"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('IMAGES'),
            SizedBox(
              height: 400,
              width: MediaQuery.of(context).size.width,
              child: PhotoX(
                dismissMode: DismissMode.swipeVertical,
                viewportFraction: 0.8,
                thumbnailPadding: const EdgeInsets.symmetric(horizontal: 10.0),
                placeholder: (context, url) => const Center(child: CircularProgressIndicator()),
                errorImage: (context, url, error) => const Icon(Icons.error, color: Colors.red),
                items: [
                  PhotoXItem(
                    id: "1",
                    resource: "assets/img1.jpeg",
                    isAsset: true
                  ),
                  PhotoXItem(
                    id: "2",
                    resource: "https://picsum.photos/1020/1020",
                    isAsset: false
                  ),
                  PhotoXItem(
                    id: "3",
                    resource: "https://picsum.photos/1021/1021",
                    isAsset: false
                  ),
                  PhotoXItem(
                    id: "4",
                    resource: "https://picsum.photos/1022/1022",
                    isAsset: false
                  ),
                ]
              )
            )
          ],
        ),
      ),
    );
  }
}