如何在 flutter 中創建動畫頁面瀏覽量？

Question

在此處輸入圖像描述

如何在flutter中創建曲線頁面animation頁面視圖

Answer 1

使用 integer 變量為有狀態小部件中的索引創建一個 pageview controller，然后像這樣初始化它們

  PageController pageController;
  int currentPageIndex = 0;

  @override
  void initState() {
    super.initState();
    pageController = PageController(initialPage: currentPage);
  }

然后您可以在您的 PageView 小部件中將它們與您的自定義頁面一起使用

PageView(
   controller: pageController,
      children: [
        Container(
         color: Colors.yellow,
        ),
        Container(
         color: Colors.red,
        ),
        Container(
         color: Colors.blue,
        ),
        ],
        onPageChanged: (index) {
          setState(() {
           currentPageIndex = index;
          });
        },
)

Answer 2

試試這個代碼：

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

class PageviewAnimation extends StatefulWidget {
  PageviewAnimation({Key? key}) : super(key: key);

  @override
  State<PageviewAnimation> createState() => _PageviewAnimationState();
}

class _PageviewAnimationState extends State<PageviewAnimation> {
  PageController controller = PageController();
  static dynamic currentPageValue = 0.0;

  List pageViewItem = [
    page(currentPageValue, Colors.tealAccent),
    page(2, Colors.red),
    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("Animation"),
        ),
        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),
      ],
    ),
  );
}

這是視頻