如何在不同文件/页面的底部导航中分页路由

问题描述

我想在我的应用程序中添加底部导航，但是当我想添加此行时 _children[_selectedindex], 但是如何添加此行，因为我在创建导航的其他文件中，但是在home.dart文件中却如何在正文中添加此行？ 飞镖首页代码：

import 'package:Flutter/material.dart';
import 'package:try_custom_list_view/widget/bottom_nav.dart';
import 'package:try_custom_list_view/widget/drawer.dart';
import 'package:try_custom_list_view/widget/list_view.dart';

class SampleApp extends StatefulWidget {
  @override
  _SampleAppState createState() => _SampleAppState();
}

class _SampleAppState extends State<SampleApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Gaming Shayari"),),body: ListViewFromApi(),drawer: MyDrawer(),bottomNavigationBar: MyNavBar(),);
  }
}

底部Nav飞镖文件代码：

import 'package:Flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:line_icons/line_icons.dart';
import 'package:try_custom_list_view/trending.dart';
import 'package:try_custom_list_view/widget/list_view.dart';

class MyNavBar extends StatefulWidget {
  @override
  _MyNavBarState createState() => _MyNavBarState();
}

class _MyNavBarState extends State<MyNavBar> {
  int _selectedindex = 0;
  final List<Widget> _children = <Widget>[
    ListViewFromApi(),MyTrending(),];
  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: Boxdecoration(
          color: Colors.white,BoxShadow: [
            BoxShadow(
              blurRadius: 20,color: Colors.black.withOpacity(.1),)
          ],child: SafeArea(
            child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15.0,vertical: 8),child: GNav(
            gap: 12,activeColor: Colors.white,iconSize: 24,padding: EdgeInsets.symmetric(horizontal: 20,vertical: 5),duration: Duration(milliseconds: 600),tabBackgroundColor: Colors.grey[800],tabs: [
              GButton(
                icon: LineIcons.home,text: 'Home',backgroundColor: Colors.purple,GButton(
                icon: LineIcons.plus_circle,text: 'Add Your Poetry',backgroundColor: Colors.green,GButton(
                icon: LineIcons.fire,text: 'Trending',backgroundColor: Colors.red,],selectedindex: _selectedindex,onTabChange: (index) {
              setState(() {
                _selectedindex = index;
              });
            },)));
  }
}

我将这段代码放在哪里在页面之间导航？ _children[_selectedindex],

解决方法

您在GButtons中有三个GNav。因此，您需要在_children列表中使用三个小部件。然后，您可以使用应用程序状态提供程序来设置并获取不同文件中底部导航的选定索引。查看here如何使用简单的应用程序状态管理。