Question

您好，我正在使用来自 Link to package 的动画底部导航栏包，但我无法理解如何切换到其他页面。我是扑初学者。我在单独的 dart 文件中准备了其他页面，但只有它们的连接是我不明白我该怎么做。这是我的代码。

class _DashboardState extends State<Dashboard>
with SingleTickerProviderStateMixin {
final autoSizeGroup = AutoSizeGroup();


var _bottomNavIndex = 0;


//default index of first screen
  AnimationController _animationController;
  Animation<double> animation;
  CurvedAnimation curve;



 final iconList = <IconData>[
    Icons.home,
    Icons.location_on,
    Icons.airplanemode_on,
    Icons.person,
  ];



 @override
  void initState() {
    super.initState();
    final systemTheme = SystemUiOverlayStyle.light.copyWith(
      systemNavigationBarIconBrightness: Brightness.dark,
    );
SystemChrome.setSystemUIOverlayStyle(systemTheme);

_animationController = AnimationController(
  duration: Duration(seconds: 1),
  vsync: this,
);
curve = CurvedAnimation(
  parent: _animationController,
  curve: Interval(
    0.5,
    1.0,
    curve: Curves.fastOutSlowIn,
  ),
);
animation = Tween<double>(
  begin: 0,
  end: 1,
).animate(curve);

Future.delayed(
  Duration(seconds: 1),
  () => _animationController.forward(),
);
}
List list = [
"Flutter",
"Dart",
"Firebase",
];

@override


Widget build(BuildContext context) {
return Scaffold(
  floatingActionButton: FloatingActionButton(
    focusColor: Colors.white,
    backgroundColor: Color(0xFFFF9800),
    child: const Icon(Icons.add, size: 30.0), splashColor: Colors.white,
    foregroundColor: Colors.white,
    onPressed: () {},
    //params
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: AnimatedBottomNavigationBar(
    icons: iconList,
    activeIndex: _bottomNavIndex,
    // elevation: 2,
    gapLocation: GapLocation.center,
    notchSmoothness: NotchSmoothness.smoothEdge,
    activeColor: Color(0xFFFF9800),
    splashColor: Colors.black,
    onTap: (index) => setState(() => _bottomNavIndex = index),
    //other params
  ),

谢谢

Answer 1

在点击功能中，您需要调用导航器。

onTap: (index) => setState(() => {
        _bottomNavIndex = index;
        Navigator.push(context,
           MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}),

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

Answer 2

嗨 Bew Smith 如果你想要相同的底部导航栏但没有库，那么你可以使用我的这段代码。这会很好，只需用你自己的页面替换我制作的页面

import 'package:flutter/material.dart';


class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  // Properties & Variables needed

  int currentTab = 0; // to keep track of active tab index
  final List<Widget> screens = [
    Dashboard(),
    Chat(),
    Profile(),
    Settings(),
  ]; // to store nested tabs
  final PageStorageBucket bucket = PageStorageBucket();
  Widget currentScreen = Dashboard(); // First view in viewport

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageStorage(
        child: currentScreen,
        bucket: bucket,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 10,
        child: Container(
          height: 60,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  MaterialButton(
                    minWidth: 40,
                    onPressed: () {
                      setState(() {
                        currentScreen =
                            Dashboard(); // if user taps on this dashboard tab will be active
                        currentTab = 0;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(
                          Icons.dashboard,
                          color: currentTab == 0 ? Colors.blue : Colors.grey,
                        ),
                        Text(
                          'Dashboard',
                          style: TextStyle(
                            color: currentTab == 0 ? Colors.blue : Colors.grey,
                          ),
                        ),
                      ],
                    ),
                  ),
                  MaterialButton(
                    minWidth: 40,
                    onPressed: () {
                      setState(() {
                        currentScreen =
                            Chat(); // if user taps on this dashboard tab will be active
                        currentTab = 1;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(
                          Icons.chat,
                          color: currentTab == 1 ? Colors.blue : Colors.grey,
                        ),
                        Text(
                          'Chats',
                          style: TextStyle(
                            color: currentTab == 1 ? Colors.blue : Colors.grey,
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),

              // Right Tab bar icons

              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  MaterialButton(
                    minWidth: 40,
                    onPressed: () {
                      setState(() {
                        currentScreen =
                            Profile(); // if user taps on this dashboard tab will be active
                        currentTab = 2;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(
                          Icons.dashboard,
                          color: currentTab == 2 ? Colors.blue : Colors.grey,
                        ),
                        Text(
                          'Profile',
                          style: TextStyle(
                            color: currentTab == 2 ? Colors.blue : Colors.grey,
                          ),
                        ),
                      ],
                    ),
                  ),
                  MaterialButton(
                    minWidth: 40,
                    onPressed: () {
                      setState(() {
                        currentScreen =
                            Settings(); // if user taps on this dashboard tab will be active
                        currentTab = 3;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(
                          Icons.chat,
                          color: currentTab == 3 ? Colors.blue : Colors.grey,
                        ),
                        Text(
                          'Settings',
                          style: TextStyle(
                            color: currentTab == 3 ? Colors.blue : Colors.grey,
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              )

            ],
          ),
        ),
      ),
    );
  }
}

如何使用动画底部导航栏颤动进行导航

2 个答案: