在PageView中AppBar文本的颤振动画

Question

我想让标题淡出，当前一个屏幕到达中屏时标题应该消失。下一个标题应该在中途消失，下一个屏幕的新标题应该消失。我如何添加这个动画，我使用AnimatedOpacity和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

您可以尝试widget，我在title上使用PageController和Opcaity。

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,
),
),
);
},
),
);
}
}