V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
techstay
V2EX  ›  Flutter

Flutter 两个 MaterialApp 之间的切换问题

  •  
  •   techstay ·
    techstay · 44 天前 · 779 次点击
    这是一个创建于 44 天前的主题,其中的信息可能已经有所发展或是发生改变。

    看官网教程的时候,一般都是用同一个 MaterialApp ,然后在其中切换不同的页面,这种情况没问题,默认还有切换动画,非常完美。但是我在看文档的时候,想着能不能把所有例子写在同一个项目里面,所以就有了这么一个需求,在多个不同的 MaterialApp (和 CupertinoApp )之间导航。

    但是似乎 Flutter 不支持这种情况,当加载SecondApp的时候,原来那个 context 似乎直接被覆盖了,这时候点击就会把当前的 pop 掉,直接显示黑屏。请问这种情况应该如何解决?

    import 'package:flutter/material.dart';
    
    void main() {
      // runApp(const FirstApp());
      runApp(const MaterialApp(
        home: First(),
      ));
    }
    
    class FirstApp extends StatelessWidget {
      const FirstApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(
          home: First(),
        );
      }
    }
    
    class First extends StatelessWidget {
      const First({super.key});
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('First Screen'),
          ),
          body: GestureDetector(
            child: Container(
              color: Colors.red,
            ),
            onTap: () {
              Navigator.of(context).push(
                // MaterialPageRoute(builder: (context) => const SecondApp()),
                MaterialPageRoute(builder: (context) => const Second()),
              );
            },
          ),
        );
      }
    }
    
    class SecondApp extends StatelessWidget {
      const SecondApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(
          home: Second(),
        );
      }
    }
    
    class Second extends StatelessWidget {
      const Second({super.key});
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('First Screen'),
          ),
          body: GestureDetector(
            child: Container(
              color: Colors.green,
            ),
            onTap: () {
              Navigator.pop(context);
            },
          ),
        );
      }
    }
    
    2 条回复    2024-04-10 08:56:12 +08:00
    RightHand
        1
    RightHand  
       44 天前 via Android
    你这个叫嵌套路由
    leconio
        2
    leconio  
       43 天前 via iPhone
    main 函数中尽量避免二次 runApp ,会导致状态丢失。但是你的代码和你描述的没有关系,黑屏原因是第二个 App ,有自己的路由栈,和第一个不是复用关系。可以用编辑器看看源码
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2907 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 00:38 · PVG 08:38 · LAX 17:38 · JFK 20:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.