使用选项卡

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