pageView中的appbar文本的幻影动画

Question

我想使标题淡出，当上一个屏幕到达中屏幕时，标题应该消失。下一个标题应逐渐消失，直到中途，下一个屏幕的新标题应逐渐消失。我该如何添加此动画，我使用的是动画播放和AnimatedSwitcher，但它不起作用。代码文件是：

数据类

import 'package:flutter/material.dart';

class DataModel {
  List<String> titles = ['Red1', 'Blue2', 'Green3'];
  List<String> content = ['Red1', 'Blue2', 'Green3'];
}

主屏幕

import 'package:flutter/material.dart';
import 'package:ui_design/model/data.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  initState() {
    super.initState();
    controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 100));
    animation = CurvedAnimation(parent: parent, curve: curve)
  }

  //
  DataModel dataModel = DataModel();
  int currentPageIndex = 0;
  bool isPageChanged = true;
  //
  @override
  Widget build(BuildContext context) {
    var appBarTitle = dataModel.titles[currentPageIndex];

    return Scaffold(
      appBar: AppBar(
        leading: const Icon(Icons.menu),
        title: Text(
          appBarTitle,
        ),
      ),
      body: PageView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: dataModel.content.length,
        onPageChanged: (value) => setState(() {
          appBarTitle = dataModel.titles[currentPageIndex];
        }),
        itemBuilder: (BuildContext context, int index) {
          currentPageIndex = index;
          print('Current page index $currentPageIndex');
          return Container(
            alignment: Alignment.center,
            child: Text(
              dataModel.content[index],
              style: const TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.bold,
              ),
            ),
          );
        },
      ),
    );
  }
}


// AnimatedSwitcher(
//       duration: const Duration(milliseconds: 500),
//       transitionBuilder: (Widget child, Animation<double> animation) {
//         return FadeTransition(child: child, opacity: animation);
//       },
//       child: Image.asset(
//         imageList[currentIndex.toInt()],
//         key: ValueKey<int>(currentIndex),
//       ),

Answer 1

您可以尝试窗口小部件，我正在使用pagecontroller和opcaity on title。

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  DataModel dataModel = DataModel();
  int currentPageIndex = 0;
  double opacity = 1;
  late final PageController pageController = PageController(
    initialPage: 0,
  )..addListener(() {
      debugPrint(pageController.page.toString());
      opacity =
          double.tryParse(pageController.page.toString().substring(1)) ?? 1;

      if (opacity < .5) {
        opacity = 1 - opacity * 2;
      }

      setState(() {});
    });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: const Icon(Icons.menu),
        title: Opacity(
          opacity: opacity,
          child: Text(
            dataModel.titles[currentPageIndex],
          ),
        ),
      ),
      body: PageView.builder(
        controller: pageController,
        scrollDirection: Axis.horizontal,
        itemCount: dataModel.content.length,
        onPageChanged: (value) {
          debugPrint("on page changed: $value");
          currentPageIndex = value;
          setState(() {});
        },
        itemBuilder: (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            child: Text(
              dataModel.content[index],
              style: const TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.bold,
              ),
            ),
          );
        },
      ),
    );
  }
}