1. 基本介紹

CupertinoTabBar 是一個 iOS 風(fēng)格的底部選項卡，等同于 UITabBar，他的子控件 BottomNavigationBarItem 也就相當(dāng)于 UITabBarItem。

CupertinoTabBar.png

CupertinoTabBar Tapped.gif

2. 示例代碼

代碼下載地址。如果對你有幫助的話記得給個關(guān)注，代碼會根據(jù)我的 Flutter 專題不斷更新。

3. 屬性介紹

4. CupertinoTabBar 詳解

CupertinoTabBar 值得注意的是，它只能配合 CupertinoTabScaffold 使用。屬性不多，代碼中已經(jīng)備注好了。

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

class FMCupertinoTabBarVC extends StatefulWidget{
  @override
  FMCupertinoTabBarState createState() => FMCupertinoTabBarState();
}

class FMCupertinoTabBarState extends State <FMCupertinoTabBarVC> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return CupertinoTabScaffold(
      tabBar: _cupertinoTabBar(),
      tabBuilder: (context, index){
        return CupertinoPageScaffold(
          navigationBar: CupertinoNavigationBar(
            middle: Text("CupertinoTabBar"),
          ),
          child: ListView(
            children: [

            ],
          ),
        );
      },
    );
  }

  CupertinoTabBar _cupertinoTabBar(){
    return CupertinoTabBar(
      // 點擊回調(diào)
      onTap: (index){
        print(index);
      },
      currentIndex: 2, // 設(shè)置默認(rèn)選中位置
      backgroundColor: Colors.lightBlueAccent, // tabbar 背景色
      activeColor: Colors.white, // 圖標(biāo)高亮顏色
      inactiveColor: Colors.grey, // 圖標(biāo)未選中顏色
      iconSize: 25, // 圖標(biāo)大小
      // 邊框
      border: Border(
        top: BorderSide(
          width: 3,
          color: Colors.red
        ),
      ),
      items: [
        _bottomNavigationBarItem(Icons.add, "第一個"),
        _bottomNavigationBarItem(Icons.add, "第二個"),
        _bottomNavigationBarItem(Icons.add, "第三個"),
        _bottomNavigationBarItem(Icons.add, "第四個"),
      ],
    );
  }

  BottomNavigationBarItem _bottomNavigationBarItem(IconData activeIcon, String title){
    return BottomNavigationBarItem(
      icon: Icon(Icons.ac_unit), // 圖標(biāo)
      activeIcon: Icon(activeIcon), // 高亮圖標(biāo)
      title: Text("$title"), // 標(biāo)題
      backgroundColor: Colors.yellow, // 背景色，僅在 BottomNavigatinBar 中生效，在 iOS 風(fēng)格組件中無效
    );
  }
}

CupertinoTabBar Tapped.gif

5. 技術(shù)小結(jié)

CupertinoTabBar 屬性不多，了解一下即可。