使用标签页

在遵循 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 的最新稳定版本。页面最后更新于 2025-01-30。 查看源代码 或 报告问题。