Flutter如何实现点击仅在SplitView指定容器内显示新Stateless页面而非全屏

你当前调用Navigator.push时使用的是根MaterialApp对应的全局上下文，全局Navigator的路由默认作用域为整个屏幕，所以跳转后会铺满全屏。要实现SplitView左侧区域的局部路由，只需要给左侧容器嵌套独立的Navigator即可。

给左侧蓝色区域嵌套独立Navigator，该Navigator的路由作用域仅局限于自身父容器的范围，修改后的完整可运行代码如下：

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

void main() {
  runApp(MaterialApp(
    title: 'Test',
    home: TestApp(),
  ));
}

class TestApp extends StatelessWidget {
  const TestApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SplitView(
      children: [
        // 左侧区域嵌套独立Navigator
        Navigator(
          initialRoute: '/',
          onGenerateRoute: (settings) {
            if (settings.name == '/') {
              return MaterialPageRoute(builder: (context) => const LeftHomePage());
            }
            if (settings.name == '/detail') {
              return MaterialPageRoute(builder: (context) => const DetailPage());
            }
            return null;
          },
        ),
        Container(color: Colors.yellow),
      ],
      viewMode: SplitViewMode.Horizontal,
      indicator: SplitIndicator(viewMode: SplitViewMode.Horizontal),
      activeIndicator: SplitIndicator(
        viewMode: SplitViewMode.Horizontal,
        isActive: true,
      ),
      controller: SplitViewController(limits: [null, WeightLimit(max: 1)]),
    );
  }
}

// 左侧初始页面
class LeftHomePage extends StatelessWidget {
  const LeftHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: ElevatedButton(
          onPressed: () {
            // 使用局部Navigator的上下文跳转，仅在左侧区域生效
            Navigator.pushNamed(context, '/detail');
          },
          child: const Text('CLICK')),
    );
  }
}

class DetailPage extends StatelessWidget {
  const DetailPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('详情页'),
          leading: IconButton(
            icon: const Icon(Icons.arrow_back),
            onPressed: () => Navigator.pop(context),
          ),
        ),
        body: Container(color: Colors.red));
  }
}

• 移除了TestApp内部冗余的MaterialApp嵌套，避免多份全局路由冲突
• 左侧区域替换为独立Navigator组件，自定义路由映射规则，路由作用域仅限制在左侧容器范围内
• 跳转时使用当前局部Navigator的上下文，不会触发全局路由跳转
• DetailPage的返回按钮直接调用当前上下文的pop即可回到左侧初始页，不会影响右侧区域或全局路由栈

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