使用选项卡

使用选项卡是遵循 Material Design 指南的应用程序中的常见模式。Flutter 提供了一种方便的方式，作为其 material 库的一部分来创建选项卡布局。

本食谱通过以下步骤创建一个选项卡示例；

1. 创建一个 TabController。
2. 创建选项卡。
3. 为每个选项卡创建内容。

为了使选项卡正常工作，你需要保持选定的选项卡和内容部分同步。这是 TabController 的职责。

手动创建一个 TabController，或通过使用 DefaultTabController widget 自动创建一个。

使用 DefaultTabController 是最简单的选择，因为它会创建一个 TabController 并使其可用于所有后代 widget。

return MaterialApp(
  home: DefaultTabController(length: 3, child: Scaffold()),
);

选择选项卡时，它需要显示内容。你可以使用 TabBar widget 创建选项卡。在此示例中，创建一个包含三个 Tab widget 的 TabBar 并将其放置在 AppBar 中。

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

默认情况下，TabBar 会在 widget 树中查找最近的 DefaultTabController。如果你是手动创建 TabController，请将其传递给 TabBar。

现在你有了选项卡，当选择选项卡时显示内容。为此，使用 TabBarView widget。

body: const TabBarView(
  children: [
    Icon(Icons.directions_car),
    Icon(Icons.directions_transit),
    Icon(Icons.directions_bike),
  ],
),

import 'package:flutter/material.dart';

void main() {
  runApp(const TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  const TabBarDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: const TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: const Text('Tabs Demo'),
          ),
          body: const TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}