Question

我试图在我拥有的每个视图上显示BottomNavigationBar，它正在工作，但这是一种“愚蠢”的方式...

我有一个自定义的BottomNavigationBar，我将其插入每个视图中。

var selectedIndex = 0;
class CustomBottombar extends StatefulWidget {
  CustomBottombar({Key key}) : super(key: key);
  @override
  _CustomBottombarState createState() => _CustomBottombarState();
}

class _CustomBottombarState extends State<CustomBottombar> {
  List _viewList = [FirstView(), SecondView()];
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: selectedIndex,
      onTap: _onItemTapped,
       items: _items,
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      selectedIndex = index;
      Navigator.of(context).popUntil((route) => route.isFirst
      );
      Navigator.pushReplacement(
              context,
              MaterialPageRoute(builder: (context) => _viewList[index]),
            );
    });
  }
  final _items = [
BottomNavigationBarItem(
            icon: Icon(
              Icons.refresh,
              color: Color(0xFFACACAC),
              size: 35,
            ),
            title: Text("first")),
BottomNavigationBarItem(
          icon: Icon(
            Icons.phone,
            color: Color(0xFFACACAC),
            size: 35,
          ),
          title: Text("second"),
        ),
BottomNavigationBarItem(
          icon: Icon(
            Icons.add_shopping_cart,
            color: Color(0xFFACACAC),
            size: 35,
          ),
          title: Text("thrid"),
        ),

]; }

在_onItemTapped函数中，我从“导航堆栈”中弹出所有内容，然后显示项目中的屏幕。

在我的FirstView（）中，我有了这段代码

class FirstView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(""),
      bottomNavigationBar: CustomBottombar(),
      endDrawer: CustomDrawer(),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => ContactView()),
            );
          },
          child: Text('First'),
        ),
      ),
    );
  }
}

现在我要移至“ ContactView”，它不是BottomNavigationBar中的项目

class ContactState extends State<ContactView> {
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar("title"),
      endDrawer: CustomDrawer(),
      bottomNavigationBar: CustomBottombar(),
      body: SafeArea(
          bottom: true,
          child: SingleChildScrollView(
            child: Container(child: Text("Contact"),),
          )),
    );
  }
}

我还将有很多其他视图，这些视图不在items数组中，但我想在其上显示BottomNavigationBar。我的问题确实是这个功能。

void _onItemTapped(int index) {
        setState(() {
          selectedIndex = index;
          Navigator.of(context).popUntil((route) => route.isFirst
          );
          Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(builder: (context) => _viewList[index]),
                );
        });
      }

因为在这里我要删除导航历史记录以显示“项目”数组中的“视图”。有标准的方法可以做到吗，希望有人可以提供帮助。

编辑：为了澄清：我有10个屏幕。其中只有3个可通过BottomNavigationBar导航，比方说这10个中的前3个。现在，我想从Screen1导航到Screen4。导航栏在屏幕上消失4。我想让导航栏保持在所有屏幕上。

编辑2

@Dhaval Kansara答案对我有用，但是我遇到了一个新问题。我有一个抽屉，在修复之前，它在BottomNavigationBar上方，现在BottomNavigationBar在上方。

但是我想要这样

Answer 1

对静态CupertinoTabBar使用BottomNavigationBar，如下所示。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:mqttdemo/Screen2.dart';
import 'package:mqttdemo/Screen3.dart';

import 'Screen1.dart';

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

class _HomeState extends State<Home> {
  int _currentIndex;
  List<Widget> _children;

  @override
  void initState() {
    _currentIndex = 0;
    _children = [
      Screen1(),
      Screen2(),
      Screen3(),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        currentIndex: _currentIndex,
        onTap: onTabTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text("Screen 1"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text("Screen 2"),
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.home), title: Text("Screen 3")),
        ],

      ),
        tabBuilder: (BuildContext context, int index) {
          return CupertinoTabView(
            builder: (BuildContext context) {
              return SafeArea(
                top: false,
                bottom: false,
                child: CupertinoApp(
                  home: CupertinoPageScaffold(
                    resizeToAvoidBottomInset: false,
                    child: _children[_currentIndex],
                  ),
                ),
              );
            },
          );
        }
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

从Screen3导航到screen4，如下所示：

    class Screen3 extends StatefulWidget {
      @override
      _Screen3State createState() => _Screen3State();
    }

    class _Screen3State extends State<Screen3> {
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.black,
          child: Center(
            child: RaisedButton(
              child: Text("Click me"),
              onPressed: () {
                Navigator.of(context, rootNavigator: false).push(MaterialPageRoute(
                    builder: (context) => Screen4(), maintainState: false));
              },
            ),
          ),
        );
      }

}

有没有一种方法可以在每个视图上显示BottomNavigationBar？

1 个答案: