我如何在颤振屏幕上共享 appBar 和 bottomNavigation

Question

我是 flutter 的新手，我想要一个共享的 appBar 和 bottomNavigationBar 我目前使用的方式是在 spearte 文件中实现它们并将它们导入每个屏幕，但我需要让一个屏幕包含 appbar 和 bottomNavigationBar 并且 body 的内容根据路线呈现不同的视图，我无法制作它在主页上，因为主页呈现欢迎屏幕在 reactJS 中，我正在导入页眉和页脚，并在它们之间创建我的路线我怎样才能在 flutter 中制作类似的东西

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: navBar(),
  body: SingleChildScrollView(reverse: true, child: ScanPassport()),
  bottomNavigationBar: bottomNavigation(),
    currentIndex: _selectedIndex,
    onTap: _onItemTapped,
    showSelectedLabels: false,
    showUnselectedLabels: false,
    type: BottomNavigationBarType.fixed,
    ),
  );
 }
}

Answer 1

几个选项：

使用 MaterialApp() 路由器。 tutorial here 展示了如何重构您的 Scaffold()，这样您就没有 appBar、bottomNavigationBar 等的重复代码。这是用于视图路由的官方 Flutter 方法。

如果您需要更换 Scaffold() 主体但不能更改其他 Scaffold() 元素，您可以为采用“页面”值的主体创建一个小部件并更改它returns 来自 build() 基于传递的“页面”值。持有你的脚手架的小部件可以是有状态的，你的底部导航栏可以 setState() 页码。

Answer 2

在您的上下文中，您可以在成功登录后或欢迎屏幕（取决于应用程序）后只有一个脚手架主页屏幕。导航到主页后，您将分别在顶部和底部有 appBar 和底部导航栏。中间的剩余部分将是所选选项卡的正文内容。一旦你切换了底部导航的点击，你应该改变内容而不是使用路由来切换正文内容。当前页面状态将保留在首页。

我如何在颤振屏幕上共享 appBar 和 bottomNavigation

How can i make shared appBar and bottomNavigation across flutter screens

flutter

flutter-layout

flutter-navigation

flutter-appbar