编辑

Question

我的应用程序中有多个页面，但是每个页面都有其自己的浮动操作按钮，这些按钮具有不同的功能（绑定到页面本身），每个页面本质上都是一个脚手架，我想要的是在所有页面中使用相同的底部导航栏其中只有支架的主体和FAB发生了变化。

Answer 1

int _currentIndex = 0;

enter code body

body:
  pages(_currentIndex),
  bottomNavigationBar: BottomNavigationBar(
    onTap: onTabTapped,
    currentIndex: _currentIndex,
    items: [
     //Enter your Menu list here
    ],
  ),

code page

pages(int currentPosition) {
switch (currentPosition) {
  case 0:
    return new pagehome();
  case 1:
    return new pagesongs();
  ...
  default:
    return new Text("Error");
 }
}

click event

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

Answer 2

您的问题本身有答案，但是您仍然可以尝试使用此方法

在pubsec.yaml中

  bmnav: ^0.3.4

您可以像这样使用底部栏导航

class BottomBarActivityState extends State<BottomBarActivity> {
  //different screens on selection of tabs
  final List<Widget> screens = [
    screen1(),
    screen2(),
    screen3(),
   ];
  Widget currentScreen = screen1();
  int currentTab = 0;
  final PageStorageBucket bucket = PageStorageBucket();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageStorage(child: currentScreen, bucket: bucket),
      bottomNavigationBar: bmnav.BottomNav(
        index: currentTab,
        items: [
          bmnav.BottomNavItem(Icons.home),
          bmnav.BottomNavItem(Icons.home),
          bmnav.BottomNavItem(Icons.home),
        ],
        onTap: (i) {
          setState(() {
            currentTab = i;
            currentScreen = screens[i];
          });
        },
      ),
    );
  }
}

编辑

screen1

class screen1 extends StatefulWidget {
  @override
  screen1State createState() {
    return new screen1State();
  }
}

class screen1State extends State<screen1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("screen1"),
      ),
      body: FloatingActionButton(
        backgroundColor: Colors.blue,
        onPressed: _onPressd,
        child: Icon(Icons.add),
      ),
    );
  }

  void _onPressd() {}
}

屏幕2

class screen2 extends StatefulWidget {
  @override
  screen1State createState() {
    return new screen2State();
  }
}

class screen2State extends State<screen2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("screen1"),
      ),
      body: FloatingActionButton(
        backgroundColor: Colors.blue,
        onPressed: _onPressd,
        child: Icon(Icons.add),
      ),
    );
  }

  void _onPressd() {}
}

如何使用相同的导航栏但页面/ FAB不同

2 个答案:

编辑