Flutter TabBarView 和 Tabs

如何解决Flutter TabBarView 和 Tabs

我的 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,text: 'Sök',Tab(icon: Icon(Icons.settings,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,title: Text('First Screen'),backgroundColor: ColorStyle.black,body: Container()
      ),);
  }
}

解决方法

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

@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。