当前位置：首页 > article >正文

flutter页面跳转

article 2025/3/6 16:49:57

Flutter 官方推荐的基本页面跳转方式，使用 Navigator.push() 方法将新页面（DressUp）推入导航堆栈。完整解析如下：

1. 例子的代码解析

Navigator.push(
  context,
  MaterialPageRoute<void>(
    builder: (context) => const DressUp(),
  ),
);

Navigator.push(context, route)：将新页面推入导航堆栈。
MaterialPageRoute<void>：使用 Material Design 风格的页面路由，默认有滑动返回（在 iOS 上）。
builder: (context) => const DressUp()：构造目标页面。

✅ 官方推荐方式（适用于 MaterialApp）

2. 其他跳转方式

除了 MaterialPageRoute，Flutter 还提供了多种跳转方法，具体选用哪种方式取决于需求。

（1）使用 `Navigator.pushNamed()`

如果你使用 命名路由，可以这样跳转：

Navigator.pushNamed(context, '/dressup');

⚡ 需要在 MaterialApp 里注册路由：

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/dressup': (context) => DressUp(),
  },
);

✅ 适用于全局路由管理

（2）使用 `Navigator.pushReplacement()`

如果不想让用户返回上一个页面（例如登录成功后进入首页），可以用 pushReplacement：

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => const DressUp()),
);

✅ 替换当前页面，不可返回

（3）使用 `Navigator.pop()` 关闭页面

在目标页面（DressUp）中，返回上一个页面：

Navigator.pop(context);

✅ 关闭当前页面，返回上一个页面

（4）使用 `Navigator.pushAndRemoveUntil()`

如果希望清除 所有之前的页面，防止用户返回：

Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => const DressUp()),
  (route) => false, // 这里的 `false` 表示移除所有页面
);

✅ 适用于登录跳转首页，防止回到登录页

3. 自定义动画跳转

如果你想使用 不同的页面切换动画，可以自定义 PageRouteBuilder：

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const DressUp(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  ),
);

✅ 可自定义动画（淡入淡出、缩放、滑动等）