如何在 SplitScreen 中正确导航

Question

我正在研究iPad并且我已将屏幕设置为SplitScreens 。 因此我有两个并排的Navigators 。 但是，当我从第二个导航器推送一个新Screen时，我得到一个奇怪的 animation，其中第二个屏幕（右）与第一个屏幕（左）重叠。

请看这个解释得很好的视频： https://imgur.com/a/93UmrGm

SplitView(
  menu: Navigator(
    key: firstSplitNavigatorKey,
    onGenerateRoute: (routeSettings) {
      return MaterialPageRoute(
        builder: (context) =>
            const KursplanungScreen(title: 'Demo App'),
      );
    },
  ),
  content: Navigator(
    key: secondSplitNavigatorKey,
    onGenerateRoute: (routeSettings) {
      return MaterialPageRoute(
        builder: (context) => const Scaffold(
            body: Center(
                child: Text(
                    "Herzlich Willkommen!"))),
      );
    },
  ),
  menuWidth: 300,
),

然后在第二个屏幕的某个地方我称之为：

TextButton(
  onPressed: () => secondSplitNavigatorKey.currentState!.push(
      MaterialPageRoute(
        builder: (_) => const CourseOverviewScreen(),
      ),
    ),
  child: const Text("Bearbeiten"),
),

我怎样才能避免第三个奇怪的 animation？

Answer 1

您需要使用 Navigator object 来处理右侧页面。使用 Navigator object 作为右侧的小部件父亲并处理页面堆栈以仅在此侧导航。 默认导航器将更改整个页面并创建一个全新的页面。 左侧，不需要导航器，只需使用小部件状态（StatefullWidget 或类似的东西）处理它。

SplitView(
    menu: MenuSideBar(
      onChangeSection: (Widget section) {
      setState((){
        pages.last=section;
      });
    }),
    content: Navigator(
      pages: pages,
    ),
  ),

Answer 2

将您的 KursplanungScreen 更改为：

class KursplanungScreen extends StatelessWidget {
  KursplanungScreen({Key? key, required this.title}) : super(key: key);
  final String title;
  final GlobalKey<ScaffoldMessengerState> _scaffoldKey =
      new GlobalKey<ScaffoldMessengerState>();

  @override
  Widget build(BuildContext context) {
    return ScaffoldMessenger(
      key: _scaffoldKey,
      child: Scaffold(
        body: Container(
          child: Center(
            child: ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (context) => CourseOverviewScreen()));
                
              },
              child: const Icon(
                Icons.add,
              ),
            ),
          ),
        ),
      ),
    );
  }
}