如何在Flutter中为底部导航栏创建动画?

Question

我有一个底部导航栏我想让动画图标在没有外部包的情况下切换页面。

我还有一个问题，我添加了查看分页切换页面滑动，以及在导航栏图标中粘贴，但是我得到了一个错误。例如:我在页面1，我想切换到第3页，并通过第2页，它返回并停留在第2页.

_onPageChanged方法:

_onPageChanged(int index) {
setState(() {
_pageController.animateToPage(index,
duration: const Duration(milliseconds: 200), curve: Curves.easeInOut);
_activePage = index;
});
}

底部导航栏(从头开始)和ViewPager:

bottomNavigationBar: BottomNavBar(
activeTab: _activePage,
onTabTap: _onPageChanged,
tabs: const [
BottomNavBarItem(
icon: Icon(Icons.icon_1, color: gray),
selectedIcon: Icon(Icons.icon_1_selected, color: white)
),
BottomNavBarItem(
icon: Icon(Icons.icon_2, color: gray),
selectedIcon: Icon(Icons.icon_2_selected, color: white)
),
BottomNavBarItem(
icon: Icon(Icons.icon_3, color: gray),
selectedIcon: Icon(Icons.icon_3_selected, color: white)
),
],
),
body: PageView(
controller: _pageController,
onPageChanged: _onPageChanged,
children: _pages,
),

Answer 1

的图标参数是一个Widget，所以你可以使用任何你想要的Widget，这与导航栏无关，而是与你想要动画的内容有关。

所以它可以像一个图标一样简单，一旦被点击就会旋转。

class AnimatedButtonThingy extends StatefulWidget {
const AnimatedButtonThingy({Key? key}) : super(key: key);
@override
_AnimatedButtonThingyState createState() => _AnimatedButtonThingyState();
}
class _AnimatedButtonThingyState extends State<AnimatedButtonThingy>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
bool shouldAnimate = false;
@override
void initState() {
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 2));

super.initState();
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
shouldAnimate = !shouldAnimate;
shouldAnimate ? _controller.repeat() : _controller.stop();
});
},
child: Icon(Icons.auto_awesome));
}
}

把上面的代码当作伪代码来读，因为它还没有经过测试，但是给你一个可以做什么的想法。动画代码是从这里复制的