Question

我想在整个应用程序中保留持久的底部导航栏，因此在搜索了几个小时后，我找到了解决方案。这篇博客文章启发了我，并写了我的解决方案代码Flutter — navigating off the charts

import 'package:flutter/material.dart';
import './login/login.dart';
import './alerts/alerts.dart';
import './home/home.dart';
import './Theme.dart';
import './settings/settings.dart';
import './enroll/enroll.dart';
import './add_device/add_device.dart';
import './eachDevice/index.dart';
import './device_settings/device_settings.dart';
import 'splash_screen/splash_screen.dart';
import './geofences/geofence_list.dart';
import './geofences/draw_geofence.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import './home/second_navigation_bar.dart';
import 'dart:io';
import 'package:path/path.dart';
void main() {
  GlobalKey<NavigatorState> navigator = new GlobalKey<NavigatorState>();
  HttpOverrides.global = new AppHttpOverrides();
  Map<String, WidgetBuilder> _routes = <String, WidgetBuilder>{
    "/alerts": (BuildContext context) => new Alerts(),
    "/login": (BuildContext context) => new LoginPage(),
    "/settings": (BuildContext context) => new Settings(),
    "/enroll": (BuildContext context) => new Enroll(),
    "/add_device": (BuildContext context) => new AddDevice(),
    "/history": (BuildContext context) => new History(),
    "/home": (BuildContext context) => new Home(),
    "/device_settings": (BuildContext context) => new DeviceSettings(),
    "/geofence_list": (BuildContext context) => new GeofenceList(),
    "/draw_geofence": (BuildContext context) => new DrawGeofence(),
  };

  runApp(new MaterialApp(
    navigatorKey: navigator,
    home: new SplashScreen(),
    builder: (context, child) {
      return new Scaffold(
          body: child,
          bottomNavigationBar:myBottomNavigationBar(),
          resizeToAvoidBottomPadding: false
      );
    },
    theme: buildTheme(),
    routes: _routes,
  ));
}

此代码运行良好，并且所有应用程序页面中都有静态底部导航栏，但是我想在某些路径（例如登录页面）中排除底部导航栏，如何通过这种方法排除某些特定页面的底部导航栏。

Answer 1

为variable bottomNavigationBar声明content就像

var navContent;

为排除您的bottomNavigationBar创建方法

excludeBottomNavigationBar(){
    return Container(
      height: 0.0,
    );
  }

现在，您需要根据需要分配bottomNavigationBar内容，对于登录页面不包含bottomNavigationBar

import 'package:flutter/material.dart';
  import './login/login.dart';
  import './alerts/alerts.dart';
  import './home/home.dart';
  import './Theme.dart';
  import './settings/settings.dart';
  import './enroll/enroll.dart';
  import './add_device/add_device.dart';
  import './eachDevice/index.dart';
  import './device_settings/device_settings.dart';
  import 'splash_screen/splash_screen.dart';
  import './geofences/geofence_list.dart';
  import './geofences/draw_geofence.dart';
  import 'package:firebase_messaging/firebase_messaging.dart';
  import './home/second_navigation_bar.dart';
  import 'dart:io';
  import 'package:path/path.dart';
  void main() {
    GlobalKey<NavigatorState> navigator = new GlobalKey<NavigatorState>();
    HttpOverrides.global = new AppHttpOverrides();
    var navContent;

    excludeBottomNavigationBar(){
      return Container(
        height: 0.0,
      );
    }

    Map<String, WidgetBuilder> _routes = <String, WidgetBuilder>{
      "/alerts": (BuildContext context){
        navContent = myBottomNavigationBar();
        new Alerts();
      },
      "/login": (BuildContext context){
        navContent = excludeBottomNavigationBar();
        new LoginPage();
      },
      "/settings": (BuildContext context){
        navContent = myBottomNavigationBar();
        new Settings();
      },
      "/enroll": (BuildContext context){
        navContent = myBottomNavigationBar();
        new Enroll();
      },
      "/add_device": (BuildContext context){
        navContent = myBottomNavigationBar();
        new AddDevice();
      },
      "/history": (BuildContext context){
        navContent = myBottomNavigationBar();
        new History();
      },
      "/home": (BuildContext context){
        navContent = myBottomNavigationBar();
        new Home();
      },
      "/device_settings": (BuildContext context){
        navContent = myBottomNavigationBar();
        new DeviceSettings()
      },
      "/geofence_list": (BuildContext context){
        navContent = myBottomNavigationBar();
        new GeofenceList()
      },
      "/draw_geofence": (BuildContext context){
        navContent = myBottomNavigationBar();
        new DrawGeofence()
      },
    };

    runApp(new MaterialApp(
      navigatorKey: navigator,
      home: new SplashScreen(),
      builder: (context, child) {
        return new Scaffold(
            body: child,
            bottomNavigationBar:navContent,
            resizeToAvoidBottomPadding: false
        );
      },
      theme: buildTheme(),
      routes: _routes,
    ));
  }

Answer 2

采用变量bool isBottomNavBarToBeShown。您可以在Scaffold中为主体使用某种功能，例如

  _getScreen(route) {
    switch (route) {
      case 'route1':
        return Route1();
        break;

      case 'route2':
        return Route2();
        break;

      default:
        break;
    }
  }

但您必须更改

  "/login": (BuildContext context) => new LoginPage(),

到

      "/login": (BuildContext context) { 
               return new LoginPage();
              },

现在设置

    setState(() {
      isBottomNavBarToBeShown=false;
    });

例如

case 'route1':
setState(() {
      isBottomNavBarToBeShown=false;
    });
return Route1();
break;

以您的情况

    "/login": (BuildContext context) { 
               setState(() {
               isBottomNavBarToBeShown=false;
               });
               return new LoginPage();
             },

所以在您的Scaffold

bottomNavigationBar:myBottomNavigationBar(), 只需使用bottomNavigationBar:isBottomNavBarToBeShown ? myBottomNavigationBar() : null,

首先，首先创建一个Stateful屏幕，并将其添加到Scaffold中。这样您就可以访问setState

如果适合您，请对此进行更新。

Answer 3

我通过在我的主状态小部件中添加实例构造函数来解决它。

class MyAppState extends State<MyApp> {
  var _currentIndex = 0;

  static MyAppState instance = new MyAppState._();
  MyAppState._();

  // (Excluded Build and page routes)

  Widget buildBottomNavigationBar(context) =>
      BottomNavigationBar(
        items: [
          _buildBottomNavigationBarItem("A", Icons.add),
          _buildBottomNavigationBarItem("B", Icons.remove),
        ],
        onTap: onTabTapped,
        currentIndex: _currentIndex,
      );

  _buildBottomNavigationBarItem(name, icon) =>
      BottomNavigationBarItem(icon: Icon(icon), title: Text(name));

  //Routing for BottomNavigationBar
  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
      // Navigate ...
    });
  }
}

然后，您可以通过将以下行添加到所需的Scaffold中，在所需的任何屏幕中声明bottomNavigationBar。

bottomNavigationBar: MyAppState.instance.buildBottomNavigationBar(context)

如何从某些特定路线中删除永久性底部导航栏？

3 个答案: