如何在flutter Curvednavigationbar中导航不同的页面？

Question

我正在尝试在 Curvednavigationbar 内幕中添加不同的页面路由导航我尝试了一些不同的方法但是它不起作用

我正在使用curved_navigation_bar: ^1.0.1 作为底部导航栏。

我尝试了不同的方法，但它不起作用。

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

class _BottomNavBarState extends State<BottomNavBar> {
  List<dynamic> _page = [
    Add(),
    Copyright(),
    HomePage(),
  ];
  int _activePage = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: CurvedNavigationBar(
          index: _activePage,
          height: 60.0,
          items: <Widget>[
            Icon(Icons.add, size: 30),
            Icon(Icons.list, size: 30),
            Icon(Icons.compare_arrows, size: 30),
          ],
          color: Colors.white,
          backgroundColor: Colors.blueAccent,
          animationCurve: Curves.easeInOut,
          animationDuration: Duration(milliseconds: 600),
          onTap: (index) {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => _page[index][1]));
          },
          letIndexChange: (index) => true,
        ),
        body: Container(
          color: Colors.blueAccent,
          child: Center(
            child: _page[_activePage],
          ),
        ));
  }
}

Answer 1

您需要更新页面索引而不是推送到新页面

onTap: (index) {
               setState(() { _activePage=index});
              },

Answer 2

请检查我根据您发布的示例创建的以下示例：

import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: BottomNavBar(),
  ));
}

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

class _BottomNavBarState extends State<BottomNavBar> {
  List<dynamic> _page = [
    Add(),
    Copyright(),
    HomePage(),
  ];
  int _activePage = 0;

  @override
  Widget build(BuildContext context) {
    print("This is the actice page $_activePage");
    return Scaffold(
        bottomNavigationBar: CurvedNavigationBar(
          index: _activePage,
          height: 60.0,
          items: <Widget>[
            Icon(Icons.add, size: 30),
            Icon(Icons.list, size: 30),
            Icon(Icons.compare_arrows, size: 30),
          ],
          color: Colors.white,
          backgroundColor: Colors.blueAccent,
          animationCurve: Curves.easeInOut,
          animationDuration: Duration(milliseconds: 600),
          onTap: (index) {
            setState(() {
              _activePage = index;
            });
            print("Index : $index active : $_activePage");
            // you don't need this as the bottom nav is doing it for you just have to specify index
            // Navigator.push(context,
            //     MaterialPageRoute(builder: (context) => _page[_activePage]));
          },
          letIndexChange: (index) => true,
        ),
        body: Container(
          color: Colors.blueAccent,
          child: Center(
            child: _page[_activePage],
          ),
        ));
  }
}

class Add extends StatelessWidget {
  const Add({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text("Add Page"),
      ),
    );
  }
}

class Copyright extends StatelessWidget {
  const Copyright({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text("Copy Right Page"),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text("Home Page"),
      ),
    );
  }
}

您不必使用导航器，因为底部导航器会为您完成任务，您只需传递索引并使用 setstate 方法重建页面

检查示例并告诉我它是否有效