Question

我完全无法理解为什么底部导航栏中的图标没有更改颜色。默认的主页图标（标题为时间线）具有原色。单击其他选项卡时，选项卡会更改，但颜色不会更改。时间轴/主页图标仍保持原色

 _onPageChanged(int pageIndex) {
    setState(() {
      pageIndex = pageIndex;
    });
  }

  _onTap(int pageIndex) {
    _pageController.jumpToPage(pageIndex);

  }

  Scaffold buildAuthScreen() {
    return Scaffold(
      body: PageView(
        children: <Widget>[
          Timeline(),
          ActivityFeed(),
          Upload(),
          Search(),
          Profile(),
        ],
        controller: _pageController,
        onPageChanged: _onPageChanged,
        physics: NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: pageIndex,
        onTap: _onTap,

        type: BottomNavigationBarType.fixed,
        showUnselectedLabels: false,
        showSelectedLabels: false,
        selectedItemColor: Theme.of(context).primaryColor,
       // unselectedItemColor: Colors.grey,
        elevation: 4.0,
        items: [
          BottomNavigationBarItem(

            icon: Icon(Icons.home),
            title: Text('timeline'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.notifications_active),
            title: Text('notifications'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.photo_camera, size: 35.0),
            title: Text('camera'),
            ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            title: Text('search'),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.supervised_user_circle,
            ),
            title: Text('user'),
          )
        ],
      ),
    );

Answer 1

body: TabBarView(
            children: <Widget>[
              FirstTab(),
              CustomersPage(),
              ItemsPage(),
              MorePage()
            ],
            // if you want yo disable swiping in tab the use below code
            physics: NeverScrollableScrollPhysics(),
            controller: tabController,
          ),
          bottomNavigationBar: SizedBox(
            height: 70,
           child: Container(
             decoration: BoxDecoration(
                  gradient: LinearGradient(begin: Alignment.topCenter, colors: [
                Color(0xFF832685),
                Color(0xFFC81379),
                //Color(0xFFFAF2FB)
              ])),
            //color: Color(0xFF832685),
            //textStyle: TextStyle(fontSize: 10),
            child: TabBar(
              onTap: (index) {
                if (index == 0) {
                  setState(() {
                    this.appBarTitle = new Text('Invoices');
                    //title = "Invoices";
                  });
                } else if (index == 1) {
                  setState(() {
                    this.appBarTitle = new Text('Customers');
                    //title = "Customers";
                  });
                } else if (index == 2) {
                  setState(() {
                    this.appBarTitle = new Text('Items');
                    //title = "Items";
                  });
                } else if (index == 3) {
                  setState(() {
                    //this.appBarTitle = new Text('More');
                    title = "More";
                  });
                }
              },
              unselectedLabelColor: Colors.grey,
              indicator: UnderlineTabIndicator(
                borderSide: BorderSide(color: Color(0xFF832685), width: 0.0),
                //insets: EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0),
              ),
              indicatorColor: Color(0xFF832685),
              labelColor: Colors.white,
              labelStyle: TextStyle(fontSize: 11),
              tabs: <Widget>[
                Tab(
                  icon: Icon(Icons.assessment, size: 28,),
                  text: "Invoice",
                ),
                Tab(
                  icon: Icon(Icons.person_outline, size: 28,),
                  text: "Customers",
                ),
                Tab(
                  icon: Icon(Icons.format_list_bulleted, size: 28,),
                  text: "Items",
                ),
                Tab(
                  icon: Icon(Icons.more, size: 28,),
                  text: "More",
                ),
              ],
              controller: tabController,
            ),
          ),
          )
        ));
  }

Answer 2

有

Color selectedItemColor, 
Color unselectedItemColor

和

selectedIconTheme
unselectedIconTheme

BottomNavigationBar类的道具，尝试与它们一起玩

Flutter：BottomNavigationBar不会更改活动图标的颜色

2 个答案: