在Dart中如何用flutter_spinkit实现页面间2-3秒加载过渡的导航？

嘿，我来帮你搞定这个需求！先说说你当前代码里的小问题：你在transitionsBuilder里直接把child替换成了加载界面，这样最终导航到的会是这个紫色背景的加载页，而不是你想要的Page2；而且默认的过渡时长太短，加载动画只会闪一下就没啦。

下面给你两种可行的解决方案，你可以根据自己的场景选：

方案一：用PageRouteBuilder实现无缝过渡加载 #

这种方式能让加载动画作为页面跳转过渡的一部分，完美衔接Page1和Page2，总时长设置为3秒，符合你的要求：

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

main() {
 runApp(MaterialApp(
 home: Page1(),
 ));
}

class Page1 extends StatelessWidget {
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(),
 body: Center(
 child: ElevatedButton( // 注：RaisedButton已过时，推荐用ElevatedButton
 child: Text('Go!'),
 onPressed: () {
 Navigator.of(context).push(_createRoute());
 },
 ),
 ),
 );
 }
}

Route _createRoute() {
 return PageRouteBuilder(
 transitionDuration: const Duration(seconds: 3), // 强制设置过渡时长为3秒
 transitionsBuilder: (context, animation, secondaryAnimation, child) {
 // 控制加载界面的透明度：前2.5秒完全显示，最后0.5秒淡出
 final loadingOpacity = Tween<double>(begin: 1.0, end: 0.0).animate(
 CurvedAnimation(
 parent: animation,
 curve: const Interval(0.85, 1.0), // 动画最后15%的时间执行淡出
 ),
 );

 // 控制Page2的淡入：最后0.5秒从透明到显示
 final pageOpacity = Tween<double>(begin: 0.0, end: 1.0).animate(
 CurvedAnimation(
 parent: animation,
 curve: const Interval(0.85, 1.0),
 ),
 );

 return Stack(
 children: [
 // 目标页面Page2，先隐藏，加载动画淡出时再淡入
 FadeTransition(opacity: pageOpacity, child: child),
 // 加载界面，在前2.5秒保持显示，最后0.5秒淡出
 FadeTransition(
 opacity: loadingOpacity,
 child: Scaffold(
 backgroundColor: Colors.purple[700],
 body: Center(
 child: SpinKitFadingCube(
 color: Colors.white,
 size: 100.0,
 ),
 ),
 ),
 ),
 ],
 );
 },
 pageBuilder: (context, animation, animationTime) => Page2(),
 );
}

class Page2 extends StatelessWidget {
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(),
 body: Center(
 child: Text('Page 2'),
 ),
 );
 }
}

效果说明： #

点击按钮后，会立刻显示紫色背景的SpinKitFadingCube加载动画，持续约2.5秒；最后0.5秒加载动画逐渐淡出，同时Page2淡入，整个过程流畅衔接。

方案二：用中间加载页面（逻辑更直观） #

如果你需要在加载时做异步操作（比如请求接口、初始化数据），这种方式更合适——专门创建一个加载页面，显示动画并延迟2-3秒后自动跳转到Page2：

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

main() {
 runApp(MaterialApp(
 home: Page1(),
 ));
}

class Page1 extends StatelessWidget {
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(),
 body: Center(
 child: ElevatedButton(
 child: Text('Go!'),
 onPressed: () {
 // 先跳转到加载页面
 Navigator.of(context).push(
 MaterialPageRoute(builder: (context) => LoadingPage()),
 );
 },
 ),
 ),
 );
 }
}

// 新增的加载页面
class LoadingPage extends StatefulWidget {
 @override
 _LoadingPageState createState() => _LoadingPageState();
}

class _LoadingPageState extends State<LoadingPage> {
 @override
 void initState() {
 super.initState();
 // 延迟3秒后，替换当前页面为Page2（不会留下返回栈）
 Future.delayed(const Duration(seconds: 3), () {
 Navigator.of(context).pushReplacement(
 MaterialPageRoute(builder: (context) => Page2()),
 );
 });
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 backgroundColor: Colors.purple[700],
 body: Center(
 child: SpinKitFadingCube(
 color: Colors.white,
 size: 100.0,
 ),
 ),
 );
 }
}

class Page2 extends StatelessWidget {
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(),
 body: Center(
 child: Text('Page 2'),
 ),
 );
 }
}

效果说明： #

点击按钮后直接跳转到加载页面，显示加载动画3秒后，自动切换到Page2，逻辑简单易懂，适合需要额外加载逻辑的场景。

内容的提问来源于stack exchange，提问作者Florentin Lupascu