Flutter入门（51）：Flutter 组件之 CupertinoTabBar 详解

1. 基本介绍

CupertinoTabBar 是一个 iOS 风格的底部选项卡，等同于 UITabBar，他的子控件 BottomNavigationBarItem 也就相当于 UITabBarItem。

CupertinoTabBar.png

CupertinoTabBar Tapped.gif

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. 属性介绍

BottomNavigationBarItem 属性	介绍
icon	@required 图标
title	标题
activeIcon	Widget 高亮时图标
backgroundColor	背景色，注意它不适用于 CupertinoTabBar，它只能在 BottomNavigationBar 中展示效果，Flutter入门（15）：Flutter 组件之 BottomNavigationBar 详解

CupertinoTabBar 属性	介绍
items	@required 子选项卡
onTap	点击选项卡回调
currentIndex	当前选中选项卡下标
backgroundColor	背景色
activeColor	选项卡高亮时颜色
inactiveColor	选项卡未选中时颜色，默认为 _kDefaultTabBarInactiveColor
iconSize	选项卡图标大小，默认为 30.0
border	边框

4. CupertinoTabBar 详解

CupertinoTabBar 值得注意的是，它只能配合 CupertinoTabScaffold 使用。属性不多，代码中已经备注好了。

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(
      // 点击回调
      onTap: (index){
        print(index);
      },
      currentIndex: 2, // 设置默认选中位置
      backgroundColor: Colors.lightBlueAccent, // tabbar 背景色
      activeColor: Colors.white, // 图标高亮颜色
      inactiveColor: Colors.grey, // 图标未选中颜色
      iconSize: 25, // 图标大小
      // 边框
      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), // 图标
      activeIcon: Icon(activeIcon), // 高亮图标
      title: Text("$title"), // 标题
      backgroundColor: Colors.yellow, // 背景色，仅在 BottomNavigatinBar 中生效，在 iOS 风格组件中无效
    );
  }
}

CupertinoTabBar Tapped.gif

5. 技术小结

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