时间戳

首页 > 解决方案 > 如何在 Flutter 中使用 BottomNavigationBar 和 ElevatedButton 进行导航

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

问题描述

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

说 myBottomNavigationBar有两个BottomNavigationBarItem:Call和Message. 并且Call可以导航（例如使用Elevatedbotton单击）到Page1and Page2，同时Message可以导航（通过Elevatedbotton单击）到Page3and page4。

像这样：

这个解决方案解决了我 50% 的问题，我现在可以做的是从到导航Call并page1始终page2保持BottomNavigationBar活动状态，现在它仍然是第二部分，即单击另一个BottomNavigationBarItem以导航到消息

标签： flutterflutter-navigation

解决方案

你试试这个方法。


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

推荐阅读