使用 flutter 實現一個Tab導航欄

現現在打開一個 App，好比頭條、滴滴，都能看到一個 Tab 導航切換欄，用來切換到不一樣的展現頁。今天就用 Flutter 實現一下這種效果。

---

在 Flutter 裏，基本上全部的東西都是組件。Flutter 已經提供了不少 Material Design 風格的組件，能夠知足咱們大部分的需求，像 Tab 這種基礎組件，確定是有提供的啦。具體能夠看這裏 Components-Tabs ，寫的很詳細了，裏面有一些 do 和 don't ，遵循這些規則，能夠提供更好的用戶體驗。

---

1. 首先，實現基礎的骨架

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Study',
      home: Center(child: Text('Hello Tab')),
    );
  }
}
複製代碼

2. TabController

當咱們切換 Tab 導航欄時，Tab 的內容要跟着發生改變，這個就是須要 TabCOntroller 來完成的。想要簡單地實現，使用 DefaultTabController 就能夠了。固然，你也能夠不用，自定義你的 TabController ，參考 TabController class。二者的區別就在因而否 TabBar 和 TabBarView 是父組件是否有狀態。

DefaultTabController(
  // The number of tabs / content sections we need to display
  length: 3,
  child: // See the next step!
);
複製代碼

3. Tab 位置

通常來講，Tabs 能夠放置在頂部欄，如 app bar。這也是咱們使用 App 時常會看到的一種佈局方式。得益於 Material 提供了一個 Scaffold 組件，咱們是能夠很方便地實現腳手架佈局，包括頂部導航欄、中間內容、底部導航等。

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_car)),
          Tab(icon: Icon(Icons.directions_transit)),
          Tab(icon: Icon(Icons.directions_bike)),
        ],
      ),
    ),
  ),
);
複製代碼

4. 每一個 Tab 的內容

當選中一個 Tab 的時候，就要展現這個 Tab 對應的內容。也就是說這裏的 TarBarView 是要和 TabBar 一一對應的。

TabBarView(
  children: [
    Icon(Icons.directions_car),
    Icon(Icons.directions_transit),
    Icon(Icons.directions_bike),
  ],
);

複製代碼

仿真器看到的效果如圖所示：

可能，有一些人的需求是會不須要 app bar 中的標題部分，直接把 Tab 置於最上方的位置，這個其實也不難處理。以前咱們是把 TabBar 放在 AppBar 的 bottom 位置，如今放在 title 位置就行了嘛

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_car)),
          Tab(icon: Icon(Icons.directions_transit)),
          Tab(icon: Icon(Icons.directions_bike)),
        ],
      ),
    ),
  ),
);
複製代碼

效果如圖：

完整的代碼看這裏 tab_bar.dart

---

最後

筆者最近在學習flutter，會持續地記錄本身的學習過程，並放在 github 上。

有問題歡迎提出，你們一塊兒討論，一塊兒進步。

---

參考資料

Components-Tabs

DefaultTabController class

Tabbed AppBar