Question

我尝试构建一个带有颤动的应用程序，并通过构建导航来解决问题。我想要在当前版本的youtube应用程序中进行导航。底部导航栏，带有三个页面，而不是每个页面子页面，带有一个欧文导航堆栈。在所有子页面上，应该可以更改主视图和应用程序保存在女巫子页面我在哪里。那可能吗？我找不到解决办法。我认为它应该是可能的，因为它在材料设计的示例页面上：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));
        },
      ),
    ],
  ),
);

} }

Answer 2

尝试这个简单的底部栏

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

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>\[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  \];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>\[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        \],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber\[800\],
        onTap: _onItemTapped,
      ),
    );
  }
}][1]

Check this image for Sample

使用颤振进行底部导航

2 个答案: