Flutter页面转换效果插件another_transformer_page_view的使用

another_transformer_page_view 是一个用于Flutter的插件，提供了一系列丰富的页面切换动画效果。它继承自 transformer_page_view，并在此基础上进行了优化和扩展。

Very simple to use

要使用此插件非常简单，只需在 pubspec.yaml 文件中添加依赖：

dependencies:
  another_transformer_page_view: ^latest_version # 替换为最新版本号

然后运行以下命令来获取包：

flutter packages get

接下来就可以在代码中使用 TransformerPageView 组件了。例如：

import 'package:another_transformer_page_view/another_transformer_page_view.dart';

...

new TransformerPageView(
  loop: true,
  transformer: new AccordionTransformer(),
  itemBuilder: (BuildContext context, int index) {
    return new Container(
      color: list[index % list.length],
      child: new Center(
        child: new Text(
          "$index",
          style: new TextStyle(fontSize: 80.0, color: Colors.white),
        ),
      ),
    );
  },
  itemCount: 3,
);

几乎与 PageView.builder 的用法相同，只需要指定一个 transformer 参数给 TransformerPageView，该参数是一个 PageTransformer 的子类。

Show cases

以下是几种常见的页面转换效果示例：

• Parallax：
• Basic（如AccordionTransformer）：
• ThreeDTransformer：
• ScaleAndFadeTransformer：
• ZoomInPageTransformer：
• ZoomOutPageTransformer：
• DepthPageTransformer：

每个效果的具体实现可以参考相应的GitHub链接。

Getting Started

Installation

1. 在项目的 pubspec.yaml 文件中添加依赖：

   dependencies:
     another_transformer_page_view: ^latest_version # 替换为最新版本号
   

2. 运行命令以获取包：

   flutter packages get
   

Basic Usage

TransformerPageView 的基本参数如下表所示：

Build-in Parallax

提供了三种内置的视差效果处理方式：

• ParallaxColor：处理颜色渐变。
• ParallaxImage：处理图片，速度比 PageView 慢。
• ParallaxContainer：处理文本或其他元素，速度比 PageView 快。

这些视差效果都可以在 PageTransformer 的子类中组合使用，创建出酷炫的效果。

Custom animation

除了内置的转换效果外，还可以自定义动画。可以通过继承 PageTransformer 类来自定义所需的页面切换效果。

示例代码

这里给出一个完整的示例代码，展示了如何在一个简单的Flutter应用中集成 TransformerPageView，并且能够动态选择不同的页面转换效果：

import 'dart:math' as math;
import 'package:another_transformer_page_view/another_transformer_page_view.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

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

class _MyHomePageState extends State<MyHomePage> {
  IndexController? _controller;
  final List<String> _types = [
    'AccordionTransformer',
    'ThreeDTransformer',
    'ScaleAndFadeTransformer',
    'ZoomInPageTransformer',
    'ZoomOutPageTransformer',
    'DeepthPageTransformer'
  ];

  String? _type = 'AccordionTransformer';
  FixedExtentScrollController? controller;
  int? _index = 0;
  double _viewportFraction = 1.0;

  @override
  void initState() {
    _controller = IndexController();
    controller = FixedExtentScrollController();
    super.initState();
  }

  PageTransformer getTransformer() {
    switch (_type) {
      case 'AccordionTransformer':
        return AccordionTransformer();
      case 'ThreeDTransformer':
        return ThreeDTransformer();
      case 'ScaleAndFadeTransformer':
        return ScaleAndFadeTransformer();
      case 'ZoomInPageTransformer':
        return ZoomInPageTransformer();
      case 'ZoomOutPageTransformer':
        return ZoomOutPageTransformer();
      case 'DeepthPageTransformer':
        return DepthPageTransformer();
      default:
        throw Exception('Not a type');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Column(
        children: <Widget>[
          Wrap(
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  _controller!.move(math.Random().nextInt(5));
                },
                child: const Text('Random'),
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (b) {
                        return Scaffold(
                          appBar: AppBar(
                            title: const Text('images'),
                          ),
                          body: ImageTest(),
                        );
                      },
                    ),
                  );
                },
                child: const Text('Image'),
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (b) {
                        return Scaffold(
                          appBar: AppBar(
                            title: const Text('welcome'),
                          ),
                          body: Welcome(0),
                        );
                      },
                    ),
                  );
                },
                child: const Text('Welcome'),
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (b) {
                        return const Zero();
                      },
                    ),
                  );
                },
                child: const Text('Zero'),
              ),
            ],
          ),
          Row(
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  _controller!.previous();
                },
                child: const Text('Previous'),
              ),
              const SizedBox(width: 8.0),
              ElevatedButton(
                onPressed: () {
                  _controller!.next();
                },
                child: const Text('Next'),
              ),
              const SizedBox(width: 8.0),
              ElevatedButton(
                onPressed: () {
                  showModalBottomSheet(
                    context: context,
                    builder: (_) {
                      return CupertinoPicker(
                        scrollController: controller,
                        itemExtent: 30.0,
                        onSelectedItemChanged: (int index) {
                          setState(() {
                            controller = FixedExtentScrollController(initialItem: index);
                            _type = _types[index];
                            if (_type == 'ScaleAndFadeTransformer') {
                              _viewportFraction = 0.8;
                            } else {
                              _viewportFraction = 1.0;
                            }
                          });
                        },
                        children: _types.map((t) => Text(t)).toList(),
                      );
                    },
                  );
                },
                child: const Text('Change Animation'),
              ),
            ],
          ),
          Expanded(
            child: TransformerPageView(
              index: _index,
              viewportFraction: _viewportFraction,
              controller: _controller,
              transformer: getTransformer(),
              onPageChanged: (int? index) {
                setState(() {
                  _index = index;
                });
              },
              itemBuilder: (BuildContext context, int index) {
                // 注意这里的 images 需要在实际项目中替换为自己的资源路径
                return Image.asset(
                  'assets/image_$index.jpg', // 假设你有三张图片命名为 image_0.jpg, image_1.jpg, image_2.jpg
                  fit: BoxFit.fill,
                );
              },
              itemCount: 3,
            ),
          )
        ],
      ),
    );
  }
}

这段代码创建了一个包含多种页面切换效果的应用程序，并允许用户通过底部弹出的选择器来改变当前使用的动画类型。同时，还提供了前后翻页按钮以及随机跳转的功能。

希望这篇文档能帮助您更好地理解和使用 another_transformer_page_view 插件！如果有任何问题或需要进一步的帮助，请随时提问。