CupertinoTabBar
Cupertino风格的标签栏,通常与CupertinoTabScaffold一起使用,作为CupertinoTabScaffold的tabBar属性值。具体使用方法如下:
final List<String> _titles = ['首页', '产品', '更多']; final List<Text> _pageContents = [Text('This is Home page'), Text('This is Product page'), Text('This is More page')]; int _selectedIndex = 0; @override Widget build(BuildContext context) { return CupertinoTabScaffold( tabBar: CupertinoTabBar( //作为整个页面框架的底部标签栏 currentIndex: _selectedIndex, //当前定位的索引 onTap: (index) { //点击标签栏的事件监听方法 setState(() { _selectedIndex = index; }); }, items: <BottomNavigationBarItem> [ //标签栏项集合 BottomNavigationBarItem( icon: Icon(Icons.home), title: Text(_titles[0]), ), BottomNavigationBarItem( icon: Icon(Icons.list), title: Text(_titles[1]), ), BottomNavigationBarItem( icon: Icon(Icons.more_horiz), title: Text(_titles[2]), ), ], ), tabBuilder: (BuildContext context, int index) { //标签栏对应的页面创建 return CupertinoTabView( builder: (BuildContext context) { return CupertinoPageScaffold( navigationBar: CupertinoNavigationBar( middle: Text(_titles[index]), ), child: Center( child: _pageContents[index], ), ); }, ); }, ); }