如何为BottomNavBar传入当前索引以同步选中状态？

当然可以给drawer类传入当前页面的索引，同时还需要优化页面跳转逻辑，避免页面堆叠导致的状态更新延迟。以下是具体修改步骤：

1. 修改drawer类，添加初始索引参数 #

首先在drawer的StatefulWidget中添加必填的初始索引参数，然后在状态类中用该参数初始化选中索引：

import 'package:flutter/material.dart';
import 'home.dart';
import 'meditation.dart';
import 'music.dart';
import 'profile.dart';

class drawer extends StatefulWidget {
  // 添加初始索引参数
  final int initialIndex;
  const drawer({Key? key, required this.initialIndex}) : super(key: key);

  @override
  State<drawer> createState() => _drawerPageState();
}

class _drawerPageState extends State<drawer> {
  final List<Widget> _pages = [
    home(),
    meditation(),
    music(),
    profile(),
  ];

  late int _selectedIndex;

  @override
  void initState() {
    super.initState();
    // 使用传入的初始索引初始化选中状态
    _selectedIndex = widget.initialIndex;
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    // 用pushReplacement替换当前页面，避免页面堆叠
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => _pages[_selectedIndex]),
    );
  }

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      currentIndex: _selectedIndex,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.self_improvement),
          label: 'Meditation',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.music_note),
          label: 'Music',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: 'Profile',
        ),
      ],
      selectedItemColor: Colors.blue,
      unselectedItemColor: Colors.grey,
      onTap: _onItemTapped,
    );
  }
}

2. 在各页面中传入对应索引 #

修改首页和Meditation页面，去掉const修饰的Scaffold（因为要传入动态参数），并将当前页面的indexPage传给drawer：

首页代码修改： #

import 'package:flutter/material.dart';
import 'package:harmony/myAppbar.dart';
import 'drawer.dart';

class home extends StatelessWidget {
  final int indexPage = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      home: Scaffold(
        appBar: myAppBar(),
        // 传入首页对应的索引0
        bottomNavigationBar: drawer(initialIndex: indexPage),
      ),
    );
  }
}

Meditation页面代码修改： #

import 'package:flutter/material.dart';
import 'myAppbar.dart';
import 'drawer.dart';

class meditation extends StatelessWidget {
  final int indexPage = 1;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      home: Scaffold(
          appBar: myAppBar(),
          body: const Center(
            child: Text('Meditation Page'),
          ),
          // 传入Meditation页面对应的索引1
          bottomNavigationBar: drawer(initialIndex: indexPage)),
    );
  }
}

关键说明 #

• 之前的问题根源是drawer每次初始化都固定用home().indexPage作为选中索引，现在通过传入initialIndex，每个页面可以根据自身情况传递对应的索引，确保底部导航的初始选中状态正确。
• 使用Navigator.pushReplacement替代Navigator.push，可以避免页面堆叠，切换页面时直接替换当前页面，返回时不会回到之前的堆叠页面，同时保证底部导航的状态能及时更新。

注：建议遵循Flutter命名规范，类名首字母大写（比如home改为Home，meditation改为Meditation，drawer改为BottomNavBar），避免与系统组件名称混淆。

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