Flutter 如何在颤振中使用底部导航栏和提升按钮进行导航

我在Flatter中使用

BottomNavigationBar

，我想要的是通过单击

BottomNavigationBarItem

在页面之间导航。同时，在相同的

BottomNavigationBarItem

中导航到其他页面。让我通过我发现的这个例子来解释更多

说我的

BottomNavigationBar

有两个

BottomNavigationBarItem

：

调用

，和

消息

。和

Call

可以导航（例如使用

Elevatedbotton

单击）到

Page1

和

Page2

，而

消息

可以导航（通过

Elevatedbotton

单击）到

Page3

和

page4

像这样：

• 召唤
  -第1页
  -第2页

• 信息
  -第3页
  -第4页

解决了我50%的问题，现在我能做的就是从

Call

导航到

page1

和

page2

始终保持

BottomNavigationBar

活动，现在它仍然是第二部分，单击另一个

BottomNavigationBarItem

以导航到消息

，您可以这样尝试

class App extends StatefulWidget {
  // This widget is the root of your application.
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  int _selectedIndex = 0;
  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();
  Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case 'Site':
        return MaterialPageRoute(builder: (context) => SiteScreen());
     
      default:
        return MaterialPageRoute(builder: (context) => Home());
    }
  }

  void _onItemTapped(int index) {
    switch (index) {
      case 1:
        _navigatorKey.currentState!
            .pushNamedAndRemoveUntil("Site", (route) => false);
        break;
      default:
        _navigatorKey.currentState!
            .pushNamedAndRemoveUntil("Home", (route) => false);
    }
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        toolbarHeight: 0,
      ),
      body: Navigator(key: _navigatorKey, onGenerateRoute: generateRoute),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite_border),
            label: 'Site',
          ),
         
        ],
        showSelectedLabels: true,
        showUnselectedLabels: false,
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.white,
        unselectedItemColor: Color(0xFF9e9e9e),
        iconSize: 20,
        backgroundColor: KBlackColor,
        onTap: _onItemTapped,
      ),
    );
  }
}

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            child: Column(children: [
                TextButton(
                    onPressed: () {
                        MaterialPageRoute(builder: (context) => SubHome())
                     },
                    child: Text('Click'),
                )
            ]),
        );
    }
}

class SubHome extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            child: Column(children: [
                Text('SubHome')
            ]),
        );
    } 
}

类应用程序扩展StatefulWidget{
//此小部件是应用程序的根。
@凌驾
_AppState createState（）；
}
类_AppState扩展了状态{
int _selectedIndex=0；
最终GlobalKey _navigatorKey=GlobalKey（）；
路由生成器输出（路由设置设置）{
开关（设置.名称）{
案例“现场”：
返回MaterialPackageRoute（生成器：（上下文）=>SiteScreen（））；
违约：
返回MaterialPackageRoute（生成器：（上下文）=>Home（））；
}
}
void\u未映射（整数索引）{
开关（索引）{
案例1：
_navigatorKey.currentState！
.PushName和RemoveUntil（“站点”，（路由）=>false）；
打破
违约：
_navigatorKey.currentState！
.pushNamedRemoveUntil（“主”，路由）=>false）；
}
设置状态（）{
_selectedIndex=索引；
});
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
背景颜色：Colors.black，
工具栏高度：0，
),
主体：导航器（键：导航工作，onGenerateRoute:generateRoute），
底部导航栏：底部导航栏(
类型：BottomNavigationBarType.fixed，
项目：[
底部导航气压计(
图标：图标（Icons.home），
标签：“家”，
),
底部导航气压计(
图标：图标（图标。收藏夹边框），
标签：'站点'，
),
],
showSelectedLabels:true，
显示未选择的标签：false，
currentIndex:_selectedIndex，
选择编辑颜色：Colors.white，
unselectedItemColor:Color（0xFF9e9e9e），
iconSize:20，
背景颜色：KBlackColor，
onTap:\u未映射，
),
);
}
}
类Home扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
子项：列（子项：[
文本按钮(
已按下：（）{
MaterialPage路由（生成器：（上下文）=>SubHome（）
},
子项：文本（'Click'），
)
]),
);
}
}
类子组扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
子项：列（子项：[
正文（'分目'）
]),
);
} 
}

所以您就像是在说呼叫屏幕可以导航到另外两个屏幕，消息屏幕可以导航到另外两个屏幕，但底部导航栏将始终存在！！对吗？例如，当我们在Page1中时，底部导航将在调用时被着色（因为Page1是调用的子树）感谢您的评论，但是您的代码只允许在

BottomNavigationBarItem

之间导航，它们是

主页

和

站点

，在您的示例中，我已经可以这样做了。以您为例，我想要的是从

home

导航到另一个名为

page1

的页面，例如单击

ElevatedBottom

，然后仍然会显示

BottomNavigationBar

。是的。在主页上，您可以导航到

page1

和

BottomNavigationBar

显示

home

我该怎么做，因为给定的答案仍然不完整，您可以编辑您的答案以达到此目的吗？我已更新。你可以查一下。如果你还需要支持，你可以联系FB（），这对你很有帮助，谢谢你，兄弟，编码快乐