Question

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

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

Answer 1

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

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

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

Answer 2

一种可能的解决方案是在屏幕的该部分上创建一个新的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

Answer 3

您可以使用 Navigator 作为您想要制作的特定部分的子项。如果有的话，我使用 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(),
              );
            },
          ),
        ),
      ),
    ),
  ],
);

屏幕的颤振导航

3 个答案: