Question

我正在为在多个页面上调用的底部导航创建一个类，因此将其放入自己的dart文件中。当我使用常规的底部导航栏时，它运行得很好。但是，我想使用弧形底部导航包。我遵循了一些YouTube教程，即使我完全复制了它们的内容，也无法浏览到其他页面。当每个“图标”没有自己的onTap属性时，我不明白如何设置导航。我希望小组中的专家们可以看看我在做什么错。

`import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:oracle_project/Card_Flip/daily_card.dart';
import 'package:oracle_project/Dashboard/home_screen.dart';
import 'package:oracle_project/Oracle_Deck/deck.dart';
import 'package:oracle_project/Shopping/componants/body.dart';

 
class BottomNav extends StatefulWidget {
 @override
 _BottomNavState createState() => _BottomNavState();
}
 
class _BottomNavState extends State<BottomNav> {
 Widget build(BuildContext context) {
   final HomeScreen _homeScreen = HomeScreen();
   final DailyCard _dailyCard = new DailyCard();
   final Deck _deck = new Deck();
   final Body _body = new Body();
 
   Widget _showPage = new HomeScreen();
 
   Widget _pageChooser(int page) {
     switch (page) {
       case 0:
         return _homeScreen;
         break;
       case 1:
         return _dailyCard;
         break;
       case 2:
         return _deck;
         break;
       case 3:
         return _body;
         break;
       default:
         return Container(
           child: Text("error page"),
         );
     }
   }
 
   return Scaffold(
     bottomNavigationBar: CurvedNavigationBar(
         color: Color(0xFFc9bbbe),
         backgroundColor: Colors.white,
         buttonBackgroundColor: Color(0xFFc9bbbe),
         height: 75,
         items: <Widget>[
           Icon(
             Icons.home,
             size: 30,
             color: Colors.black,
           ),
           Icon(
             Icons.change_history,
             size: 30,
             color: Colors.black,
           ),
           Icon(
             Icons.burst_mode,
             size: 30,
             color: Colors.black,
           ),
           Icon(
             Icons.shopping_basket,
             size: 30,
             color: Colors.black,
           ),
         ],
         animationDuration: Duration(milliseconds: 200),
         index: 0,
         animationCurve: Curves.bounceInOut,
         onTap: (int tappedIndex) {
           setState(() {
             _showPage = _pageChooser(tappedIndex);
           });
         }),
 
   );
 }
}
 
`


  [1]: https://i.stack.imgur.com/N3dV4.png

弯曲的底部导航栏可以在Flutter中连接到其他页面

0 个答案: