Flutter-將TabBar放在body裏面

Flutter-將TabBar放在body裏面

可愛吧

有時候我們會需要將TabBar放在body裡面來控制畫面的切換，但是官方教學卻只有教如何放在AppBar裏面，所以今天就來學學如何放在body裡面吧！

這些教學也會做成一個完整的專案放在GitHub上面。

在開始前，我們需要先將狀態列給隱藏掉，原因是現在的手機太多奇奇怪怪的螢幕了，取消掉對於看起來以及設計都會比較輕鬆一點。

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
 overlays: [SystemUiOverlay.bottom]);

這段程式碼會將狀態列隱藏，並顯示下方的按鈕。

debugShowCheckedModeBanner: false,

而這段會將debug的標誌給消掉，不然看著好礙眼ＸＤ

整個會長這樣：

Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
        overlays: [SystemUiOverlay.bottom]);
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }

狀態列便會顯示：

狀態列與debug 的banner都消失了，讚啦！

再來可以開始設計TabBar啦！

TabBar與TabBarView之間是用Controller來繫結的，而Flutter本身就有提供一個預設的widget 名字叫做DefaultTabController，只要將TabBar與TabBarView放在這個容器裡面便能直接使用囉！

或是可以自己建立一個Controller 來控制兩邊的狀態，在這個專案裡都會使用第二種方式來控制。

如果要使用第二種方式，就必須要在StatefulWidget後面加上

with SingleTickerProviderStateMixin

全部會長這樣

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  Widget build(BuildContext context) {
    ....
  }
}

再來建立一個TabController的變數

TabController? _tabBarController;

前面必須加上? 讓他能在初始化之前是null的狀態，不然會報錯。

再來就是在InitState裡面初始化TabController

  @override
  void initState() {
    super.initState();
    _tabBarController = TabController(length: 2, vsync: this);
  }

vsync 是動畫的切換，因此我們前面才需要加上with SingleTickerProviderStateMixin

而長度就是依照TabBar與TabBarView的數量去設定

全部會長這樣：

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  TabController? _tabBarController;
  @override
  void initState() {
    super.initState();
    _tabBarController = TabController(length: 2, vsync: this);
  }

再來就可以開始寫TabBar啦！

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.blue,
      ),
      body: Container(
        decoration: const BoxDecoration(color: Colors.white),
        child: Column(
          children: [
            TabBar(
              controller: _tabBarController,
              labelColor: Colors.blue,
              unselectedLabelColor: Colors.black,
              tabs: [
                Tab(
                  text: 'test1',
                ),
                Tab(
                  text: 'test2',
                )
              ],
            ),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.grey[200],
                    border: const Border(
                        top: BorderSide(color: Colors.grey, width: 0.5))),
                child: TabBarView(
                  controller: _tabBarController,
                  children: [
                    Center(
                      child: TextButton(
                        onPressed: () {},
                        child: const Text("aaa"),
                      ),
                    ),
                    Center(
                      child: TextButton(
                        onPressed: () {},
                        child: const Text("bbb"),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

TabBarView必須要放在Expanded裏面，讓他可以佔滿剩餘的全部版面。

完成圖如下：

完成圖

很簡單吧！

下次見囉！