Futter：如何更改currentTab

问题描述

因此，我有一个BottomNavigationBar，它可以与活动和非活动状态下的颜色更改完美配合，但是我不想更改颜色，而是在SVG图像的活动和非活动状态下更改图标。下面是我的代码：

class AppNavigation extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => AppState();
}

const assetHome = 'assets/home_off.svg';
const assetRedemptions = 'assets/redeemed_off.svg';
const assetProfile = 'assets/profile_off.svg';


const assetHome1 = 'assets/home_on.svg';
const assetRedemptions1 = 'assets/redeemed_on.svg';
const assetProfile1 = 'assets/profile_on.svg';


class AppState extends State<AppNavigation> {
 
  static int currentTab = 0;

 // list tabs here
  final List<TabItem> tabs = [
    TabItem(
      tabName: "Home",icon: Icons.home,page: MyDealApp(),),TabItem(
      tabName: "Announcement",icon: Icons.announcement,page: MyRedemptionApp(),TabItem(
      tabName: "Notification",icon: Icons.notifications,page: MyProfileApp(),];

  AppState() {
    tabs.asMap().forEach((index,details) {
      details.setIndex(index);
    });
  }

  void _selectTab(int index) {
    if (index == currentTab) {
      tabs[index].key.currentState.popUntil((route) => route.isFirst);
   
    } else {
      setState(() => currentTab = index);
      debugPrint("currentTabber:$currentTab");
    }
  }

  @override
  Widget build(BuildContext context) {
    // WillPopScope handle android back btn
    return WillPopScope(
      onWillPop: () async {
        final isFirstRouteInCurrentTab =
        !await tabs[currentTab].key.currentState.maybePop();
        if (isFirstRouteInCurrentTab) {
          // if not on the 'main' tab
          if (currentTab != 0) {
            // select 'main' tab
            _selectTab(0);
            // back button handled by app
            return false;
          }
        }
        return isFirstRouteInCurrentTab;
      },child: Scaffold(
        // indexed stack shows only one child
        body: IndexedStack(
          index: currentTab,children: tabs.map((e) => e.page).toList(),// Bottom navigation
        bottomNavigationBar: BottomNavigation(
          onSelectTab: _selectTab,tabs: tabs,);
  }
}

class TabItem {
  // you can customize what kind of @R_165_4045@ion is needed
  // for each tab
  final String tabName;
  final IconData icon;
  final GlobalKey<NavigatorState> key = GlobalKey<NavigatorState>();
  int _index = 0;
  Widget _page;

  TabItem({
    @required this.tabName,@required this.icon,@required Widget page,}) {
    _page = page;
  }

  void setIndex(int i) {
    _index = i;
  }

  int getIndex() => _index;

  Widget get page {
    return Visibility(
      // only paint this page when currentTab is active
      visible: _index == AppState.currentTab,// important to preserve state while switching between tabs
      maintainState: true,child: Navigator(
        // key tracks state changes
        key: key,onGenerateRoute: (routeSettings) {
          return MaterialPageRoute(
            builder: (_) => _page,);
        },);
  }
}

class BottomNavigation extends StatelessWidget {
  BottomNavigation({
    this.onSelectTab,this.tabs,});

  final ValueChanged<int> onSelectTab;
  final List<TabItem> tabs;

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,items: tabs
          .map(
            (e) => _buildItem(
          index: e.getIndex(),icon: e.icon,tabName: e.tabName,)
          .toList(),onTap: (index) => onSelectTab(
        index,);
  }

  BottomNavigationBarItem _buildItem(
      {int index,IconData icon,String tabName}) {
    return BottomNavigationBarItem(
      icon: Icon(
        icon,color: _tabColor(index: index),title: Text(
        tabName,style: TextStyle(
          color: _tabColor(index: index),fontSize: 12,);
  }

  Color _tabColor({int index}) {
    return AppState.currentTab == index ? colorGreen : Colors.grey;
  }

 }

如您所见 _tabColor在活动和非活动状态下从蓝色切换为灰色，但是我希望在上面声明了SVG图像的图标中进行切换。 assetHome用于MyDealApp()，{{1}用于assetHome1； MyDealApp()用于assetRedemptions，MyRedemptionApp()用于assetRedemptions1，并且{{1} {}处于活动状态时，MyRedemptionApp()为1}}，assetProfile处于活动状态时为{{1}的最终MyProfileApp()，assetProfile1处于活动状态的MyProfileApp()的最终。 >

解决方法

您可以使用activeIcon的{​​{1}}和icon参数。如果提供了BottomNavigationBarItem，则只有在未选择该项目时才会显示activeIcon。

icon