點燈坊

失くすものさえない今が強くなるチャンスよ

TabBar 實現 Tab 介面 (DefaultTabController)

Sam Xiao's Avatar 2024-10-05

TabBar、TabBarView 與 DefaultTabController 可實現 Tab 介面。

Version

Flutter 3.24

Flutter

tabbar01

  • Android 與 iOS 都成功實現 TabBar

TabBar

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    var appBar = AppBar(
      title: const Text('TabBar with DefaultTabController'),
    );

    var tabBar = const TabBar(
      tabs: [
        Tab(text: 'Car'),
        Tab(text: 'Train'),
        Tab(text: 'Bike'),
      ],
    );

    var tabBarView = const Expanded(
      child: TabBarView(children: [
        Center(child: Text('Car Tab')),
        Center(child: Text('Train Tab')),
        Center(child: Text('Bike Tab')),
      ]),
    );

    var body = DefaultTabController(
      length: 3,
      child: Column(children: [
        tabBar,
        tabBarView,
      ]),
    );
    
    return Scaffold(
      appBar: appBar,
      body: body,
    );
  }
}

Line 28

var body = DefaultTabController(
  length: 3,
  child: Column(children: [
    tabBar,
    tabBarView,
  ]),
);
  • DefaultTabController：對於簡易的 TabBar，使用 DefaultTabController 即可，且 TabBar 與 TabBarView 必須在 DefaultTabController 底下
  • length：設定 Tab 數量

Line 12

var tabBar = const TabBar(
  tabs: [
    Tab(text: 'Car'),
    Tab(text: 'Train'),
    Tab(text: 'Bike'),
  ],
);
  • TabBar：建立 TabBar 顯示 Tab button
  • tabs：放置多個 Tab，個數 必須與 DefaultTabController 的 length 相同

Line 20

var tabBarView = const Expanded(
  child: TabBarView(children: [
    Center(child: Text('Car Tab')),
    Center(child: Text('Train Tab')),
    Center(child: Text('Bike Tab')),
  ]),
);
  • TabBarView：建立 TabBarView 顯示可切換的 view
  • TabBarView 放置在 Column 內時，必須包在 Expanded 內，否則會 render 失敗

Conclusion

  • 大多範例會將 TabBar 放在 appBar 下，事實上也可以放在 body 下
  • TabBarView 不會自動在 Column 內延展，必須包在 Expanded 內
  • DefaultTabControll 不必 直接放在 最上層，亦可放在 Scaffold 的 body 之下

# Flutter