Flutter中google_nav_bar页面切换异常及动画失效问题求助

AI 小北

2026-7-31

问题根源

每个页面单独实例化导航栏组件，导致各页面导航栏状态独立，切换页面后新导航栏无法同步选中状态，动画失效。
GNav的onTabChange参数错误，直接执行pagechange()而非传递回调函数，无法触发状态更新。
使用Navigator.pushNamed会堆积页面栈，且无法同步跨页面的导航栏选中状态。

解决方案1：页面独立维护导航栏状态

这种方案不需要额外状态管理库，每个页面自行维护对应导航栏选项的选中状态：

1. 修改导航栏组件

import 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';

class NavBar extends StatefulWidget {
  final int selectedIndex;
  final Function(int) onTabChanged;

  const NavBar({
    super.key,
    required this.selectedIndex,
    required this.onTabChanged,
  });

  @override
  State<NavBar> createState() => _NavBarState();
}

class _NavBarState extends State<NavBar> {
  @override
  Widget build(BuildContext context) {
    return GNav(
      // 绑定当前选中索引，触发动画
      selectedIndex: widget.selectedIndex,
      // 处理导航栏切换事件
      onTabChange: (index) {
        // 先更新选中状态，触发动画
        widget.onTabChanged(index);
        // 根据索引跳转对应页面，用pushReplacementNamed避免页面栈堆积
        switch(index) {
          case 0:
            Navigator.pushReplacementNamed(context, '/home');
            break;
          case 1:
            Navigator.pushReplacementNamed(context, '/previous');
            break;
          case 2:
            Navigator.pushReplacementNamed(context, '/upcoming');
            break;
          case 3:
            Navigator.pushReplacementNamed(context, '/info');
            break;
        }
      },
      curve: Curves.easeInOut,
      backgroundColor: Colors.black,
      color: Colors.white,
      activeColor: Colors.blue,
      tabBackgroundColor: Colors.transparent,
      gap: 3,
      hoverColor: Colors.grey,
      iconSize: 30,
      tabs: const [
        GButton(text: 'HOME', icon: Icons.home),
        GButton(text: 'PREVIOUS', icon: Icons.restart_alt),
        GButton(text: 'UPCOMING', icon: Icons.rocket_launch),
        GButton(text: 'ABOUT', icon: Icons.info),
      ],
    );
  }
}

2. 目标页面配置导航栏

以Home页面为例，其他页面对应修改_selectedIndex值：

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // Home对应导航栏第0个选项
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: const Center(child: Text('Home Page')),
      bottomNavigationBar: NavBar(
        selectedIndex: _selectedIndex,
        onTabChanged: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
    );
  }
}

Previous页面设置_selectedIndex = 1
Upcoming页面设置_selectedIndex = 2
About页面设置_selectedIndex = 3

解决方案2：全局状态管理统一维护导航栏状态

使用Provider实现全局状态共享，避免每个页面重复维护选中状态：

1. 添加Provider依赖

在pubspec.yaml中添加：

dependencies:
  provider: ^6.0.5

2. 创建导航状态管理类

import 'package:flutter/material.dart';

class NavigationProvider extends ChangeNotifier {
  int _selectedIndex = 0;

  int get selectedIndex => _selectedIndex;

  void setSelectedIndex(int index) {
    _selectedIndex = index;
    notifyListeners();
  }
}

3. 在main.dart中注册Provider

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => NavigationProvider(),
      child: const MyApp(),
    ),
  );
}

4. 修改导航栏组件

import 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:provider/provider.dart';
import './navigation_provider.dart';

class NavBar extends StatelessWidget {
  const NavBar({super.key});

  @override
  Widget build(BuildContext context) {
    final navProvider = Provider.of<NavigationProvider>(context);
    return GNav(
      selectedIndex: navProvider.selectedIndex,
      onTabChange: (index) {
        navProvider.setSelectedIndex(index);
        switch(index) {
          case 0:
            Navigator.pushReplacementNamed(context, '/home');
            break;
          case 1:
            Navigator.pushReplacementNamed(context, '/previous');
            break;
          case 2:
            Navigator.pushReplacementNamed(context, '/upcoming');
            break;
          case 3:
            Navigator.pushReplacementNamed(context, '/info');
            break;
        }
      },
      // 其他样式属性保持不变
      curve: Curves.easeInOut,
      backgroundColor: Colors.black,
      color: Colors.white,
      activeColor: Colors.blue,
      tabBackgroundColor: Colors.transparent,
      gap: 3,
      hoverColor: Colors.grey,
      iconSize: 30,
      tabs: const [
        GButton(text: 'HOME', icon: Icons.home),
        GButton(text: 'PREVIOUS', icon: Icons.restart_alt),
        GButton(text: 'UPCOMING', icon: Icons.rocket_launch),
        GButton(text: 'ABOUT', icon: Icons.info),
      ],
    );
  }
}

5. 目标页面配置导航栏

以Home页面为例，其他页面修改setSelectedIndex的参数：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import './navigation_provider.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    // 进入页面时同步全局选中状态
    Provider.of<NavigationProvider>(context, listen: false).setSelectedIndex(0);
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: const Center(child: Text('Home Page')),
      bottomNavigationBar: const NavBar(),
    );
  }
}

Previous页面调用setSelectedIndex(1)
Upcoming页面调用setSelectedIndex(2)
About页面调用setSelectedIndex(3)

内容的提问来源于stack exchange，提问作者Siddh Purohit