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],
              ),
            );
          },
        );
      },
    );
  }

 

posted @ 2020-03-13 16:09  lai1322  阅读(624)  评论(0编辑  收藏  举报