dart - 使用 Flutter 进行底部导航

Question

我尝试用 flutter 构建一个应用程序，但在构建导航时遇到了问题。我想在当前版本的 youtube 应用程序中进行导航。具有三个页面的底部导航栏，并且每个页面子页面都具有欧文导航堆栈。在所有子页面上，应该可以更改主视图，并且应用程序应该保存在女巫子页面 i 的位置。那可能吗？我没有找到解决方案。我认为这应该是可能的，因为它在 Material 设计的示例页面上:https://material.io/design/components/bottom-navigation.html#behavior在“底部导航操作”点。非常感谢您的帮助!

Answer 1

我会看看 this code snippet寻求帮助。

import 'package:firebase_auth/firebase_auth.dart';
import 'package:my_nit2018/navigarion_drawer.dart';
import 'package:my_nit2018/pages/app/blog/blog_page.dart';
import 'package:my_nit2018/pages/app/home/home_page.dart';
import 'package:my_nit2018/pages/app/library/library_page.dart';
import 'package:my_nit2018/pages/app/notifications/notifications_page.dart';

class MainApp extends StatefulWidget {
  FirebaseUser user;

  MainApp(this.user);

  @override
  _MainAppState createState() => new _MainAppState();
}

class _MainAppState extends State<MainApp> {
  int i = 0;
  var pages = [
    new HomePage(),
    new BlogPage(),
    new LibraryPage(),
    new NotificationsPage()
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: pages[i],
      drawer: new AppNavigationDrawer(),
      bottomNavigationBar: new BottomNavigationBar(
        items: [
          new BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            title: new Text('Home'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.photo_library),
            title: new Text('Blog'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.book),
            title: new Text('Library'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.notifications),
            title: new Text('Notifications'),
          ),
        ],
        currentIndex: i,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          setState(() {
            i = index;
          });
        },
      ),
    );
  }
}

AppNavigationDrawer:

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:my_nit2018/pages/app/app_state.dart';
import 'package:my_nit2018/pages/app/main_app.dart';
import 'package:my_nit2018/pages/app/profile/profile_page.dart';
import 'package:my_nit2018/pages/auth/login_page.dart';

class AppNavigationDrawer extends StatefulWidget {
  @override
  _AppNavigationDrawerState createState() => new 
  _AppNavigationDrawerState();
}

class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
  @override
  Widget build(BuildContext context) {
    final appState = AppState.of(context);
    return new Drawer(
      child: new ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          new DrawerHeader(
            child: new Text('MyNiT App'),
             decoration: new BoxDecoration(
             color: Colors.blue,
        ),
      ),
      new ListTile(
        title: new Text('Todo List'),
        leading: new Icon(Icons.list),
        onTap: () {
          Navigator.pop(context);
        },
      ),
      new ListTile(
        title: new Text('Subscriptions'),
        leading: new Icon(Icons.subscriptions),
        onTap: () {
          Navigator.pop(context);
        },
      ),
      new ListTile(
        title: new Text('Activity'),
        leading: new Icon(Icons.timelapse),
        onTap: () {
          Navigator.pop(context);
        },
      ),
      new ListTile(
        title: new Text('Profile'),
        leading: new Icon(Icons.account_circle),
        onTap: () {
          Navigator.pop(context);
          Navigator.push(
            context,
            new MaterialPageRoute(
              builder: (context) => new AppState(
                    firebaseUser: appState.firebaseUser,
                    user: appState.user,
                    child: new ProfilePage(),
                  ),
            ),
          );
        },
      ),
      new ListTile(
        title: new Text('Logout'),
        leading: new Icon(Icons.exit_to_app),
        onTap: () {
          // Sign out user from app
          FirebaseAuth.instance.signOut();
          Navigator.of(context).pushAndRemoveUntil(
              new MaterialPageRoute(builder: (context) => new LoginPage()),
              ModalRoute.withName(null));
        },
      ),
    ],
  ),
);

}}