使用 Tab 標籤

在遵循 Material Design 指南的應用程式中，使用 Tab 標籤是很常見的模式。Flutter 包含一種方便的方式，可建立 Tab 標籤版面配置，作為 material 程式庫的一部分。

此食譜會使用下列步驟建立 Tab 標籤範例：

1. 建立 TabController。
2. 建立 Tab 標籤。
3. 為每個 Tab 標籤建立內容。

要讓分頁正常運作，您需要保持選定的分頁與內容區塊同步。這項工作由 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。 查看原始碼 或 回報問題。