如何在我的底部导航栏中添加导航

Question

我是 Flutter 的新手，我想创建一个导航栏，当我点击它时可以改变颜色。我完成了那部分。现在我正在研究如何在点击导航栏时导航到另一个页面。

这是我的代码。

我不知道如何在我的代码中实现导航部分。我混淆了 isSelected 和 selectedIndex。希望有人能在这方面帮助我并澄清我对 Flutter 的更好理解。

class BottomNavBar extends StatefulWidget {
 
  @override
  State<BottomNavBar> createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {

  int _isSelected = 0;


  final List<BottomNavItem> _listBottomNavItems = const [   
    BottomNavItem(title:'Home', icon: Icons.home),
    BottomNavItem(title:'Activity', icon: Icons.receipt),
    BottomNavItem(title:'Wallet', icon: Icons.credit_card),
    BottomNavItem(title:'Notification', icon: Icons.notifications),
    BottomNavItem(title:'Settings', icon: Icons.person),
  ];

  @override
  Widget build(BuildContext context) {
    return 
      
          Row(   
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: List.generate(_listBottomNavItems.length,
            (index){  
              return BottomNavItem(   
                title: _listBottomNavItems[index].title,
                icon: _listBottomNavItems[index].icon, 
                isSelected: _isSelected == index,
                onTap: (){   
                  setState((){   
                    _isSelected = index;
              
                    
                  });
                }
              );
            })
          );
     
  }
}

class BottomNavItem extends StatelessWidget {

  final String title;
  final IconData icon;
  final bool? isSelected;
  final Function()? onTap;

  const BottomNavItem({  
    required this.title,
    required this.icon,
    this.isSelected,
    this.onTap
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,  
      child: Container(  
        padding: const EdgeInsets.all(5),
        width: 50,
        height: 40,  
        decoration: BoxDecoration(  
          color: isSelected == true ? Colors.black87: Colors.transparent,
          borderRadius: BorderRadius.circular(10),
        ),

        child: Column(  
          children: [    
            Icon(icon, color: isSelected == true ? Colors.white: Colors.black87, size: 17),
            const SizedBox(height: 5,),
            Text(
              title, 
              style: TextStyle(
                fontSize: 7, 
                fontWeight: FontWeight.bold,
                color: isSelected == true ? Colors.white: Colors.black87
              ),
            )
          ],
        )
      ) 
    );
  }
}

Answer 1

希望这有效

Row(   
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: List.generate(_listBottomNavItems.length,
            (index){  
              return BottomNavItem(   
                title: _listBottomNavItems[index].title,
                icon: _listBottomNavItems[index].icon, 
                isSelected: _isSelected == index,
                onTap: (){   
                  setState((){   
                    _isSelected = index;
                    if(_listBottomNavItems[index].title == 'Home') {
                       Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) =>
                              Home(),
                        ));
                     } else if(_listBottomNavItems[index].title == 'Activity') {
                         //write accordingly
                      }
                    
                  });
                }
              );
            })
          );

Answer 2

您可以像这样在 BottomNavItem 中添加页面

class BottomNavItem extends StatelessWidget {
      
        final String title;
        final IconData icon;
        final bool? isSelected;
        final Function()? onTap;
        final Widget page;
      
        const BottomNavItem({
          required this.title,
          required this.icon,
          required this.page,
          this.isSelected,
          this.onTap
        });
      
        @override
        Widget build(BuildContext context) {
          return GestureDetector(
              onTap: () {
                onTap!();
                Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(
                    builder: (context) => page,
                  ),
                );
              },
              child: Container(
                  padding: const EdgeInsets.all(5),
                  width: 50,
                  height: 40,
                  decoration: BoxDecoration(
                    color: isSelected == true ? Colors.black87: Colors.transparent,
                    borderRadius: BorderRadius.circular(10),
                  ),
      
                  child: Column(
                    children: [
                      Icon(icon, color: isSelected == true ? Colors.white: Colors.black87, size: 17),
                      const SizedBox(height: 5,),
                      Text(
                        title,
                        style: TextStyle(
                            fontSize: 7,
                            fontWeight: FontWeight.bold,
                            color: isSelected == true ? Colors.white: Colors.black87
                        ),
                      )
                    ],
                  )
              )
          );
        }
      }

然后将您的页面添加到列表中。

final List<BottomNavItem> _listBottomNavItems = const [   
  BottomNavItem(title:'Home', icon: Icons.home, page: Home()),
  BottomNavItem(title:'Activity', icon: Icons.receipt, page: Activity()),
  BottomNavItem(title:'Wallet', icon: Icons.credit_card, page: Wallet()),
  BottomNavItem(title:'Notification', icon: Icons.notifications, page: Notification()),
  BottomNavItem(title:'Settings', icon: Icons.person, page: Settings()),
];

如何在我的底部导航栏中添加导航

How to add navigation in my Bottom Navigation Bar

navigation

dart

flutter