Flutter中的页面视图动画

页面视图是一个逐页工作的列表。在本文中，我们将介绍如何在滑动时为页面设置动画。下面给出了一个示例视频，以了解我们将在本文中做什么。

我们将使用Transform小部件为页面设置动画。

句法

创建用于控制页面和收听滑动的页面控制器。

Dart

// page controller instance 
PageController controller = PageController();

创建一个变量 currentPageValue 用于设置所选页面的数量。

Dart

// variable to store 
// current value of page
var currentPageValue = 0.0;

将Listener添加到控制器以在页面更改时更改所选页面索引。

Dart

controller.addListener(() {
        // setState method to 
        // rebuild the widget
      setState(() { 
        currentPageValue = controller.page;  
      });
  });

在列表变量中创建页面列表内容。

Dart

List PageViewItem = [
 // item1,item2,item3  
]

创建一个示例 Page、pageno 和 color 作为参数，以便我们可以更改每个页面的文本和颜色。

Dart

Widget page(var pageno, Color color) {
  return Container(
    width: double.infinity,
    height: double.infinity,
    color: color,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Icon(
          Icons.pages,
          color: Colors.white,
        ),
        Text("${pageno}, Swipe Right or left"),
        Icon(Icons.arrow_right, color: Colors.white),
      ],
    ),
  );
}

构建页面视图

Dart

PageView.builder(
      itemCount: pageViewItem.length,
      scrollDirection: Axis.horizontal,
      controller: controller,
         itemBuilder: (context, position) {
              return Transform(
                transform: Matrix4.identity()
                  ..rotateX(currentPageValue - position),
                child: pageViewItem[position],
        );
 }),

Note: 

Position values goes between 0 1 2, currentPageValue value goes between 0 and 1 decimals.

Examples 0.255,1.897,2.232

Current Position value – position will return decimal numbers Between 0 and 1 negative rotate left, positive rotate right.

代码示例

使用RotateX 的动画

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(PageviewAnimation());
}
  
class PageviewAnimation extends StatefulWidget {
  PageviewAnimation({Key? key}) : super(key: key);
  
  @override
  State createState() => _PageviewAnimationState();
}
  
class _PageviewAnimationState extends State {
  PageController controller = PageController();
  static dynamic currentPageValue = 0.0;
  
  List pageViewItem = [
    page(currentPageValue, Colors.tealAccent),
    page(2, Colors.amber),
    page(3, Colors.cyan)
  ];
  
  @override
  void initState() {
    super.initState();
    controller.addListener(() {
      setState(() {
        currentPageValue = controller.page;
      });
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Page View Animation 1"),
        ),
        body: PageView.builder(
            itemCount: pageViewItem.length,
            scrollDirection: Axis.horizontal,
            controller: controller,
            itemBuilder: (context, position) {
              return Transform(
                transform: Matrix4.identity()
                  ..rotateX(currentPageValue - position),
                child: pageViewItem[position],
              );
            }),
      ),
    );
  }
}
  
Widget page(var pageno, Color color) {
  return Container(
    width: double.infinity,
    height: double.infinity,
    color: color,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Icon(
          Icons.pages,
          color: Colors.white,
        ),
        Text("${pageno}, Swipe Right or left"),
        Icon(Icons.arrow_right, color: Colors.white),
      ],
    ),
  );
}

输出

使用RotateZ 的动画

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(PageviewAnimation());
  
class PageviewAnimation extends StatefulWidget {
  PageviewAnimation({Key? key}) : super(key: key);
  
  @override
  State createState() => _PageviewAnimationState();
}
  
class _PageviewAnimationState extends State {
  PageController controller = PageController();
  static dynamic currentPageValue = 0.0;
  // list of pages
  List pageViewItem = [
    page(currentPageValue, Colors.tealAccent),
    page(currentPageValue, Colors.amber),
    page(currentPageValue, Colors.cyan)
  ];
  
  @override
  void initState() {
    super.initState();
    controller.addListener(() {
      setState(() {
        currentPageValue = controller.page;
      });
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Page View Animation 1"),
        ),
        // PageView builder builds the page.
        body: PageView.builder(
            itemCount: pageViewItem.length,
            scrollDirection: Axis.horizontal,
            controller: controller,
            itemBuilder: (context, position) {\
              // Transform using for animation
              return Transform(  
                transform: Matrix4.identity()
                  ..rotateZ(currentPageValue - position),
                child: pageViewItem[position],
              );
            }),
      ),
    );
  }
}
  
// this widget makes the page
Widget page(var pageno, Color color) {
  return Container(
    width: double.infinity,
    height: double.infinity,
    color: color,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Icon(
          Icons.pages,
          color: Colors.white,
        ),
        Text("${pageno}, Swipe Right or left"),
        Icon(Icons.arrow_right, color: Colors.white),
      ],
    ),
  );
}

输出