使用选项卡

在遵循 Material Design 指南的应用中，使用标签是一个常见的模式。Flutter 在其 material 库 中提供了一种方便的方式来创建标签布局。

本示例使用以下步骤创建一个带标签的示例：

1. 创建 TabController。
2. 创建标签。
3. 为每个标签创建内容。

为了使标签正常工作，您需要将选定的标签和内容部分保持同步。这是 TabController 的作用。

您可以手动创建 TabController，也可以使用 DefaultTabController 小部件自动创建。

使用 DefaultTabController 是最简单的选择，因为它会创建一个 TabController 并将其提供给所有后代小部件。

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

当选择一个标签时，它需要显示内容。您可以使用 TabBar 小部件来创建标签。在本示例中，创建一个包含三个 Tab 小部件的 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 会向上查找小部件树，以找到最近的 DefaultTabController。如果您手动创建 TabController，请将其传递给 TabBar。

现在您有了标签，在选择标签时显示内容。为此，请使用 TabBarView 小部件。

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),
            ],
          ),
        ),
      ),
    );
  }
}