Flutter中是否有类似Android Fragment的组件？局部路由切换需求

Flutter没有原生的Fragment组件，但可以通过以下几种方案实现导航栏固定、内容区域动态切换/局部路由跳转的效果，完全替代Android Fragment的核心功能：

1. 用IndexedStack实现基础的页面状态保持切换 #

适合底部导航栏场景，切换时不会重建页面，保留状态，和Android ViewPager+Fragment的基础用法一致：

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

class _HomePageState extends State<HomePage> {
  int _currentTabIndex = 0;
  final List<Widget> _contentPages = [
    const HomeContent(),
    const DiscoverContent(),
    const ProfileContent(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentTabIndex,
        onTap: (index) => setState(() => _currentTabIndex = index),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.explore), label: '发现'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
      ),
      body: IndexedStack(
        index: _currentTabIndex,
        children: _contentPages,
      ),
    );
  }
}

// 示例内容页面
class HomeContent extends StatelessWidget {
  const HomeContent({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('首页内容'));
  }
}

2. 用PageView实现可滑动的页面切换 #

如果需要支持左右滑动切换页面，交互逻辑和Android ViewPager完全匹配：

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

class _HomePageState extends State<HomePage> {
  final PageController _pageController = PageController();
  int _currentTabIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentTabIndex,
        onTap: (index) {
          _pageController.jumpToPage(index);
          setState(() => _currentTabIndex = index);
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.explore), label: '发现'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
      ),
      body: PageView(
        controller: _pageController,
        onPageChanged: (index) => setState(() => _currentTabIndex = index),
        children: const [
          HomeContent(),
          DiscoverContent(),
          ProfileContent(),
        ],
      ),
    );
  }
}

3. 自定义嵌套Navigator实现局部路由栈管理 #

如果需要在内容区域内实现多层路由跳转（比如从首页内容跳转到首页详情页，底部导航栏始终保持显示），这种方案完全模拟Fragment的嵌套导航能力：

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

class _HomePageState extends State<HomePage> {
  int _currentTabIndex = 0;
  final List<GlobalKey<NavigatorState>> _navigatorKeys = [
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentTabIndex,
        onTap: (index) => setState(() => _currentTabIndex = index),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.explore), label: '发现'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
      ),
      body: Stack(
        children: List.generate(3, (index) {
          return Offstage(
            offstage: _currentTabIndex != index,
            child: Navigator(
              key: _navigatorKeys[index],
              onGenerateRoute: (settings) {
                switch (settings.name) {
                  case '/':
                    return MaterialPageRoute(builder: (_) => _getContentPage(index));
                  case '/detail':
                    return MaterialPageRoute(builder: (_) => const DetailPage());
                  default:
                    return null;
                }
              },
            ),
          );
        }),
      ),
    );
  }

  Widget _getContentPage(int index) {
    switch (index) {
      case 0:
        return HomeContent(
          onJumpToDetail: () {
            _navigatorKeys[0].currentState?.pushNamed('/detail');
          },
        );
      case 1:
        return const DiscoverContent();
      case 2:
        return const ProfileContent();
      default:
        return const SizedBox();
    }
  }
}

// 带跳转的首页内容
class HomeContent extends StatelessWidget {
  final VoidCallback onJumpToDetail;
  const HomeContent({required this.onJumpToDetail, super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: onJumpToDetail,
        child: const Text('跳转到首页详情'),
      ),
    );
  }
}

// 局部路由详情页
class DetailPage extends StatelessWidget {
  const DetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('首页详情')),
      body: const Center(child: Text('这是局部导航的详情页')),
    );
  }
}

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