使用 PageView 时的 FadeTransition

Question

我试图做一些应该很简单的事情，但事实证明这非常困难！

当用户滚动到 flutter web 上的下一页时，我试图进行淡入淡出过渡。

我尝试使用在 stackoverflow 上找到的许多代码，但没有任何效果！

我最后尝试的是以下代码。它给了我一个白色的空白屏幕。当我使用..repeat(reverse: false)时_animationController，屏幕不断闪烁。

这是我的最终代码（空白屏幕）：

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


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

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

class _TestLayoutState extends State<TestLayout> with TickerProviderStateMixin {

  int _index = 0;
  late PageController pageController = PageController();

  late final AnimationController _animationController = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  );

  late final Animation<double> _fadeInFadeOut = Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);

  final List<String> _sectionsName = [
    "Home",
    // "heeeey",
    "Services"
  ];

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: MediaQuery.of(context).size.width > 760
      ? null
      : AppBar(
        elevation: 0.0,
        backgroundColor: Colors.transparent
      ),
      body: Stack(
        children: [
          NotificationListener(
            onNotification: (notification) {
              if(notification is UserScrollNotification){
                if (notification.direction == ScrollDirection.forward) {
                  print('down');
                  setState(() {
                    _animationController.forward();
                    pageController.nextPage(
                      curve: Curves.easeIn, duration: const Duration(milliseconds: 500)
                    );
                  });
                }
                if (notification.direction == ScrollDirection.idle) {
                  print('Idle');
                }

                if (notification.direction == ScrollDirection.reverse) {
                  print('up');
                  setState(() {
                    _animationController.forward();
                    pageController.previousPage(
                      curve: Curves.easeIn, duration: const Duration(milliseconds: 500)
                    );
                  });
                }
              }
              return false;
            },
            child: PageView(
              controller: pageController,
              scrollDirection: Axis.vertical,
              physics: const NeverScrollableScrollPhysics(),
              children: [
                FadeTransition(
                  opacity: _fadeInFadeOut,
                  child: Container(
                    color: Colors.red,
                    child: const Center(child: Text("Hi"))
                  )
                ),
                // Opacity(
                //   opacity: opacityHelper - (panPosition / screenHeight),
                //   child: Container(
                //     color: Colors.green,
                //     child: Center(child: Text("There"))
                //   )
                // ),
                FadeTransition(
                  opacity: _fadeInFadeOut,
                  child: Container(
                    color: Colors.yellow,
                    child: Center(child: Text("Welcome"))
                  )
                )
              ],
              onPageChanged: (index) {
                _index = index;
              }
            )
          )
        ]
      )
    );
  }
}

感谢任何帮助...提前致谢...

Answer 1

这可能有效

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: HomePage(),
  ));
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    const data = [
      ("Red", Colors.red),
      ("Green", Colors.green),
      ("Blue", Colors.blue),
      ("Orange", Colors.orange),
      ("Purple", Colors.purple),
      ("Pink", Colors.pink),
      ("Indigo", Colors.indigo)
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text('Stacked Page View'),
      ),
      body: StackedPageView(
        builder: (context, index) {
          return ColoredBox(
            color: data[index].$2,
            child: Column(
              children: [
                Expanded(
                  child: SizedBox.expand(
                    child: Center(
                      child: Text(
                        data[index].$1,
                        style: const TextStyle(fontSize: 32),
                      ),
                    ),
                  ),
                ),
                Padding(
                    padding: const EdgeInsets.all(32),
                    child:
                        Chip(label: Text('Page ${index + 1}/${data.length}'))),
              ],
            ),
          );
        },
        pages: data.length,
      ),
    );
  }
}

class StackedPageView extends StatefulWidget {
  final IndexedWidgetBuilder builder;
  final int pages;

  const StackedPageView({
    super.key,
    required this.builder,
    required this.pages,
  });

  @override
  State<StackedPageView> createState() => _StackedPageViewState();
}

class _StackedPageViewState extends State<StackedPageView> {
  int _upcomingPage = 0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onVerticalDragEnd: (details) {
        int upcomingPage = _upcomingPage;
        if ((details.primaryVelocity ?? 0) > 0) {
          upcomingPage--;
        } else if ((details.primaryVelocity ?? 0) < 0) {
          upcomingPage++;
        }
        upcomingPage = max(0, upcomingPage);
        upcomingPage = min(upcomingPage, widget.pages - 1);
        if (upcomingPage != _upcomingPage) {
          _upcomingPage = upcomingPage;
          setState(() {});
        }
      },
      child: SizedBox.expand(
        child: AnimatedSwitcher(
          duration: const Duration(seconds: 1),
          child: KeyedSubtree(
            key: ValueKey(_upcomingPage),
            child: widget.builder(
              context,
              _upcomingPage,
            ),
          ),
        ),
      ),
    );
  }
}

预览： https: //youtu.be/2dNzLvRDxzE