使用选项卡

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

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-06-26。 查看源代码 或 报告问题。