使用选项卡

使用标签页是遵循 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),
            ],
          ),
        ),
      ),
    );
  }
}