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

【问题标题】：How to Page Route In Bottom Navigation In Different File/Page如何在不同文件/页面的底部导航中分页路由
【发布时间】：2020-10-18 09:22:00
【问题描述】：

我想在我的应用中添加底部导航，但是当我想添加这一行时 _children[_selectedIndex], 但是我如何添加这一行，因为我在不同的文件中创建导航但在 home.dart 文件中我如何在正文中添加这一行？首页 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(),
    );
  }
}

底部导航飞镖文件代码：

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],

【问题讨论】：

标签： flutter flutter-bottomnavigation

【解决方案1】：

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

【讨论】：