flutter自定义tabbar显示

方法一:

  int _tabIndex = 0;
  var tabImages;
  // 存放三个页面,跟fragmentList一样
  var _pageList;
  var appBarTitles = ['今日任务', '兑换奖励', '我的'];

  // 根据选择获得对应的normal或者press的icon
  Image getTabIcon(int curIndex) {
    if (curIndex == _tabIndex) {
      return tabImages[curIndex][1];
    }
    return tabImages[curIndex][0];
  }

  /// 根据image路径获取图片
  Image getTabImage(String path) {
    return new Image.asset(
      path,
      width: 26.0,
      height: 26.0,
    );
  }
  /// 初始化数据
  void initData() {
    const rootPath = 'images';
    // 初始化选中和未选中的icon
    tabImages = [
      [
        getTabImage('$rootPath/[email protected]'),
        getTabImage('$rootPath/[email protected]')
      ],
      [
        getTabImage('$rootPath/[email protected]'),
        getTabImage('$rootPath/[email protected]')
      ],
      [
        getTabImage('$rootPath/[email protected]'),
        getTabImage('$rootPath/[email protected]')
      ]
    ];

    /*
     * 三个子界面
     */
    _pageList = [
      new HomePage(),
      new SecondPage(),
      new MyPage()
    ];
  }

  // 获取bottomTab的颜色和文字
  Text getTabTitle(int curIndex) {
    if (curIndex == _tabIndex) {
      return new Text(appBarTitles[curIndex],
          style: new TextStyle(
              fontWeight: FontWeight.bold,
              color: const Color.fromRGBO(52, 216, 105, 1)));
    } else {
      return new Text(appBarTitles[curIndex],
          style: new TextStyle(
              fontWeight: FontWeight.bold,
              color: const Color.fromRGBO(182, 182, 182, 1)));
    }
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    initData();
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        border: null,
        items: [
          new BottomNavigationBarItem(
              icon: getTabIcon(0),title: getTabTitle(0)),
          new BottomNavigationBarItem(
              icon: getTabIcon(1),title: getTabTitle(1)),
          new BottomNavigationBarItem(
              icon: getTabIcon(2),title: getTabTitle(2)),
        ],
        iconSize: 26.0,
        backgroundColor: Colors.white,
        currentIndex: _tabIndex,
        onTap: (index) {
          setState(() {
            _tabIndex = index;
          });
        },
      ),
      tabBuilder: (context, index) {
        return CupertinoTabView(
          builder: (context) {
            return _pageList[index];
          },
        );
      },
    );
  }

方法二:待续,后边加上。

你可能感兴趣的:(flutter相关)