flutter - 打开新页面时如何隐藏bottomNavigationBar

Question

我创建了一个应用程序，当移动到另一个菜单时，bottomNavigationBar 仍然可见，当我打开新表单页面时需要，bottomNavigationBar 是隐藏的，我已经尝试了很多次但它不起作用，这是我的代码

主要.dart

import 'package:app/layout.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Layout(),
    );
  }
}

布局.dart

import 'package:app/pages/home.dart';
import 'package:app/pages/notif.dart';
import 'package:app/pages/profile.dart';
import 'package:app/pages/store.dart';
import 'package:flutter/material.dart';
import 'package:app/helpers/helper.dart';

class Layout extends StatefulWidget {
  Layout({this.tabIndex: 0});
  final int tabIndex;

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

class _LayoutState extends State<Layout> with SingleTickerProviderStateMixin{
  static final GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();
  TabController controller;
  DateTime currentBackPressTime;

  var index = 0, _pageIndex = 0, isLogged = false;

  @override
  void initState() {
    controller = new TabController(vsync: this, length: 4);
    index = widget.tabIndex;
    controller.index = widget.tabIndex;

    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  Future<bool> onWillPop() {
    DateTime now = DateTime.now();
    if (currentBackPressTime == null || now.difference(currentBackPressTime) > Duration(seconds: 2)) {
      currentBackPressTime = now;
      toast('Press again to exit');
      return Future.value(false);
    }
    return Future.value(true);
  }

  _active(int tab){
    return tab == _pageIndex ? Colors.green : Colors.grey;
  }

  @override
  Widget build(BuildContext context) {
    return new WillPopScope(
      onWillPop: onWillPop, // prevent click back on device
      child: new Scaffold(
        backgroundColor: background(),
        body: Stack(
          children: List<Widget>.generate(4, (int index) {
            return IgnorePointer(
              ignoring: index != _pageIndex,
              child: Opacity(
                opacity: _pageIndex == index ? 1 : 0,
                child: Navigator(
                  onGenerateRoute: (RouteSettings settings) {
                    return new MaterialPageRoute(
                      builder: (_) => _page(index),
                      settings: settings,
                    );
                  },
                ),
              ),
            );
          }),
        ),

        bottomNavigationBar: _bottomNavigationBar()
      )

    );
  }

  Widget _page(int index) {
    switch (index) {
      case 0: return Home();
      case 1: return Store();
      case 2: return Notif();
      case 3: return Profile();
    }

    throw toast('Invalid index $index');
  }

  _bottomNavigationBar(){
    return new Material(
      color: Colors.white,
      child: new TabBar(
        onTap: (int i){

          setState(() {
            _pageIndex = i;
          }); 

        },
        indicatorColor: Colors.white,
        labelStyle: TextStyle(fontSize: 11),
        controller: controller,
        tabs: <Widget>[
          Tab(child: Container(
            margin: EdgeInsets.only(top: 5),
            child: Column(
              children: <Widget>[
                Icon(Icons.assignment, color: _active(0),),
                text('Home', color: _active(0), size: 12)
              ]),
            ),
          ),

          Tab(child: Container(
            margin: EdgeInsets.only(top: 5),
            child: Column(
              children: <Widget>[
                Icon(Icons.store, color: _active(1),),
                text('Store', color: _active(1), size: 12)
              ]),
            ),
          ),

          Tab(child: Container(
            margin: EdgeInsets.only(top: 5),
            child: Column(
              children: <Widget>[
                Icon(Icons.notifications, color: _active(2),),
                text('Notif', color: _active(2), size: 12)
              ]),
            ),
          ),

          Tab(child: Container(
            margin: EdgeInsets.only(top: 5),
            child: Column(
              children: <Widget>[
                Icon(Icons.account_circle, color: _active(3),),
                text('Profile', color: _active(3), size: 12)
              ]),
            ),
          ),
        ],
      )
    );
  }

}

主页.dart

import 'package:app/pages/form.dart';
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        backgroundColor: Colors.white,
        titleSpacing: 15,
        title: Text('Home', style: TextStyle(color: Colors.black87),),
      ),

      body: Center(
        child: MaterialButton( 
          height: 40.0, 
          minWidth: 100.0, 
          color: Colors.white, 
          child: Text('MOVE TO NEW PAGE WITHOUT NAV'), 
          onPressed: (){
            Navigator.push(context, MaterialPageRoute( builder: (context) => NewForm() ));
          }, 
          splashColor: Colors.black12,
        ),
      ),
    );
  }
}

在 home.dart 我需要移动到表单页面并隐藏底部导航栏，我该如何解决这个问题？非常感谢您

标签： flutterdart

Answer 1

您可以使用“setState”

例如;

static bool anOtherMenuActive = false; // out of build

bottomNavigationBar: (!anOtherMenuActive) ? _bottomNavigationBar() : null

当您隐藏底部菜单时，请触发此状态

setState(() => anOtherMenuActive = true);