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

Question

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

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

像这样：

通话

-第1页

-第2页
留言

-第3页

-第4页

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

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')
            ]),
        );
    } 
}

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

how to navigate using BottomNavigationBar and also with ElevatedButton press in Flutter

flutter

flutter-navigation