Dart 所有屏幕都需要一个持久/相同的底部导航栏-颤振

我是飞镖和飞镖的初学者。我一直在尝试在我的应用程序的三个不同页面上实现一个

导航栏。这种切换对于单个页面效果很好，但是我在所有页面上保持活动和非活动选项卡状态时遇到问题。似乎当它导航到另一个页面时，我也会在选项卡中丢失活动状态。这是我的密码

AppFooter.dart

import 'package:flutter/material.dart';

class AppFooter extends StatefulWidget {
  @override
  _AppFooterState createState() => _AppFooterState();
}

class _AppFooterState extends State<AppFooter> {
  int index = 0;
  @override
  Widget build(BuildContext context) {
    return new Theme(
      data: Theme.of(context).copyWith(
          // sets the background color of the `BottomNavigationBar`
          canvasColor: Colors.white,
          // sets the active color of the `BottomNavigationBar` if `Brightness` is light
          primaryColor: Colors.green,
          textTheme: Theme.of(context)
              .textTheme
              .copyWith(caption: new TextStyle(color: Colors.grey))),
      child: new BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          currentIndex: index,
          onTap: (int index) {
            setState(() {
              this.index = index;
            });
          switch (index){
            case 0:  Navigator.of(context).pushNamed('/dashboard');
            break;
            case 1:  Navigator.of(context).pushNamed('/medical centre');
            break;
            case 2:  Navigator.of(context).pushNamed('/history');
            break;

          }

          },
          items: [
            new BottomNavigationBarItem(
                backgroundColor: Colors.white,
                icon: index==0?new Image.asset('assets/images/dashboard_active.png'):new Image.asset('assets/images/dashboard_inactive.png'),
                title: new Text('Dashboard', style: new TextStyle(fontSize: 12.0))),
           new BottomNavigationBarItem(
               backgroundColor: Colors.white,
               icon: index==1?new Image.asset('assets/images/medical_sevice_active.png'):new Image.asset('assets/images/medical_sevice_inactive.png'),
               title: new Text('Health Services', style: new TextStyle(fontSize: 12.0))),
            new BottomNavigationBarItem(
                icon: InkWell(
                  child: Icon(
                    Icons.format_align_left,
                   // color: green,
                    size: 20.0,
                  ),
                ),
                title: new Text('History', style: new TextStyle(fontSize: 12.0))),
          ]),
    );
  }
}

导入“包装：颤振/材料.省道”；
类AppFooter扩展StatefulWidget{
@凌驾
_AppFooterState createState（）=>\u AppFooterState（）；
}
类_AppFooterState扩展状态{
int指数=0；
@凌驾
小部件构建（构建上下文）{
返回新主题(
数据：Theme.of（context）.copyWith(
//设置“底部导航栏”的背景色`
画布颜色：颜色。白色，
//如果“亮度”为浅，则设置“底部导航栏”的活动颜色
primaryColor:Colors.green，
textTheme:Theme.of（上下文）
.文本主题
.copyWith（标题：新文本样式（颜色：Colors.grey）），
子项：新的底部导航栏(
类型：BottomNavigationBarType.fixed，
当前索引：索引，
onTap：（int索引）{
设置状态（）{
这个指数=指数；
});
开关（索引）{
案例0:Navigator.of（context.pushNamed（'/dashboard'）；
打破
案例1:Navigator.of（context.pushNamed（'/medicalcenter'）；
打破
案例2:Navigator.of（context.pushNamed（'/history'）；
打破
}
},
项目：[
新海底导航气压计(
背景颜色：Colors.white，
图标：index==0？新建Image.asset（'assets/images/dashboard_active.png'）：新建Image.asset（'assets/images/dashboard_inactive.png'），
标题：新文本（“仪表板”，样式：新文本样式（fontSize:12.0）），
新海底导航气压计(
背景颜色：Colors.white，
图标：index==1？new Image.asset（'assets/images/medical\u sevice\u active.png'）：new Image.asset（'assets/images/medical\u sevice\u active.png'），
标题：新文本（“卫生服务”，样式：新文本样式（fontSize:12.0）），
新海底导航气压计(
图标：InkWell(
子：图标(
Icons.format_align_left，
//颜色：绿色，
尺寸：20.0，
),
),
标题：新文本（“历史”，样式：新文本样式（fontSize:12.0）），
]),
);
}
}
Navigator.of（context）.pushNamed（）用于页面转换的导航。因此，在这种情况下，方法是不匹配的

您可以将
BottomNavigationBar
与
Scaffold
一起使用

示例代码：


class AppFooter extends StatefulWidget {
  @override
  _AppFooterState createState() => _AppFooterState();
}

class _AppFooterState extends State<AppFooter> {
  int _currentIndex = 0;

  List<Widget> _pages = [
    Text("page1"),
    Text("page2"),
    Text("page3"),
  ];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          new BottomNavigationBarItem(
              backgroundColor: Colors.white,
              icon: _currentIndex == 0
                  ? new Image.asset('assets/images/dashboard_active.png')
                  : new Image.asset('assets/images/dashboard_inactive.png'),
              title:
                  new Text('Dashboard', style: new TextStyle(fontSize: 12.0))),
          new BottomNavigationBarItem(
              backgroundColor: Colors.white,
              icon: _currentIndex == 1
                  ? new Image.asset('assets/images/medical_sevice_active.png')
                  : new Image.asset(
                      'assets/images/medical_sevice_inactive.png'),
              title: new Text('Health Services',
                  style: new TextStyle(fontSize: 12.0))),
          new BottomNavigationBarItem(
              icon: InkWell(
                child: Icon(
                  Icons.format_align_left,
                  // color: green,
                  size: 20.0,
                ),
              ),
              title: new Text('History', style: new TextStyle(fontSize: 12.0))),
        ],
      ),
    );
  }
}



类AppFooter扩展StatefulWidget{
@凌驾
_AppFooterState createState（）=>\u AppFooterState（）；
}
类_AppFooterState扩展状态{
int _currentIndex=0；
列表页面=[
正文（“第1页”），
正文（“第2页”），
正文（“第3页”），
];
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：_页[_当前索引]，
底部导航栏：底部导航栏(
类型：BottomNavigationBarType.fixed，
currentIndex:_currentIndex，
onTap：（int索引）{
设置状态（）{
_currentIndex=索引；
});
},
项目：[
新海底导航气压计(
背景颜色：Colors.white，
图标：_currentIndex==0
？新建Image.asset（'assets/images/dashboard_active.png'）
：new Image.asset（'assets/images/dashboard_inactive.png'），
标题：
新文本（“仪表板”，样式：新文本样式（fontSize:12.0）），
新海底导航气压计(
背景颜色：Colors.white，
图标：_currentIndex==1
？新建Image.asset（'assets/images/medical\u service\u active.png'）
：new Image.asset(
“资产/图像/医疗服务非活动.png”），
标题：新文本（“卫生服务”，
样式：新文本样式（fontSize:12.0）），
新海底导航气压计(
图标：InkWell(
子：图标(
Icons.format_align_left，
//颜色：绿色，
尺寸：20.0，
),
),
标题：新文本（“历史”，样式：新文本样式（fontSize:12.0）），
],
),
);
}
}
如果我正确理解了您的问题，您需要在所有三个页面上保留底部导航栏。关于如何实现这一目标，有一篇写得很好的文章。你可以在这里找到详细信息



所有学分归原作者。
我正在开发一个测试版的，可以达到要求的结果

两天前，我实现了一个附加功能，您可以在其中设置一个
ExpressHome
，它可以是树的任何部分，当然也可以设置路线。更改路线时，ExpressHome下的所有内容将仅更改，其余内容将保持不变（即，您可以轻松拥有永久酒吧）

今晚我将发布一个更新的版本，如果您想要一个关于您的用例的具体演示，请告诉我。
我创建了一个小的、超级易于使用的软件包，让您可以实现这个效果。
并写了一篇关于它的教程，你可以在媒体上找到它

事情是这样的

// Here's the custom scaffold widget
// It takes a normal scaffold with mandatory bottom navigation bar
// and children who are your pages
CustomScaffold(
  scaffold: Scaffold(
    bottomNavigationBar: BottomNavigationBar(
      items: _items,
    ),
  ),

  // Children are the pages that will be shown by every click
  // They should placed in order such as
  // `page 0` will be presented when `item 0` in the [BottomNavigationBar] clicked.
  children: <Widget>[
    Page('0'),
    Page('1'),
    Page('2'),
  ],

  // Called when one of the [items] is tapped.
  onItemTap: (index) {},
);

//这是定制的scaffold小部件
//它需要一个带有强制性底部导航条的普通脚手架
//孩子们谁是你的页面
定制脚手架(
脚手架：脚手架(
底部导航栏：底部导航栏(
项目：_项目，
),
),
//Ch
import 'package:flutter/material.dart';

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

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter App';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: App(),
    );
  }
}

class App extends StatefulWidget {
  App({Key key}) : super(key: key);
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  PageController _myPage;
  var selectedPage;

  @override
  void initState() {
    super.initState();
    _myPage = PageController(initialPage: 1);
    selectedPage = 1;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: PageView(
          physics: NeverScrollableScrollPhysics(),
          controller: _myPage,
          children: <Widget>[
            Center(
              child: Text("Another Page"),
            ),
            Center(
                child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text("Page 1"),
                RaisedButton(
                  onPressed: () {
                    _myPage.jumpToPage(0);
                    setState(() {
                      selectedPage = 0;
                    });
                  },
                  child: Text("Go to another page"),
                )
              ],
            )),
            Center(child: Text("Page 2")),
            Center(child: Text("Page 3")),
          ],
        ),
        bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.home),
                color: selectedPage == 1 ? Colors.blue : Colors.grey,
                onPressed: () {
                  _myPage.jumpToPage(1);
                  setState(() {
                    selectedPage = 1;
                  });
                },
              ),
              IconButton(
                icon: Icon(Icons.star),
                color: selectedPage == 2 ? Colors.blue : Colors.grey,
                onPressed: () {
                  _myPage.jumpToPage(2);
                  setState(() {
                    selectedPage = 2;
                  });
                },
              ),
              IconButton(
                icon: Icon(
                  Icons.settings,
                ),
                color: selectedPage == 3 ? Colors.blue : Colors.grey,
                onPressed: () {
                  _myPage.jumpToPage(3);
                  setState(() {
                    selectedPage = 3;
                  });
                },
              ),
            ],
          ),
        ));
  }
}

Scaffold(
  body: SafeArea(
    top: false,
    child: IndexedStack(
      //Permet de garder le state des vues même quand on change de vue
      index: _currentIndex,
      children: _children,
    ),
  ),
  bottomNavigationBar: BottomNavigationBar( items: [ ] ),
);

static int index = 0;

final List<Widget> pages=[FirstScreen(),SecondScreen(),ThirdScreen()];

Scaffold(
 child: Stack(
  children: <Widget>[
    Navigator(
              key: _navigatorKey,
              onGenerateRoute: (RouteSettings settings) { 
                return MaterialPageRoute(
                  builder: (BuildContext context) => pages[cur_ind],
           );
        },
      ),
   ],
   bottomNavigationBar: BottomNavigationBar(

        onTap: (int index){
           
            setState(() {
             
              cur_ind=index;
              
            });

        },
        currentIndex: cur_ind,
        fixedColor: Colors.green, //let's say

        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.mail),
            title: Text('Messages'),
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.person), title: Text('Profile'))
        ],
      ),
  ),
),

Scaffold(
      // here is the IndexedStack as body
      body: IndexedStack(
          index: this._bottomNavIndex,
          children: [MangaGridView(), FavoriteManga()]),
      backgroundColor: Colors.black,
      bottomNavigationBar: AnimatedBottomNavigationBar(
        icons: [
          Icons.home_outlined,
          Icons.favorite_border,
          Icons.settings,
        ],
        inactiveColor: Colors.black,
        activeIndex: this._bottomNavIndex,
        gapLocation: GapLocation.none,
        activeColor: Theme.of(context).primaryColor,
        notchSmoothness: NotchSmoothness.verySmoothEdge,
        leftCornerRadius: 32,
        rightCornerRadius: 32,
        onTap: (index) => setState(() => this._bottomNavIndex = index),
        height: 70,
        splashColor: Theme.of(context).primaryColor,
        splashRadius: 40.0,
        splashSpeedInMilliseconds: 400,
        iconSize: 34,
      ),
    );