Question

我是 flutter 新手，我试图在按钮处于活动状态（被按下）时更改按钮的颜色，但我的代码没有按预期工作。有人知道我该如何解决吗？

我的代码：

import 'package:flutter/material.dart';

class BottomNavBar extends StatefulWidget {
  const BottomNavBar({Key? key}) : super(key: key);

  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int _selectedIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: <Widget>[
          iconButtonBar(context, Icons.home, 0, _selectedIndex),
          iconButtonBar(context, Icons.favorite, 1, _selectedIndex),
          iconButtonBar(context, Icons.person, 2, _selectedIndex),
          iconButtonBar(context, Icons.search, 3, _selectedIndex),
        ],
      ),
    );
  }

  Container iconButtonBar(
      BuildContext context, IconData icon, int index, int _selectedIndex) {
    return Container(
        height: 60,
        width: MediaQuery.of(context).size.width / 4,
        color: index == _selectedIndex ? Colors.blue : Colors.white, // changing the color
        child: IconButton(
          icon: Icon(icon),
          onPressed: () {
            _selectedIndex = index;
          },
        ));
  }
}

如果您有时间回答，真的很高兴。

Answer 1

您需要调用 setState();以便更改将反映到 UI。所以你的代码看起来

Container iconButtonBar(
      BuildContext context, IconData icon, int index, int _selectedIndex) {
    return Container(
        height: 60,
        width: MediaQuery.of(context).size.width / 4,
        color: index == _selectedIndex ? Colors.blue : Colors.white, // changing the color
        child: IconButton(
          icon: Icon(icon),
          onPressed: () {
            setState((){
            _selectedIndex = index;
            });
          },
        ));
  }

Answer 2

您应该尝试参考以下代码：

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

  @override
 _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {


PageController _pageController = PageController();
List<Widget> _screen = [
 Home(),
 MyProfile(),
 Conversations(),
 SearchPage()
];
void _onPageChanged(int index) {
setState(() {
  _selectedIndex = index;
});
}

void _onItemTapped(int selectedIndex) {
_pageController.jumpToPage(selectedIndex);
}


int _selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
  body: PageView(
    controller: _pageController,
    children: _screen,
    onPageChanged: _onPageChanged,
    physics: NeverScrollableScrollPhysics(),
  ),
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: this._selectedIndex,
    selectedItemColor: Colors.blue,
    unselectedItemColor: Colors.black45,
    backgroundColor: Colors.black,
    selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),
    onTap: _onItemTapped,
    items: [
      BottomNavigationBarItem(
        icon: Icon(
          Icons.home,
        ),
        label: 'Home',
      ),
      BottomNavigationBarItem(
          icon: Icon(
            Icons.person,
          ),
          label: 'Profile'),
      BottomNavigationBarItem(
          icon: Icon(
            Icons.sms,
          ),
          label: 'Messages'),
      BottomNavigationBarItem(
          icon: Icon(
            Icons.search,
          ),
          label: 'Search'),
      ],
    ),
  );
 }
}

如何根据用户选择更改底部导航栏图标的颜色

2 个答案: