目錄
description bug_report

使用 tabs

目錄

在 Material Design 設計準則裡，tabs 是一種常用的佈局模型。 Flutter 自帶的 Material 函式庫 可以幫助開發者們非常便捷的建立 tab 佈局。

這份教程將幫助你建立一個 tabs 佈局範例，請參見如下步驟：

步驟

  1. 建立 TabController

  2. 建立 tabs

  3. 為每個 tab 建立內容

1. 建立 TabController

為了使所選的 tab 與它所對應的內容能夠同步變化，需要用 TabController 進行控制。

我們既可以手動建立一個 TabController ，也能夠直接使用 DefaultTabController widget。

最簡單的選擇是使用 DefaultTabController widget，因為它能夠建立出一個可供所有子 widgets 使用的 TabController。

return MaterialApp(
  home: DefaultTabController(
    length: 3,
    child: Scaffold(),
  ),
);

2. 建立 tabs

現在我們已經成功建立了 TabController，接下來就可以用 TabBar widget 來建立 tabs。下面這個範例建立了包含三組 Tab widget 的 TabBar（一個），並把它放置於 AppBar widget 中。

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 預設將會在 Widget 樹中向上尋找離它最近的一個 DefaultTabController 節點作為自己的 TabController。如果你想手動建立 TabController，那麼你必須將它作為引數傳給 TabBar。

3. 為每個 tab 建立內容

現在我們已經成功建立了一些 tabs，接下來要實現的是 tab 被選中時顯示其對應的內容。為了實現這個效果，我們將使用 TabBarView widget。

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