如何在 Flutter 中使用可滑动标签

Question

其中一个 App Screen 需要滑动标签，所以我想顺便实现一下默认控制器，官方语法是：

home:DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_car)),
          Tab(icon: Icon(Icons.directions_transit)),
          Tab(icon: Icon(Icons.directions_bike)),
        ],
      ),
    ),
  ),
);

现在，在我的项目中， main.dart 文件包含路由和 materialapp 小部件，看起来像

Widget build(BuildContext context) {
    return MaterialApp(
        title: '....',        
        theme: ThemeData(....),
        home: LoginScreen(),
        initialRoute: '/LoginScreen',
        routes: {
          '/HomeScreen': (context) => HomeScreen(),
          '/LoginScreen': (context) => LoginScreen(),
          '/MatchesScreen': (context) => MatchesScreen(),//this is the screen i want to implement tabs
          ....
          //other routes
        });
  }

在匹配屏幕（标签屏幕）中，它将返回脚手架

class _MatchesScreenState extends State<MatchesScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          //it only holds app bar and other stuff           
    );
  }
}

这里我不能使用 home 属性，因为 home 是 MaterialApp() 的属性，我的问题是我如何在这种情况下使用选项卡，有没有办法替换 home 属性或覆盖它。帮我解决这个问题

Answer 1

您可以使用body 属性代替home

return DefaultTabController(
    length: 3,
    child: Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          tabs: [
            Tab(icon: Icon(Icons.directions_car)),
            Tab(icon: Icon(Icons.directions_transit)),
            Tab(icon: Icon(Icons.directions_bike)),
          ],
        ),
        title: Text('Flutter Tabs Example'),
      ),
      body: TabBarView(
        children: [
          MatchesScreen(),
          Text('second'),
          Text('third')
        ],
      ),
    )
);

但是有三个TabBar，如果一个TabBarView是MatchesScreen，那么剩下的两个TabBarView是什么？