Flutter TabBarView 和 Tabs

Question

我的 TabBarView 和 Tabs 有一个奇怪的问题，那就是在使用 TabBarView 时，第一个屏幕的 appBar 标题出现在其他屏幕上。我只希望 screen1 中的 appBar 标题出现在 screen1 上，而 screen2 中的 appBar 标题出现在 screen2 上。 Screen1 和 Screen2 相同。 如何解决此错误？

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TabBarDemo(),
    );
  }
}

class TabBarDemo extends StatefulWidget {
  @override
  _TabBarDemoState createState() => _TabBarDemoState();
}

class _TabBarDemoState extends State<TabBarDemo>
    with SingleTickerProviderStateMixin {
 TabController tabController;
  List<Tab> tabBars;
  List<Widget> tabBarViews;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  tabController = new TabController(vsync: this, length: 3);
     tabBars = [
      Tab(icon: Icon(Icons.home, size: 34), text: 'Hem',),
      Tab(icon: Icon(Icons.search, size: 34), text: 'Sök',),
      Tab(icon: Icon(Icons.settings, size: 34), text: 'Inställningar'),
    ];
    tabBarViews = [welcomeLayout(context),Screen1(),Screen2()];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: ColorStyle.black,
        elevation: 0,
        automaticallyImplyLeading: false,
        title: Text('Home Screen'),
        centerTitle: true,
      ),
       body: TabBarView(
          children: tabBarViews,
          controller: tabController,
        ),
      bottomNavigationBar: TabBar(controller: tabController, tabs: tabBars,
        labelColor: ColorStyle.white,
      ),
    );
  }
}
class FirstScreen extends StatelessWidget {  
 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: ColorStyle.black,
        elevation: 0,
        title: Text('First Screen'),
        centerTitle: true,
      ),
      backgroundColor: ColorStyle.black,
      body: Container()
      ),
    );
  }
}

Answer 1

实际上它不是显示第一个屏幕的应用栏。这是您在 TabBarDemo 中提到的那个。因此，要摆脱它，请将其从他们的 i.e. 中删除-

@override
  Widget build(BuildContext context) {
    return Scaffold(
       //removed appBar
       body: TabBarView(
          children: tabBarViews,
          controller: tabController,
        ),
      bottomNavigationBar: TabBar(controller: tabController, tabs: tabBars,
        labelColor: ColorStyle.white,
      ),
    );
  }
}

如果你想在welcomeLayout中显示它，那么让它成为一个脚手架小部件并在那里显示appbar。