我尝试在两个选项卡之间实现Shared Axis Transition。
当bottomNavigationBar
被点击时,selectedIndex
从0变为1,反之亦然。在这个变化过程中,转换应该是动画的。我的代码没有任何错误,但是没有动画发生。
谢谢你的建议。
谢谢。
body: PageTransitionSwitcher(
duration: const Duration(milliseconds: 500),
transitionBuilder: (Widget child, Animation<double> primaryAnimation,
Animation<double> secondaryAnimation) {
return SharedAxisTransition(
animation: primaryAnimation,
secondaryAnimation: secondaryAnimation,
transitionType: SharedAxisTransitionType.horizontal,
child: child);
},
child: selectedIndex == 0
? AnimationLimiter(
child: AnimatedList(
key: _key,
initialItemCount: db.dailyList.length,
itemBuilder: (context, index, animation) {
return AnimationConfiguration.staggeredList(
position: index,
duration: const Duration(milliseconds: 375),
child: SlideAnimation(
verticalOffset: 50.0,
child: FadeInAnimation(
child: SizeTransition(
sizeFactor: animation,
child: Tile(
title: db.dailyList[index][0],
goalAchieved: db.dailyList[index][1],
onChanged: (value) =>
{checkBoxChanged(value, index)},
deleteFunction: (context) => deleteGoal(index),
),
),
),
),
);
},
),
)
: AnimationLimiter(
child: ListView.builder(
itemCount: dbAchieved.dailyAchievedList.length,
itemBuilder: (context, index) {
return AchievedTile(
title: dbAchieved.dailyAchievedList[index][0],
deleteFunction: (context) => deleteAchievedGoal(index),
);
},
),
),
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Theme.of(context).backgroundColor,
unselectedItemColor: Colors.black.withOpacity(0.7),
selectedItemColor: Colors.black,
currentIndex: selectedIndex,
onTap: (index) => setState(() {
selectedIndex = index;
}),
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.fact_check_outlined), label: 'Carpe Diem'),
BottomNavigationBarItem(icon: Icon(Icons.done), label: 'Achieved')
],
),
1条答案
按热度按时间lyr7nygr1#
事实证明,我只需要为每个AnimationLimiter声明一个键,它就可以工作了。我只添加了以下内容:
一个月一个月一个月一个月一个月
然后将其添加到AnimationLimiter中
x1米2英寸x1米3英寸