Question

我有3个屏幕-home，friends和profile。我希望在所有屏幕上始终显示AppBar和BottomNavigationBar。现在，我在AppBar文件的BottomNavigationBar中定义了Scaffold和main.dart。每当在BottomNavigationBar上点击选项时，Scaffold主体将替换为所选屏幕的内容。

main.dart：

Widget build(BuildContext context) {
return MaterialApp(
  home: Scaffold(
    appBar: AppBar(),
    body: SafeArea(
      child: Container(
        child: _pageOptions[_selectedPage],
      ),
    ),
    bottomNavigationBar: BottomNavigationBar(
      currentIndex: _selectedPage,
      onTap: (int index) {
        setState(() {
          _selectedPage = index;
        });
      },
      items: [
        BottomNavigationBarItem(
            icon: Icon(Icons.home), title: Text('Home')),
        BottomNavigationBarItem(
            icon: Icon(Icons.people), title: Text('Friends')),
        BottomNavigationBarItem(
            icon: Icon(Icons.person), title: Text('Profile'))
      ],
    ),
  ),
  routes: <String, WidgetBuilder>{
    '/home': (BuildContext context) => Home(),
    '/friends': (BuildContext context) => Friends(),
  },
);
}

现在，我有一个自定义的avatar小部件，该小部件已在home屏幕中重复使用。单击avatar时，我要显示friends屏幕。我在onTap的{{1}}方法中尝试了这段代码：

avatar

friends.dart：

{Navigator.pushNamed(context, '/friends')},

在点击Widget build(BuildContext context) { return Container( child: Text('Friends'), ); }时，我得到了avatar屏幕，但是其他所有内容都丢失了（friends，AppBar等）。

我该如何实现？我是否应该从我的所有3个屏幕中退回带有BottomNavigationBar，AppBar等的支架？这会对性能产生负面影响吗？还是仅通过替换BottomNavigationBar中的Scaffold的主体来做到这一点？

Answer 1

您可以将PageView用于页面插入Scaffold小部件的正文中。

只需单击导航栏即可更改页面。

修改

页面浏览量

PageView.builder(
  controller: pageController,
  physics: NeverScrollableScrollPhysics(),
  scrollDirection: Axis.vertical,
  itemCount: pages.length,
  itemBuilder: (context, index) {
    return getPage(index);
  });

先点击更改页码，然后再点击小部件的setState(() {});。

pageView的初始化

PageController pageController = PageController(
 initialPage: pageNumber, keepPage: true);

Answer 2

是的，您需要在所有三个屏幕中返回带有appbar的脚手架。您可以将appbar放在单独的statelesswidget类中，并在所有三个支架中使用它。底部导航栏相同。您可以尝试将返回的窗口小部件保留在构建方法“ const”中。由于标题会有所不同，因此appbar将无法使用。它不会被重建，所以不用担心性能。

如何实现始终具有AppBar和BottomNavigationBar的屏幕

2 个答案: