如何在 Flutter 中使用 BottomNavigationBar 和 ElevatedButton 进行导航

Question

我在 Flutter 中使用BottomNavigationBar，我想要的是通过正常点击BottomNavigationBarItem 在页面之间导航。同时，导航到其他页面但在同一个BottomNavigationBarItem。让我通过我找到的这个例子来解释更多 Here

说我的BottomNavigationBar有两个BottomNavigationBarItem：Call和Message。 Call 可以导航（例如使用Elevatedbotton 点击）到Page1 和Page2，而Message 可以导航（通过Elevatedbotton 点击）到Page3 和page4。

像这样：

• 打电话

  -第1页

  -第2页

• 留言

  -第3页

  -第4页

This solution 解决了我 50% 的问题，我现在可以做的是从 Call 导航到 page1 和 page2 始终保持 BottomNavigationBar 活着，现在它仍然是第二部分，即正在单击另一个 BottomNavigationBarItem 以导航到消息

Answer 1

你试试这个方法。

class App extends StatefulWidget {
  // This widget is the root of your application.
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  int _selectedIndex = 0;
  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();
  Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case 'Site':
        return MaterialPageRoute(builder: (context) => SiteScreen());
     
      default:
        return MaterialPageRoute(builder: (context) => Home());
    }
  }

  void _onItemTapped(int index) {
    switch (index) {
      case 1:
        _navigatorKey.currentState!
            .pushNamedAndRemoveUntil("Site", (route) => false);
        break;
      default:
        _navigatorKey.currentState!
            .pushNamedAndRemoveUntil("Home", (route) => false);
    }
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        toolbarHeight: 0,
      ),
      body: Navigator(key: _navigatorKey, onGenerateRoute: generateRoute),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite_border),
            label: 'Site',
          ),
         
        ],
        showSelectedLabels: true,
        showUnselectedLabels: false,
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.white,
        unselectedItemColor: Color(0xFF9e9e9e),
        iconSize: 20,
        backgroundColor: KBlackColor,
        onTap: _onItemTapped,
      ),
    );
  }
}

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            child: Column(children: [
                TextButton(
                    onPressed: () {
                        MaterialPageRoute(builder: (context) => SubHome())
                     },
                    child: Text('Click'),
                )
            ]),
        );
    }
}

class SubHome extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            child: Column(children: [
                Text('SubHome')
            ]),
        );
    } 
}