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

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

transformer_page_view

PageTransformer for flutter

非常简单的使用方法

import 'package:transformer_page_view/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 的用法相同，只需为 TransformerPageView 指定一个 transformer，它是一个继承自 PageTransformer 的子类。

展示案例

Parallax（视差）

Welcome view

基本

AccordionTransformer

AccordionTransformer

查看代码

ThreeDTransformer

ThreeDTransformer

查看代码

ScaleAndFadeTransformer

ScaleAndFadeTransformer

查看代码

ZoomInPageTransformer

ZoomInPageTransformer

查看代码

ZoomOutPageTransformer

ZoomOutPageTransformer

查看代码

DepthPageTransformer

DepthPageTransformer

查看代码

入门指南

安装

在 pubspec.yaml 中添加：

dependencies:
  transformer_page_view:

然后运行以下命令以获取依赖项：

flutter packages get

基本用法

参数名 默认值 描述
scrollDirection Axis.horizontal 如果设置为 Axis.horizontal，滚动视图的子项会水平排列而不是垂直排列。
loop false 设置为 true 以启用连续循环模式。
index none 初始滑动页的索引号。如果没有设置，则由小部件本身控制；否则，由 itemBuilder 返回的另一个小部件控制。
onPageChanged void onPageChanged(int index) 用户滑动时调用带有新索引的回调函数。
duration new Duration(milliseconds:300) 每次过渡动画花费的毫秒数。
transformer none 此小部件最重要的属性，它返回基于参数小部件的 transformed 小部件。如果值为 null，则必须指定 itemBuilder。
itemCount none 总项目数量。
itemBuilder none 一个根据索引返回小部件的函数，如果为 null，则必须指定 transformer。

内置视差效果

我们提供了三种内置的视差效果，分别处理颜色、图片和容器。

ParallaxColor

处理颜色变换，控制从一种颜色到另一种颜色的变换。

ParallaxImage

处理图片，其速度比 PageView 慢。

ParallaxContainer

处理文本或其他元素，其速度比 PageView 快。

这三种内置视差效果都用于 PageTransform 的子类中，将这些视差效果组合在一起，我们可以创建非常酷的效果。

酷炫效果

受 page-transformer 启发，并且我们有一个更简单的方式来创建这种效果。

查看代码

自定义动画

完整示例代码

import 'package:example/buildin_transformers.dart';
import 'package:example/images.dart';
import 'package:example/screens/ProductListView.dart';
import 'package:example/welcome.dart';
import 'package:example/zero.dart';
import 'package:flutter/material.dart';

import 'package:transformer_page_view/transformer_page_view.dart';

import 'package:flutter/cupertino.dart';
import 'dart:math' as Math;

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

List<Color> list = [Colors.yellow, Colors.green, Colors.blue];

List<String> images = [
  "assets/Hepburn2.jpg",
  "assets/Hepburn5.jpg",
  "assets/Hepburn4.jpg",
];

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => new _MyHomePageState();
}

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

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

  [@override](/user/override)
  void initState() {
    _controller = new IndexController();
    _type = "AccordionTransformer";
    controller = new FixedExtentScrollController();
    super.initState();
  }

  PageTransformer getTransformer() {
    switch (_type) {
      case 'AccordionTransformer':
        return new AccordionTransformer();
      case 'ThreeDTransformer':
        return new ThreeDTransformer();
      case 'ScaleAndFadeTransformer':
        return new ScaleAndFadeTransformer();
      case 'ZoomInPageTransformer':
        return new ZoomInPageTransformer();
      case 'ZoomOutPageTransformer':
        return new ZoomOutPageTransformer();
      case 'DeepthPageTransformer':
        return new DeepthPageTransformer();
    }

    throw new Exception("Not a type");
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
        actions: <Widget>[
          new InkWell(
            child: new Text("route"),
            onTap: () {
              Navigator.push(context, new MaterialPageRoute(builder: (c) {
                return new ProductListView();
              }));
            },
          )
        ],
      ),
      body: new Column(
        children: <Widget>[
          new Wrap(
            children: <Widget>[
              new RaisedButton(
                onPressed: () {
                  _controller.move(new Math.Random().nextInt(5));
                },
                color: Colors.blue,
                child: new Text("Random"),
              ),
              new RaisedButton(
                onPressed: () {
                  Navigator.of(context)
                      .push(new MaterialPageRoute(builder: (b) {
                    return new Scaffold(
                      appBar: new AppBar(
                        title: new Text("images"),
                      ),
                      body: new ImageTest(),
                    );
                  }));
                },
                color: Colors.blue,
                child: new Text("Image"),
              ),
              new RaisedButton(
                onPressed: () {
                  Navigator.of(context)
                      .push(new MaterialPageRoute(builder: (b) {
                    return new Scaffold(
                        appBar: new AppBar(
                          title: new Text("welcome"),
                        ),
                        body: new Welcome(0));
                  }));
                },
                color: Colors.blue,
                child: new Text("Welcome"),
              ),
              new RaisedButton(
                onPressed: () {
                  Navigator.of(context)
                      .push(new MaterialPageRoute(builder: (b) {
                    return new Zero();
                  }));
                },
                color: Colors.blue,
                child: new Text("Zero"),
              ),
            ],
          ),
          new Row(
            children: <Widget>[
              new RaisedButton(
                onPressed: () {
                  _controller.previous();
                },
                color: Colors.blue,
                child: new Text("Preious"),
              ),
              new SizedBox(
                width: 8.0,
              ),
              new RaisedButton(
                onPressed: () {
                  _controller.next();
                },
                color: Colors.blue,
                child: new Text("Next"),
              ),
              new SizedBox(
                width: 8.0,
              ),
              new RaisedButton(
                onPressed: () {
                  showModalBottomSheet(
                      context: context,
                      builder: (_) {
                        return new CupertinoPicker(
                            scrollController: controller,
                            itemExtent: 30.0,
                            onSelectedItemChanged: (int index) {
                              setState(() {
                                controller = new FixedExtentScrollController(
                                    initialItem: index);
                                _type = _types[index];
                                if (_type == 'ScaleAndFadeTransformer') {
                                  _viewportFraction = 0.8;
                                } else {
                                  _viewportFraction = 1.0;
                                }
                              });
                            },
                            children: _types.map((t) => new Text(t)).toList());
                      });
                },
                color: Colors.blue,
                child: new Text("Animation"),
              ),
            ],
          ),
          new Expanded(
              child: new SizedBox(
            child: new TransformerPageView(
                loop: false,
                index: _index,
                viewportFraction: _viewportFraction,
                controller: _controller,
                transformer: getTransformer(),
                onPageChanged: (int index) {
                  setState(() {
                    _index = index;
                  });
                },
                itemBuilder: (BuildContext context, int index) {
                  return new Image.asset(
                    images[index],
                    fit: BoxFit.fill,
                  );
                },
                itemCount: 3),
          ))
        ],
      ),
    );
  }
}

更多关于Flutter页面转换效果插件transformer_page_view的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter页面转换效果插件transformer_page_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


transformer_page_view 是 Flutter 中一个非常流行的插件，用于创建具有各种页面转换效果的 PageView。它提供了多种内置的转换效果，并且可以通过自定义来创建独特的页面切换动画。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 transformer_page_view 依赖：

dependencies:
  flutter:
    sdk: flutter
  transformer_page_view: ^0.1.6

然后运行 flutter pub get 来安装依赖。

基本使用

下面是一个简单的示例，展示了如何使用 transformer_page_view 来创建一个带有转换效果的 PageView。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TransformerPageView Example'),
        ),
        body: TransformerPageView(
          loop: true,
          transformer: PageTransformerBuilder(
            builder: (Widget child, TransformInfo info) {
              return Transform.scale(
                scale: info.position.abs(),
                child: Opacity(
                  opacity: 1 - info.position.abs(),
                  child: child,
                ),
              );
            },
          ),
          itemCount: 3,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              color: Colors.primaries[index % Colors.primaries.length],
              child: Center(
                child: Text(
                  'Page $index',
                  style: TextStyle(fontSize: 32, color: Colors.white),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

参数说明

  • loop: 是否循环播放页面，默认为 false。
  • transformer: 定义页面转换效果。可以通过 PageTransformerBuilder 自定义转换效果。
  • itemCount: 页面数量。
  • itemBuilder: 页面构建器，用于构建每个页面。

内置转换效果

transformer_page_view 提供了多种内置的转换效果，你可以直接使用：

  • AccordionTransformer: 手风琴效果。
  • ScaleAndFadeTransformer: 缩放和淡入淡出效果。
  • ThreeDTransformer: 3D翻转效果。
  • ZoomInPageTransformer: 缩放进入效果。

例如，使用 AccordionTransformer：

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

自定义转换效果

你可以通过 PageTransformerBuilder 来自定义页面转换效果。例如，创建一个简单的缩放效果：

TransformerPageView(
  loop: true,
  transformer: PageTransformerBuilder(
    builder: (Widget child, TransformInfo info) {
      return Transform.scale(
        scale: 1 - info.position.abs(),
        child: child,
      );
    },
  ),
  itemCount: 3,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      color: Colors.primaries[index % Colors.primaries.length],
      child: Center(
        child: Text(
          'Page $index',
          style: TextStyle(fontSize: 32, color: Colors.white),
        ),
      ),
    );
  },
)
回到顶部