Skip to content

Latest commit

 

History

History
86 lines (62 loc) · 1.9 KB

CupertinoTabBar.md

File metadata and controls

86 lines (62 loc) · 1.9 KB
title description type
CupertinoTabBar
控件介绍
widgets

CupertinoTabBar

CupertinoTaBar并不是对应TabBar,CupertinoTaBar和CupertinoTabScaffold配合使用,是一个底部导航。

基本用法如下:

CupertinoTabScaffold(
  tabBar: CupertinoTabBar(
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab1')),
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab2')),
    ],
  )
  ...
)

items表示每一个tab,类型是BottomNavigationBarItem,效果如下:

onTap是点击tab时的回调,背景色、选中状态icon颜色、未选中颜色设置如下:

CupertinoTabBar(
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab1')),
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab2')),
  ],
  onTap: (index){
    print('$index');
  },
  currentIndex: 1,
  backgroundColor: Colors.blue,
  activeColor: Colors.red,
)

效果如下:

CupertinoTabView

CupertinoTabView是拥有导航状态和历史的单独控件,用法如下:

CupertinoTabScaffold(
  tabBar: CupertinoTabBar(
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab1')),
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('tab2')),
    ],
  ),
  tabBuilder: (context, index) {
    return CupertinoTabView(
      defaultTitle: '老孟',
      builder: (context){
        return Center(
          child: Text('$index'),
        );
      },
    );
  },
)

builder构建当前的控件,defaultTitle并不是显示在顶部的title,而是路由的title。

routesonGenerateRouteonUnknownRoutenavigatorObservers的用法和MaterialApp对应参数用法一样。