底部導(dǎo)航欄 BottomNavigationBar

它是屬于 Scaffold 中的一個(gè)位于底部的控件祭玉，與 BottomNavigationBarItem 配合使用

需要注意柄错，BottomNavigationBar如果不指定type秉剑，則當(dāng)items小于4個(gè)時(shí)辰妙，type屬性值為fixed雷恃，大于或等于4個(gè)時(shí)，則值會(huì)變?yōu)閟hifting狸吞，通常需要顯式的將type設(shè)置為fixed以達(dá)到期望的效果

BottomNavigationBarItem 屬性

 int _currentBottomBarIndex = 0;

 BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首頁',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.park),
            label: '廣場',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_cart),
            label: '購物車',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '我的',
          )
        ],
        type: BottomNavigationBarType.fixed,
        selectedItemColor: Colors.purple,
        unselectedItemColor: Colors.grey,
        selectedFontSize: 16,
        unselectedFontSize: 14,
        currentIndex: _currentBottomBarIndex,
        selectedLabelStyle: const TextStyle(color: Colors.purple),
        unselectedLabelStyle: const TextStyle(color: Colors.grey),
        onTap: (index){
          setState(() {
            _currentBottomBarIndex = index;
          });
        },
      ),

WX20220424-113110.png

任意導(dǎo)航欄 TabBar

它是切換Tab頁的入口良瞧，通常會(huì)放到AppBar控件中的bottom屬性中使用瞬雹，也可放到其他布局位置荣赶，其子元素按水平橫向排列布局凤价，一般會(huì)與TabBarView組合使用，形成聯(lián)動(dòng)效果拔创。

TabBar + TabBarView

TabBarView是Tab頁的內(nèi)容容器伏蚊，其內(nèi)放置Tab頁的主體內(nèi)容。

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {

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

  TabController controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Widget"),
        bottom: TabBar(
          controller: controller,
            tabs:[
              Tab(text: "社會(huì)心理學(xué)",),
              Tab(text: "發(fā)展心理學(xué)",),
              Tab(text: "變態(tài)心理學(xué)",),
              Tab(text: "健康心理學(xué)",)
            ]
        ),
      ),
      body: TabBarView(
        controller: controller,
        children: <Widget>[
          Icon(Icons.access_time),
          Icon(Icons.accessibility_new),
          Icon(Icons.keyboard),
          Icon(Icons.airline_seat_flat),
        ],
      ),
    );
  }
}

當(dāng)我們不需要通過代碼去手動(dòng)切換Tab頁時(shí)格粪，可使用默認(rèn)的控制器DefaultTabController

TabBar + PageView

保存狀態(tài)

直接使用如上方案躏吊，在每次切換Page 頁時(shí)，頁面都會(huì)重新創(chuàng)建帐萎，initState重新執(zhí)行比伏，想要提升性能，達(dá)到我們期望的效果疆导，則需要使用如下步驟保存狀態(tài)

在State類上混入AutomaticKeepAliveClientMixin類
重寫wantKeepAlive方法赁项，并返回true
在頁面的build方法中，調(diào)用super.build

iOS 風(fēng)格導(dǎo)航欄

關(guān)于部分iOS風(fēng)格的控件澈段，可以查看 Cupertino 官方文檔

Flutter 官方正在逐漸完善Cupertino風(fēng)格的控件體系悠菜，但總的來說仍然存在一些問題，目前還不太建議使用败富，這里僅作為介紹悔醋。

CupertinoTabBar + CupertinoTabView 示例

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '頁面框架',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}


class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: const [
          BottomNavigationBarItem(label: "首頁", icon: Icon(Icons.home)),
          BottomNavigationBarItem(label: "我的", icon: Icon(Icons.account_box)),
        ],
      ),
      tabBuilder: (BuildContext context, int index) {
        return CupertinoTabView(
          builder: (context) {
            switch (index) {
              case 0:
                return const FirstPage();
                break;
              case 1:
                return const SecondPage();
                break;
              default:
                return const FirstPage();
            }
          },
        );
      },
    );
  }
}

class FirstPage extends StatefulWidget {
  const FirstPage({Key? key}) : super(key: key);

  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold (
      navigationBar: const CupertinoNavigationBar(
        middle: Text("首頁"),
        transitionBetweenRoutes: false,
      ),
      child: Center(
        child: CupertinoButton (
          child: const Text("跳轉(zhuǎn)新頁"),
          onPressed: () {
            Navigator.of(context,rootNavigator: true).push(
                CupertinoPageRoute(
                    builder: (BuildContext context) {
                      return const NewPage();
                    }
                )
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatefulWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return const CupertinoPageScaffold (
      navigationBar: CupertinoNavigationBar(
        middle: Text("我的"),
      ),
      child: Center(
          child: Text("我的頁面")
      ),
    );
  }
}

class NewPage extends StatelessWidget {
  const NewPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        transitionBetweenRoutes: false,
      ),
      child: Container(
        alignment: Alignment.center,
        child: const Text("新頁面"),
      ),
    );
  }
}