dart 如何使ElevatedButton导航到BottomNavigationBar上的第二个页面?

92dk7w1h  于 2023-06-19  发布在  其他
关注(0)|答案(1)|浏览(96)

我的代码的问题是,它确实转到Dashbored()页面,但图标属于主页,它只有一个页面。

home_page.dart

ElevatedButton(
                      
                      style: ElevatedButton.styleFrom(alignment: Alignment.center,
                        fixedSize: const Size(160, 50),
                        backgroundColor:
                            const Color.fromARGB(255, 0, 93, 186),
                        foregroundColor:
                            const Color.fromARGB(255, 69, 164, 243),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(28),
                        ),
                      ),
                      onPressed: () {
                        Navigator.pushReplacement(
                            context,
                            MaterialPageRoute(
                              builder: (context) => const Layout(children: {1:Dashbored()}),
                            ));
                      },
                      child: const Text(
                        "START ALGORITHM",
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 14),
                      ),
                    ),

main.dart

class myapp extends StatelessWidget {
  const myapp({super.key});

  @override
  Widget build(BuildContext context) {
    Map<int,Widget> pages = {
      0:const HomePage(),
      1:const Dashbored(),
      2:const Products(),
      3:const Profile(),
    };
    return Layout(
      children: pages,
    );
  }
}

Layout.dart

class Layout extends StatefulWidget {
  const Layout({super.key, required this.children});
  final Map<int,Widget> children;

  @override
  State<Layout> createState() => _LayoutState();
}

class _LayoutState extends State<Layout> {
  int pageIndex = 0;
  onNavigationChanged(int index) {
    setState(() {
      pageIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    // int index =1;
    return Scaffold(
      appBar: const MyAppBar(),
      endDrawer: const MyDrawer(),
      bottomNavigationBar: MyNavigationBar(
        onNavigationChanged: onNavigationChanged,
        pageIndex: pageIndex,
      ),
      body: widget.children[pageIndex],
    );
  }
}

我希望当我按下按钮时,应该导航到BottomNavigationBar中的第二个索引,而不会丢失其他页面。
如何使ElevatedButton导航到BottomNavigationBar上的第二个页面?

fwzugrvs

fwzugrvs1#

这个按钮应该调用这个函数:

onNavigationChanged(int index) {
    setState(() {
      pageIndex = index;
    });
  }

但您使用的是完全不同的导航器,它们没有关联,因为您正在手动更改屏幕。解决方案是将我提到的函数传递给您创建的MyNavigationBar(),并在每个按钮上使用您想要的索引触发该函数。

相关问题