推到新屏幕后底部导航栏不隐藏

Question

我有两个屏幕 A 和 B，屏幕 A 有一个底部导航栏。

将A屏推到B屏后，A屏底部导航栏仍固定在B屏上。

我想在没有屏幕 A 底部导航的情况下显示全屏 B。

这是一个屏幕A，它有一个底部导航栏：

class Parent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TechOne',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: MyParentPage(title: 'TechOne'),
    );
  }
}

/*StatefulWidget is Widget with mutable*/
class MyParentPage extends StatefulWidget {
  MyParentPage({Key key, this.title}) : super(key: key);

  final String title;

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

/*State is a manager of StatefulWidget*/
class _MyParentPageState extends State<MyParentPage>
    with SingleTickerProviderStateMixin {
  var _itemSelected = 0;
  TabController _tabController;

  final _bodyUI = [
    HomeUI(),
    SearchUI(),
    Center(
      child: Text('Notification'),
    ),
    Center(
      child: Text('Account'),
    ),
  ];

  _onBottomNavigationBarTap(int index) {
    print(_itemSelected);
    setState(() {
      _itemSelected = index;
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: 4, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    _tabController.animateTo(_itemSelected);

    return Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          items: Values.itemsBottomNavigationBar,
          onTap: (index) {
            _onBottomNavigationBarTap(index);
          },
          currentIndex: _itemSelected,
          selectedItemColor: Colors.red,
          backgroundColor: Colors.white,
          type: BottomNavigationBarType.fixed,
        ),
        body: TabBarView(
            physics: NeverScrollableScrollPhysics(),
            controller: _tabController,
            children: <Widget>[
              _bodyUI[0],
              _bodyUI[0],
              _bodyUI[2],
              _bodyUI[3],
            ]));
  }
}

在 _bodyUI[0] 小部件中，我推送到屏幕 B：

Navigator.push(context, MaterialPageRoute(builder: (context) => SearchUI()));

这是一个屏幕B，底部导航栏还在这里，我想隐藏它：

class SearchUI extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Search',
      theme: ThemeData(primarySwatch: Colors.red),
      home: MySearchPage(),
    );
  }
}

class MySearchPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MySearchState();
  }
}

class _MySearchState extends State<MySearchPage> {
  final TextEditingController _textEditingController = TextEditingController();
  final FocusNode _focusNode = FocusNode();

  TextField _appBarTitle;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _appBarTitle = TextField(
        controller: _textEditingController,
        focusNode: _focusNode,
        autofocus: true,
        textInputAction: TextInputAction.done,
        textCapitalization: TextCapitalization.sentences,
        cursorColor: Colors.white,
        cursorRadius: Radius.circular(16),
        maxLines: 1,
        style: TextStyle(
          color: Colors.white,
        ),
        decoration: InputDecoration(
            border: InputBorder.none,
            prefixIcon: Icon(
              Icons.search,
              color: Colors.white,
            ),
            suffixIcon: IconButton(icon: Icon(Icons.clear, color: Colors.white,), onPressed: (){
              _textEditingController.clear();
            }),
            hintText: 'Search...',
            hintStyle:
                TextStyle(color: Colors.white.withOpacity(0.5), fontSize: 18)));
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: _appBarTitle,
      ),
      body: Center(
        child: Text('Search Screen'),
      ),
    );
  }
}

Answer 1

您的代码正在调用 SearchUI() 类作为 TabBarViews 之一：

 final _bodyUI = [
    HomeUI(),
    SearchUI(),
    Center(
      child: Text('Notification'),
    ),
    Center(
      child: Text('Account'),
    ),
  ];

这意味着它只会改变视图并将栏保留在​​那里。

编辑：在我之前删除的评论中，我提到嵌套的 MaterialApps 可能会导致问题。这似乎有助于纠正问题，但在下面的 cmets 中，您现在提到添加了后退箭头。以下引用来自Flutter documentation for AppBar。

如果省略了前导小部件，但 AppBar 位于 Scaffold 中 一个抽屉，然后将插入一个按钮来打开抽屉。 否则，如果最近的 Navigator 有任何先前的路线，则 而是插入 BackButton。可以通过以下方式关闭此行为 将automaticImplyLeading 设置为false。在这种情况下为空 前导小部件将导致中间/标题小部件拉伸到 开始。

基本上，您可以使用上述属性将其关闭。