Flutter不用Navigator.push跳转页面的方法有哪些

In Flutter, there are several ways to navigate between pages (screens) or show new content without using Navigator.push. Here are some common methods:

1. Using BottomNavigationBar

A BottomNavigationBar allows users to switch between different pages by tapping icons at the bottom of the screen. Each tap changes the content displayed without needing to push a new route.

import 'package:flutter/material.dart';

 

 

class BottomNavExample extends StatefulWidget {

@override _BottomNavExampleState createState() => _BottomNavExampleState();

}

class _BottomNavExampleState extends State<BottomNavExample> {

int _currentIndex = 0; final List<Widget> _pages = [ HomeScreen(), SettingsScreen(), ProfileScreen(), ];

 

@override Widget build(BuildContext context) {

　　return Scaffold( body: _pages[_currentIndex],

　　　　bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, onTap: (index) {

setState(() { _currentIndex = index; }); },

items: const [ BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Home', ),

BottomNavigationBarItem( icon: Icon(Icons.settings), label: 'Settings', ),

BottomNavigationBarItem( icon: Icon(Icons.person), label: 'Profile', ), ], ), ); } }

 

class HomeScreen extends StatelessWidget {

@override Widget build(BuildContext context) { return Center(child: Text('Home Screen')); } }

 

class SettingsScreen extends StatelessWidget {

@override Widget build(BuildContext context) {

return Center(child: Text('Settings Screen')); } }

 

class ProfileScreen extends StatelessWidget {

@override Widget build(BuildContext context) {

return Center(child: Text('Profile Screen')); }

}

2. Using TabBar and TabBarView

A TabBar with TabBarView is useful when you want to provide tabbed navigation between different pages.

 

import 'package:flutter/material.dart';

 

class TabBarExample extends StatelessWidget {

@override Widget build(BuildContext context) {

 

 

return DefaultTabController( length: 3,

child: Scaffold( appBar: AppBar( title: Text('TabBar Example'),

bottom: TabBar( tabs: [ Tab(text: 'Home'), Tab(text: 'Settings'),

Tab(text: 'Profile'), ], ), ),

body: TabBarView(

children: [ HomeScreen(), SettingsScreen(), ProfileScreen(), ], ), ), ); }

}

3. Using PageView

PageView allows for swipeable navigation between different pages. It's often used for onboarding flows or any situation where users swipe horizontally between pages.

 

import 'package:flutter/material.dart';

 

class PageViewExample extends StatelessWidget {

@override Widget build(BuildContext context) {

return Scaffold(

body: PageView( children: [ HomeScreen(), SettingsScreen(), ProfileScreen(), ], ), ); }

}

4. Using Drawer

A Drawer can be used to navigate between different parts of your app by selecting items from a side menu.

import 'package:flutter/material.dart';

 

class DrawerExample extends StatelessWidget {

@override Widget build(BuildContext context) {

return Scaffold( appBar: AppBar( title: Text('Drawer Example'), ),

drawer: Drawer( child: ListView( padding: EdgeInsets.zero,

children: <Widget>[ DrawerHeader( child: Text('Menu'),

decoration: BoxDecoration( color: Colors.blue, ), ),

ListTile( title: Text('Home'), onTap: () { // Update the state with the selected screen }, ),

ListTile( title: Text('Settings'),

onTap: () { // Update the state with the selected screen }, ),

ListTile( title: Text('Profile'),

onTap: () { // Update the state with the selected screen }, ), ], ), ),

body: Center(child: Text('Main Content Area')), ); }

}

5. Using IndexedStack

IndexedStack is useful when you need to keep the state of pages even when they are not visible. This widget shows only one child at a time based on the current index.

 

import 'package:flutter/material.dart';

 

class IndexedStackExample extends StatefulWidget {

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

 

class _IndexedStackExampleState extends State<IndexedStackExample> {

int _currentIndex = 0;

@override Widget build(BuildContext context) {

return Scaffold( appBar: AppBar( title: Text('IndexedStack Example'), ),

body: IndexedStack( index: _currentIndex,

children: [ HomeScreen(), SettingsScreen(), ProfileScreen(), ], ),

bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex,

onTap: (index) { setState(() { _currentIndex = index; }); },

items: const [ BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Home', ),

BottomNavigationBarItem( icon: Icon(Icons.settings), label: 'Settings', ),

BottomNavigationBarItem( icon: Icon(Icons.person), label: 'Profile', ), ], ), ); }

}

6. Using AnimatedSwitcher

AnimatedSwitcher allows you to transition between two widgets with an animation. It's great for small-scale UI changes rather than full-page navigation.

 

import 'package:flutter/material.dart';

 

class AnimatedSwitcherExample extends StatefulWidget {

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

 

class _AnimatedSwitcherExampleState extends State<AnimatedSwitcherExample> {

bool showFirst = true; @override Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar( title: Text('AnimatedSwitcher Example'), ),

body: Center( child: AnimatedSwitcher( duration: const Duration(seconds: 1),

child: showFirst ? HomeScreen(key: ValueKey(1)) : SettingsScreen(key: ValueKey(2)), ), ),

floatingActionButton: FloatingActionButton( onPressed: () {

setState(() { showFirst = !showFirst; }); },

child: Icon(Icons.swap_horiz), ), ); }

}

Summary

These methods allow you to navigate between different parts of your app or show different content without using Navigator.push. They are particularly useful for tabbed navigation, side drawers, swiping between pages, or keeping the state of different screens. Each method serves a different use case, so choose the one that best fits your app's design and user experience.