Flutter如何实现类似Android Fragment的Widget局部替换

你遇到的问题很典型——Flutter本身并没有Android里Fragment的概念，你现在用全局Navigator.push会全屏替换页面，是因为默认的Navigator是管理整个应用的页面栈的，要实现局部区域的页面切换，我们可以用以下两种常用方案：

方案一：嵌套Navigator（最接近Fragment的push/replace体验） #

在需要局部切换的区域嵌入一个独立的Navigator，让它只管理该区域的页面栈，这样切换时就不会影响整个屏幕。

修改后的核心代码： #

首先更新父组件DemoFragmentState的构建方法，给FragmentA的区域添加嵌套Navigator：

class DemoFragmentState extends State<DemoFragment> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Demo fragment")),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          // 嵌套Navigator，管理FragmentA区域的页面栈
          Expanded(
            child: Navigator(
              initialRoute: '/',
              onGenerateRoute: (settings) {
                Widget page;
                switch(settings.name) {
                  case '/':
                    page = const FragmentA();
                    break;
                  case '/childA':
                    page = const FragmentChildA();
                    break;
                  default:
                    page = const FragmentA();
                }
                return MaterialPageRoute(builder: (_) => page);
              },
            ),
          ),
          const FragmentB(),
        ],
      ),
    );
  }
}

然后修改FragmentA的按钮点击逻辑，使用当前上下文的嵌套Navigator：

class FragmentA extends StatelessWidget {
  const FragmentA({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          const Text("Fragment A"),
          RaisedButton(
            child: const Text("next"),
            onPressed: () {
              // 用当前区域的Navigator跳转，只会替换局部内容
              Navigator.of(context).pushNamed('/childA');
              // 也可以继续用PageRouteBuilder：
              // Navigator.of(context).push(
              //   PageRouteBuilder(
              //     opaque: true,
              //     transitionDuration: const Duration(milliseconds: 0),
              //     pageBuilder: (context, _, __) => const FragmentChildA(),
              //   ),
              // );
            },
          ),
        ],
      ),
    );
  }
}

最后去掉FragmentChildA的Scaffold（因为它是嵌套在父Scaffold的区域内）：

class FragmentChildA extends StatelessWidget {
  const FragmentChildA({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[Text("Fragment Child A")],
      ),
    );
  }
}

方案二：父组件管理子Widget状态（适合简单切换场景） #

如果你的切换逻辑不需要页面栈（比如只是单向替换，不需要返回上一页），可以让父组件维护当前显示的子Widget，通过setState更新。

修改后的核心代码： #

更新DemoFragmentState，维护状态并提供切换方法：

class DemoFragmentState extends State<DemoFragment> {
  // 维护FragmentA区域当前显示的Widget
  Widget _currentFragmentA = const FragmentA();

  // 切换到FragmentChildA的方法
  void _switchToChildA() {
    setState(() {
      _currentFragmentA = const FragmentChildA();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Demo fragment")),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Expanded(child: _currentFragmentA),
          const FragmentB(),
        ],
      ),
    );
  }
}

修改FragmentA，通过构造函数接收切换方法：

class FragmentA extends StatelessWidget {
  final VoidCallback onSwitchToChildA;

  const FragmentA({required this.onSwitchToChildA, super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          const Text("Fragment A"),
          RaisedButton(
            child: const Text("next"),
            onPressed: onSwitchToChildA,
          ),
        ],
      ),
    );
  }
}

初始化时传入方法：

// 在DemoFragmentState的初始化或build里更新
_currentFragmentA = FragmentA(onSwitchToChildA: _switchToChildA);

为什么原来的代码会全屏？ #

你之前调用的Navigator.of(context)获取的是全局Navigator（也就是Scaffold所在的导航栈），所以push新页面时会替换整个屏幕的内容。而嵌套Navigator后，每个局部区域有自己独立的导航栈，就能实现类似Android Fragment的局部切换效果了。

内容的提问来源于stack exchange，提问作者Châu Minh Phúc