如何在flutter中以编程方式切换BottomNavigationBar选项卡以及在页面之间导航

如何解决如何在flutter中以编程方式切换BottomNavigationBar选项卡以及在页面之间导航

我正在使用相当新的 Flutter。所以任何好的建议都会对我有帮助。

我正在创建一个包含三个页面的应用程序 - 一个主页、一个详细信息页面和一个设置页面。所以在我的主页代码中，提交一些数据后，用户将被带到第二页（即详细信息页面）

我使用 curved_navigation_bar [ https://pub.dev/packages/curved_navigation_bar ] 包作为我的底部导航栏。

HomeView.dart

import 'package:curved_navigation_bar/curved_navigation_bar.dart';
//necessary imports

class HomeView extends StatefulWidget {
  final GlobalKey globalKey;

  HomeView(this.globalKey);

  @override
  _HomeViewState createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: //SomeButton(
        onpressed: () => {
          final CurvednavigationBar navigationBar = widget.globalKey.currentWidget;
          navigationBar.onTap(1);  //<-This is the line where user will be taken to page 2
        }
      ),);
  }
}

现在我制作了一个 NavBar.dart 文件来管理我的应用程序中的导航。

NavBar.dart

import 'package:curved_navigation_bar/curved_navigation_bar.dart';
//necessary imports

class NavBar extends StatefulWidget {
  NavBar({Key key}) : super(key: key);

  @override
  _NavBarState createState() => _NavBarState();
}

class _NavBarState extends State<NavBar> {
  GlobalKey globalKey = new GlobalKey(debugLabel: 'btm_app_bar');
  ChatSessionDetails _chatSessionDetails = ChatSessionDetails();

  int _currentIndex;
  String _appBarTitle;

  List<Widget> pages = [];

  final PageStorageBucket bucket = PageStorageBucket();

  void initState() {
    super.initState();

    pages = [
      HomeView(globalKey),ChatView(key: PageStorageKey('ChatPage')),SettingsView()
    ];

    _currentIndex = 0;
    _appBarTitle = 'HomePage';
  }

  void changeTab(int index) {      //<-PageChange logic
    switch (index) {
      case 0:
        setState(
          () => {
            _appBarTitle = 'HomePage',_currentIndex = 0,},);
        break;
      case 1:
        if (_sessionDetails.file != null) {
          setState(
            () => {
              _appBarTitle = //some title,_currentIndex = 1
            },);
        } else {
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            content: Text('You haven\'t opened a session yet'),behavior: SnackBarBehavior.floating,));
        }
        break;
      case 2:
        setState(
          () => {
            _appBarTitle = 'Settings',_currentIndex = 2,);
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_appBarTitle),),body: PageStorage(
        child: pages[_currentIndex],bucket: bucket,extendBody: true,bottomNavigationBar: CurvednavigationBar(
        key: globalKey,items: <Widget>[
          Icon(Icons.home_rounded,size: 30,color: Colors.grey[600]),Icon(CustomIcons.whatsapp,Icon(Icons.settings_rounded,],onTap: (index) {
          changeTab(index); //Handle button tap
        },);
  }
}

整个导航都进行得很顺利，但是当我以编程方式调用 changeTab() 函数时，（不是通过点击底部导航标签），事情变得很奇怪。

下面是gif链接MyApp

选项卡应该更改，因为我没有将状态更改为 _sessionDetails.file != null 是 false。我怎样才能避免这种情况？

解决方法

在changeTab中你需要使用key来改变页面：

globalKey.currentState.setPage(1);

[更新]

来自作者的官方方式：

以编程方式更改页面

  //State class
  int _page = 0;
  GlobalKey _bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: CurvedNavigationBar(
          key: _bottomNavigationKey,items: <Widget>[
            Icon(Icons.add,size: 30),Icon(Icons.list,Icon(Icons.compare_arrows,],onTap: (index) {
            setState(() {
              _page = index;
            });
          },),body: Container(
          color: Colors.blueAccent,child: Center(
            child: Column(
              children: <Widget>[
                Text(_page.toString(),textScaleFactor: 10.0),RaisedButton(
                  child: Text('Go To Page of index 1'),onPressed: () {
                    //Page change using state does the same as clicking index 1 navigation button
                    final CurvedNavigationBarState navBarState =
                        _bottomNavigationKey.currentState;
                    navBarState.setPage(1);
                  },)
              ],));
  }