颤振动态更改CupertinoTabBar背景色

时间:2018-08-21 13:50:26

标签: flutter

我想更改标签的背景颜色。我有5个标签,并且我只希望第一个标签的背景是透明的。也是有色和无色。

标签条形码看起来像这样:

return new WillPopScope(
  onWillPop: () => new Future<bool>.value(true),
  child: new CupertinoTabScaffold(
    tabBar: new CupertinoTabBar(
      backgroundColor: Colors.white, //change here
      activeColor: Colors.black, // here 
      inactiveColor: Colors.grey, // here too
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.access_time),
          title: Text('Timeline'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.chat_bubble_outline),
          title: Text('Talk'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.search),
          title: Text('Search'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.account_circle),
          title: Text('Profile'),
        ),
      ],
    ),
    tabBuilder: (BuildContext context, int index) {
      return new DefaultTextStyle(
        style: const TextStyle(
          fontFamily: '.SF UI Text',
          fontSize: 17.0,
          color: CupertinoColors.black,
        ),
        child: new CupertinoTabView(
          builder: (BuildContext context) {
            switch (index) {
              case 0:
                return HomeScreen();
                break;
              case 1:
                return TimelineScreen();
                break;
              case 2:
                return TalkScreen();
                break;
              case 3:
                return SearchScreen();
                break;
              case 4:
                return ProfileScreen();
                break;
              default:
                break;
            }
          },
        ),
      );
    },
  ),
);

我尝试设置变量_currentIndex,并根据哪个索引用户进行了更改,但是由于出现错误,我无法调用setState

  

flutter:构建了_TabSwitchingView(dirty,state:
  颤抖:_TabSwitchingViewState#86c7b):
  flutter:在构建期间调用setState()或markNeedsBuild()。
  flutter:该HomeScreen小部件无法标记为需要构建,因为该框架已在
中   颤动:构建小部件的过程。可以将小部件标记为在构建阶段需要构建
  颤动:仅当其祖先之一正在建造时。允许此异常是因为框架
  flutter:在子代之前构建父代窗口小部件,这意味着将始终构建肮脏的后代。
  颤抖:否则,框架可能在此构建阶段无法访问此小部件。

有人有实现这一目标的想法吗?

1 个答案:

答案 0 :(得分:0)

我发现了。我不确定这是否合适。 希望这会有所帮助。

 return new WillPopScope(
    int currentIndex = 0;
  onWillPop: () => new Future<bool>.value(true),
  child: new CupertinoTabScaffold(
    tabBar: new CupertinoTabBar(
     onTap: (index) {
            setState(() {
              currentIndex = index;
            });
          },
          backgroundColor: currentIndex == 0 ? Colors.transparent : Colors.white,
          activeColor: currentIndex == 0 ? Colors.white : Colors.black,
          inactiveColor: currentIndex == 0 ? Colors.white.withOpacity(0.5) : Colors.grey,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.access_time),
          title: Text('Timeline'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.chat_bubble_outline),
          title: Text('Talk'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.search),
          title: Text('Search'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.account_circle),
          title: Text('Profile'),
        ),
      ],
    ),
    tabBuilder: (BuildContext context, int index) {
      return new DefaultTextStyle(
        style: const TextStyle(
          fontFamily: '.SF UI Text',
          fontSize: 17.0,
          color: CupertinoColors.black,
        ),
        child: new CupertinoTabView(
          builder: (BuildContext context) {
            switch (index) {
              case 0:
                return HomeScreen();
                break;
              case 1:
                return TimelineScreen();
                break;
              case 2:
                return TalkScreen();
                break;
              case 3:
                return SearchScreen();
                break;
              case 4:
                return ProfileScreen();
                break;
              default:
                break;
            }
          },
        ),
      );
    },
  ),
);