Flutter中从底部导航栏与按钮跳转同一页面显示效果不一致问题

Flutter项目中，底部导航栏切换到User_Profile页面显示正常，但从HomeScreen通过GFButton的Navigator.push跳转至该页面时，仅显示默认文本，两种跳转方式的页面显示效果不一致，需统一为底部导航栏的显示效果。

相关代码 #

main.dart #

Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    routes: {
      '/': (context) => _defaultHome,
      '/home': (context) => const BottomBar(),
    },
  );
}

BottomBar #

class BottomBar extends StatefulWidget {
  const BottomBar({Key? key}) : super(key: key);
 
  @override
  State<BottomBar> createState() => _BottomBarState();
}
 
class _BottomBarState extends State<BottomBar> {
  int _selectedIndex = 0;
  static final List<Widget> _widgetOptions = <Widget>[
    HomeScreen(),
    // ... 其他页面
    const User_Profile()
  ];
 
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });  
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _widgetOptions[_selectedIndex],
      ),
      bottomNavigationBar: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          BottomNavigationBar(
            currentIndex: _selectedIndex,
            onTap: _onItemTapped,
            type: BottomNavigationBarType.fixed,
            unselectedItemColor: const Color(0xFF526480),
            items: const [
              // ... 其他导航项
              BottomNavigationBarItem(
                  icon: Icon(FluentSystemIcons.ic_fluent_person_regular),
                  activeIcon: Icon(FluentSystemIcons.ic_fluent_person_filled),
                  label: "Profile")
            ],          
          ),        
        ],      
      ),    
    );  
  }
}

HomeScreen按钮 #

GFButton(
  onPressed: () {
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) =>
                const User_Profile()));
  },
  text: snapshot.data![index].name,
  blockButton: true,
)

解决方案 #

方案1：跳转至BottomBar并切换指定索引 #

核心思路是复用底部导航栏中已创建的User_Profile实例，而非新建实例。

1. 在BottomBar类中添加公共方法用于切换索引：

class BottomBar extends StatefulWidget {
  const BottomBar({Key? key}) : super(key: key);

  // 暴露切换索引的方法
  void switchToIndex(BuildContext context, int index) {
    final state = context.findAncestorStateOfType<_BottomBarState>();
    state?.setState(() {
      state._selectedIndex = index;
    });
  }

  @override
  State<BottomBar> createState() => _BottomBarState();
}

2. 修改HomeScreen按钮的onPressed逻辑：

GFButton(
  onPressed: () {
    // 先回到BottomBar页面
    Navigator.popUntil(context, ModalRoute.withName('/home'));
    // 切换到Profile对应的索引（假设是3）
    const BottomBar().switchToIndex(context, 3);
  },
  text: snapshot.data![index].name,
  blockButton: true,
)

方案2：使用命名路由传参切换索引 #

通过命名路由跳转至/home并携带目标索引参数，让BottomBar自动切换页面。

1. 修改HomeScreen按钮的跳转逻辑：

GFButton(
  onPressed: () {
    // 跳转到/home并携带Profile的索引（假设是3）
    Navigator.pushReplacementNamed(context, '/home', arguments: 3);
  },
  text: snapshot.data![index].name,
  blockButton: true,
)

2. 在_BottomBarState中处理参数：

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  // 获取路由参数
  final targetIndex = ModalRoute.of(context)?.settings.arguments as int?;
  if (targetIndex != null) {
    setState(() {
      _selectedIndex = targetIndex;
    });
  }
}

方案3：统一页面数据加载逻辑 #

如果User_Profile的显示依赖特定数据，确保数据加载逻辑与页面实例无关：

• 使用状态管理工具（如Provider、GetX）共享数据，让任何User_Profile实例都能读取到相同的数据源；
• 将数据加载逻辑移至initState或使用FutureBuilder/StreamBuilder确保每次页面初始化时都能正确获取数据。

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