使用選項卡

使用標籤頁是遵循 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),
            ],
          ),
        ),
      ),
    );
  }
}