flutter - 如何使用导航器将小部件推送到屏幕的一部分？

Question

我将设备屏幕分为两部分，顶 View 和底 View 。我想通过执行以下操作从 BottomView 中使用导航器推送新 View :Navigator.of(context).pushNamed('/nameHere')。但是，我需要将新 View 推送到仅代替底部 View ，而不是整个屏幕，因为它发生了。

这是我的 main.dart:

void main() {
  runApp(
    MaterialApp(
      darkTheme: ThemeData(),
      initialRoute: homeRoute,
      routes: {
        homeRoute: (context) => const HomeView(),
        newViewRoute: (context) => const NewView(),
      },
    ),
  );
}

我的主页 View :

class HomeView extends StatelessWidget {
  const HomeView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        bottom: false,
        child: Column(
          children: [
            const Expanded(
              child TopView(),
            ),
            const Expanded(
              child: BottomView(),
            )
          ],
        ),
      ),
    );
  }
}

和我的 BottomView，我在其中推送新 View ，我希望它仅出现在屏幕的底部:

class BottomView extends StatelessWidget {
  const BottomView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ElevatedButton(
        onPressed: () {
          Navigator.of(context)
          .pushNamed(newViewRoute);
        }
      )
    );
  }
}

感谢大家的帮助!

Answer 1

解决方案

此解决方案不需要任何外部库

如果您需要修复顶部小部件并仅替换底部屏幕的导航，您可以创建一个包裹整个小部件的基础小部件，并且该基础小部件不会受到 flutter 导航器的影响。

示例

创建一个像这样的基本 View

class BaseView extends StatelessWidget {
  const BaseView({super.key, required this.child});
  final Widget child;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TopView(), // the top view that does not change
        child, // child widget that changes
      ],
    );
  }
}

您的 main.dart 应在构建器中包含 BaseView ，如下所示

void main() {
  runApp(
    MaterialApp(
      darkTheme: ThemeData(),
      initialRoute: homeRoute,
      builder: (context, child) => BaseView(child: child!),
      routes: {
        homeRoute: (context) => const BottomRoute1(),
        newViewRoute: (context) => const BottomRoute2(),
      },
    ),
  );
}

使用此解决方案，您创建的所有路线都将呈现在屏幕底部，并使用默认的 flutter 导航更改底部小部件。这可用于为移动应用程序或 flutter 网站创建固定的顶部或底部导航。

希望这能解决您的问题。

异常

如果您在使用命名路由导航时遇到这样的错误

在main.dart中添加导航键

GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

void main() {
  runApp(
    MaterialApp(
      darkTheme: ThemeData(),
      navigatorKey: navigatorKey, // add navigator key to material app
      initialRoute: homeRoute,
      builder: (context, child) => BaseView(child: child!),
      routes: {
        homeRoute: (context) => const BottomRoute1(),
        newViewRoute: (context) => const BottomRoute2(),
      },
    ),
  );
}

您现在可以在应用中使用此导航器进行导航，如下所示

navigatorKey.currentState!.pushNamed(routeName);

这应该可以解决您遇到的任何问题。 您可以查看我使用此方法构建的项目 here

编码愉快😀👍