Flutter中能否实现类似Android Fragment的页面间导航？

Absolutely! Flutter fully supports navigation patterns analogous to Android Fragments—with even more flexibility. Let’s map your Android Fragment transaction logic to Flutter, building on the partial code you shared.

First, let’s clarify the core parallels:

• Android Fragment → Flutter StatelessWidget/StatefulWidget (encapsulated, reusable UI modules)
• FragmentManager + addToBackStack → Flutter Navigator (manages a stack of routes/widgets, enabling back navigation)
• FragmentTransaction.replace() → Either full-screen route pushes (most common) or dynamic widget replacement in a container

1. Direct Equivalent to Your Android Code #

Your Android code replaces a container’s Fragment and adds it to the back stack. Here’s how to replicate that behavior in Flutter using Navigator (the standard approach):

Step 1: Complete Your MyApp Setup #

import 'package:app/src/pages/home.dart';
import 'package:flutter/material.dart';
// Import your "Fragment" equivalent widget
import 'package:app/src/pages/my_fragment.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fragment-Style Navigation',
      home: HomePage(), // Acts like your AppCompatActivity with a fragment container
    );
  }
}

Step 2: Implement Navigation in the Home Page #

The HomePage will trigger navigation to your "Fragment" widget, just like your Android button would:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // This matches your FragmentTransaction.replace + addToBackStack
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => MyFragment(), // Your "Fragment" widget
              ),
            );
          },
          child: const Text('Open My Fragment'),
        ),
      ),
    );
  }
}

Step 3: Create Your "Fragment" Widget #

This is your reusable UI module, just like Android’s MyFragment:

class MyFragment extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Fragment')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Pop from the back stack (matches pressing the Android back button)
            Navigator.pop(context);
          },
          child: const Text('Go Back'),
        ),
      ),
    );
  }
}

2. Named Routes (More Like Android Navigation Configuration) #

For a more structured approach (similar to defining navigation graphs in Android), use named routes:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fragment-Style Navigation',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/myFragment': (context) => MyFragment(), // Define named route
      },
    );
  }
}

// Update the HomePage button to use named navigation
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.pushNamed(context, '/myFragment'),
          child: const Text('Open My Fragment'),
        ),
      ),
    );
  }
}

3. Replace Widgets in a Container (Exact Match for replace(R.id.fragment_container)) #

If you need to swap widgets within a specific container (not full-screen), maintain a manual stack of widgets and update the UI dynamically:

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // Manual stack to mimic Fragment back stack
  final List<Widget> _widgetStack = [HomeContent()];

  void _pushWidget(Widget newWidget) {
    setState(() => _widgetStack.add(newWidget));
  }

  void _popWidget() {
    if (_widgetStack.length > 1) {
      setState(() => _widgetStack.removeLast());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Container Navigation'),
        leading: _widgetStack.length > 1
            ? IconButton(
                icon: const Icon(Icons.arrow_back),
                onPressed: _popWidget,
              )
            : null,
      ),
      body: _widgetStack.last, // Show the top widget in the stack
      floatingActionButton: FloatingActionButton(
        onPressed: () => _pushWidget(MyFragmentContent()),
        child: const Icon(Icons.add),
      ),
    );
  }
}

// Initial container content
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('Home Container Content'));
  }
}

// "Fragment" content for the container
class MyFragmentContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('My Fragment Container Content'));
  }
}

Key Takeaways #

• Full-screen navigation: Use Navigator.push() or named routes for most cases (matches Android’s back stack behavior).
• Container-specific replacement: Maintain a widget stack and update the UI with setState() if you need to swap content within a fixed container.
• All Flutter widgets are lightweight, so you don’t have to worry about the overhead of Android’s Fragment lifecycle—Flutter handles widget rebuilding efficiently.

内容的提问来源于stack exchange，提问作者Paavalan Babu