flutter页面跳转

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,
      );
    },
  ),
);

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

---

总结

• ✅ 官方推荐方式 ：Navigator.push(context, MaterialPageRoute(...))
• ✅ 命名路由 （适合大项目）：Navigator.pushNamed(context, '/routeName')
• ✅ 替换当前页面（不能返回） ：Navigator.pushReplacement(...)
• ✅ 清空所有页面 （适合登录场景）：Navigator.pushAndRemoveUntil(...)
• ✅ 自定义动画跳转 ：PageRouteBuilder(...)

结论： 以上就是 Flutter 官方标准用法之一，但可以根据需求优化或选择更合适的方式。