屏幕的颤振导航

Question

如何将一个小部件推入另一个小部件的框架中？例如，我有一个包含2个容器的列，其中每个容器占据屏幕的一半。我想仅在底部容器中进行导航。容器视图具有自己的UINavigationController时，与iOS中的逻辑相同。

据我了解，MaterialPageRoute只能将小部件推到全屏状态，除抽象类外，没有其他Route类。也许我应该自己创建ModalRoute / TransitionRoute的子类？

Answer 1

您可以将导航器用作您想要制作的特定部分的子项。我使用WillPopScope返回上一个屏幕（如果有）。并确保使用 GlobalKey() 来分隔每个导航器并为其提供唯一的密钥。我的代码：

var keyOne = GlobalKey<NavigatorState>();
var keyTwo = GlobalKey<NavigatorState>();
return Column(
  children: [
    Expanded(
      child: Container(
        child: WillPopScope(
          onWillPop: () async => !await keyOne.currentState.maybePop(),
          child: Navigator(
            key: keyOne,
            onGenerateRoute: (routeSettings) {
              return MaterialPageRoute(
                builder: (context) => ScreenOne(),
              );
            },
          ),
        ),
      ),
    ),
    Expanded(
      child: Container(
        child: WillPopScope(
          onWillPop: () async => !await keyTwo.currentState.maybePop(),
          child: Navigator(
            key: keyTwo,
            onGenerateRoute: (routeSettings) {
              return MaterialPageRoute(
                builder: (context) => ScreenTwo(),
              );
            },
          ),
        ),
      ),
    ),
  ],
);

Answer 2

您可以使用“ 导航器”小部件在应用程序中提供任意数量的单个导航器。每个导航器将维护其自己的导航堆栈。例如，如果您想垂直分割您的应用程序，而每半部分都有自己的导航堆栈：

Column(
  children: <Widget>[
    Navigator(...),
    Navigator(...)
  ]
)

如果执行此操作，则应考虑如何处理Android后退按钮（现在从技术上讲，您的应用程序中有3个导航器）。默认情况下，它将仅侦听您的根导航器，因此您将必须在小部件层次结构中的某个位置提供WillPopScope小部件，以捕获后退按钮事件并从适当的导航器中弹出。

Answer 3

一种可能的解决方案是在屏幕的该部分创建一个新的 MaterialApp 并像常规应用程序一样处理所有内容（只是具有不同的屏幕尺寸），如下所示：

Column(
        children: <Widget>[
          Container(
            height: constraints.maxHeight * 0.5,
            width: constraints.maxWidth,
          ),
          Container(
              height: constraints.maxHeight * 0.5,
              width: constraints.maxWidth,
              child: MaterialApp(
                  debugShowCheckedModeBanner: false,
                  theme: ThemeData(
                    primaryColor: Color.fromRGBO(86, 86, 86, 1.00),
                  ),
                  initialRoute: '/W1',
                  routes: {
                    '/W1': (context) => WidgetOne(),
                    '/W2': (context) => WidgetTwo(),
                  })),
        ],
      ),

然后使用小部件处理路由，如下所示：

class WidgetOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () {
      Navigator.pushNamed(context, '/W2');
    },
    child: Container(color: Colors.green));
    }
  }
}

class WidgetTwo extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () {
      Navigator.pushNamed(context, '/W1');
    },
    child: Container(color: Colors.pink));
    }
  }
}

结果：https : //i.stack.imgur.com/qyJ5N.gif