Flutter页面转换动画插件transformer_page_view_tv的使用

Flutter页面转换动画插件transformer_page_view_tv的使用

Build Status PRs Welcome pub package

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 相同，只需指定一个 transformer 到 TransformerPageView， 该 transformer 是 PageTransformer 的子类。

演示案例

差分动画（Parallax）
Welcome view
基础用法（Basic）
AccordionTransformer

查看代码 这里

ThreeDTransformer

查看代码 这里

ScaleAndFadeTransformer

查看代码 这里

ZoomInPageTransformer

查看代码 这里

ZoomOutPageTransformer

查看代码 这里

DepthPageTransformer

查看代码 这里

开始使用

安装

在 pubspec.yaml 文件中添加：

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 小部件。如果值为空，则必须指定 itemBuilder。
itemCount none 总项数。
itemBuilder none 根据索引返回一个部件的函数，如果为空，则必须指定 transformer。
内置差分效果

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

颜色差分（ParallaxColor）

颜色差分处理颜色变换，从一种颜色到另一种颜色。

图像差分（ParallaxImage）

图像差分处理图像，其速度比 PageView 更慢。

容器差分（ParallaxContainer）

容器差分处理文本或其他内容，其速度比 PageView 更快。

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

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

查看代码 这里

自定义动画

以下是一个完整的示例代码，演示如何使用 TransformerPageView 和不同的 transformer 创建不同类型的页面转换动画：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TransformerPageView Example'),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Color> list = [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.yellow,
    Colors.purple,
  ];

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

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

1 回复

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


当然，下面是一个关于如何使用 transformer_page_view_tv Flutter 插件来实现页面转换动画的示例代码。这个插件通常用于电视或大屏设备上，提供了一些自定义页面转换动画。

首先，确保你已经在 pubspec.yaml 文件中添加了 transformer_page_view_tv 依赖：

dependencies:
  flutter:
    sdk: flutter
  transformer_page_view_tv: ^最新版本号  # 请替换为实际最新版本号

然后，你可以在你的 Dart 文件中使用 TransformerPageView 来实现页面转换动画。以下是一个简单的示例：

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

class TransformerPageViewExample extends StatefulWidget {
  @override
  _TransformerPageViewExampleState createState() => _TransformerPageViewExampleState();
}

class _TransformerPageViewExampleState extends State<TransformerPageViewExample> with SingleTickerProviderStateMixin {
  late PageController _pageController;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: 0);
  }

  @override
  Widget build(BuildContext context) {
    return TransformerPageView.builder(
      pageController: _pageController,
      itemCount: 3,
      itemBuilder: (context, index) {
        return Center(
          child: Text(
            'Page ${index + 1}',
            style: TextStyle(fontSize: 32),
          ),
        );
      },
      transformer: ZoomPageTransformer(
        minScale: 0.85,
        maxScale: 1.05,
        verticalOffset: 50.0,
      ),
    );
  }
}

// 定义自定义的页面转换动画，例如缩放效果
class ZoomPageTransformer extends PageTransformer {
  final double minScale;
  final double maxScale;
  final double verticalOffset;

  ZoomPageTransformer({
    required this.minScale,
    required this.maxScale,
    required this.verticalOffset,
  });

  @override
  Offset transformPage(PagePosition position) {
    final double scaleFactor = minScale + (maxScale - minScale) * (1 - position.pixels / position.viewportDimension);
    final double verticalTranslate = verticalOffset * (1 - position.pixels / position.viewportDimension);

    return Offset(
      position.offset.dx,
      position.offset.dy + verticalTranslate,
    ) & Matrix4.identity()
      ..setScale(scaleFactor, scaleFactor, 1.0);
  }
}

在这个示例中：

  1. 我们首先定义了 MyApp 和 TransformerPageViewExample 组件。
  2. TransformerPageView.builder 用于构建页面视图，其中 itemBuilder 定义了每个页面的内容。
  3. transformer 属性使用了一个自定义的 ZoomPageTransformer 类，该类实现了 PageTransformer 接口，用于定义页面转换时的缩放效果。
  4. ZoomPageTransformer 类通过调整 scaleFactor 和 verticalTranslate 来实现页面的缩放和垂直偏移。

你可以根据需求调整 minScale、maxScale 和 verticalOffset 的值来更改动画效果。

这个示例展示了如何使用 transformer_page_view_tv 插件来创建具有缩放效果的页面转换动画。希望这对你有所帮助！

回到顶部