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

Question

我有一个带有一些选项卡的底部导航栏，我想在切换页面时动画化它们的图标，而不是外包。

我还有一个问题，我添加了一个 view pager 来切换页面 swiping，然后 taping in导航栏图标，但出现错误。例如：我在第1页，我想切换到第3页，而它正在通过第 2 页，它返回并停留在 第 2 页。

_onPageChanged 方法：

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

    _activePage = index;
  });
}

BottomNavBar（从头开始）和 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

BottomNavigationBarItem的图标参数是一个Widget，所以你可以用任何你想用的Widget，这个和NavigationBar无关，而是你想要动画的东西。

所以它可以像点击后旋转的图标一样简单。

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

阅读上面的代码 pseudo-code，因为它还没有经过测试，但让您知道可以做什么。动画代码已从此处复制

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

How can I create an animation for the bottom navigation bar in Flutter?

flutter

dart

flutter-animation