NavigationBody 内的导航 fluent_ui Flutter

Question

我正在使用 fluent_ui 包编写一个 flutter windows 应用程序。

我有带 NavigationPage 和 NavigationBody 项的 NavigationView。

在某些 NavigationBody 项上，我想导航到另一个页面（例如从页面 app/cars/ 到 app/cars/id）但保持相同的 NavigationPane 状态（这意味着只改变一个NavigationBody 小部件）。

我怎样才能做到这一点？仅通过使用某种 SetState() 完全改变小部件的内容或使用 Navigator 的某些解决方案？

Basic page structure:
- NavigationView
  - NavigationPane
  - NavigationBody

Answer 1

所以。我找到了解决这个问题的方法。我的解决方案基于使用 Navigator 作为基本小部件。在作为 NavigationBody 项目的 NavigationView 中，使用的不是具体页面（小部件），而是负责内部导航的 Navigator。因此 Push() 方法仅更改 NavigationView 的 NavigationBody 而不是整个 window 应用程序。这是此的代码示例。希望有人会觉得这有帮助： nav_view_page.dart

NavigationView(
      appBar: //some app bar
      pane: // your NavigationPane
      content: NavigationBody(
        index: _selectedIndex,
        children: [
          //some other body items
          CarsPageNavigator(
            navigatorKey: GlobalKey<NavigatorState>(),
            carsController: widget.carsController,
          ), //this is our navigator
        ],
      ),
    );

custom_navigator.dart

class CarsPageNavigator extends StatelessWidget {
  const CarsPageNavigator(
      {Key? key, required this.navigatorKey, required this.carsController})
      : super(key: key);
  final GlobalKey<NavigatorState> navigatorKey;
  final CarsController carsController;
  @override
  Widget build(BuildContext context) {
    return Navigator(
        key: navigatorKey,
        initialRoute: '/car',
        onGenerateRoute: (RouteSettings routeSettings) {
          return FluentPageRoute(
              settings: routeSettings,
              builder: (context) {
                return getPage(routeSettings.name);
              });
        });
  }

  Widget getPage(String? url) {
    switch (url) {
      case CarsManagementPage.routeName:
        {
          return CarsManagementPage(carsController: carsController);
        }
      case CarManagementPage.routeName:
        return CarManagementPage(controller: carsController);
      default:
        return CarsManagementPage(carsController: carsController);
    }
  }
}

在此代码中的 OnGenerateRoute 方法中 returns 您要导航到的页面。要从某个内页导航到其他页面，请使用 pushNamed（或 Navigator 的其他命名推送方法）：

Navigator.pushNamed(context, CarManagementPage.routeName, arguments: car);

小提示：跳过一些“基本”代码以使答案更小

NavigationBody 内的导航 fluent_ui Flutter

Navigation inside NavigationBody fluent_ui Flutter

navigator

flutter