Flutter 通过路由Routers实现页面跳转

最新推荐文章于 2025-11-13 15:44:56 发布

原创

最新推荐文章于 2025-11-13 15:44:56 发布 · 778 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

本文介绍了在Flutter中如何实现页面跳转，特别是在Splash页面中通过延时处理自动导航到Login页面。首先定义了路由管理类Routers，然后在Splash页面中设置初始路由并利用Future延迟调用Navigator进行页面替换。关键词涉及Flutter、页面跳转、延时函数和路由管理。

1.页面跳转，首先要建一个管理跳转页面的路由 Routers.dart

import 'package:flutter_app/Login.dart';
import 'package:flutter_app/main.dart';

//定义跳转页面使用
class Routers {
  static String root = ""; //跟页面必须定义为这个样式
  static String login = "/Login";

  static final routers = {
    root: (context) => Splash(),
    login: (context) => Login(),
  };
}

这里我准备了两个页面，Splash和Login ,我要做的是从Splash页面跳转到Login页面。

2.这里我们主要看下跳转之前的Splash页面做了哪些操作。

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_app/Utils/Routers.dart';

void main() =>runApp( Splash());

class Splash extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
         initialRoute: "/",
         routes: Routers.routers,//路由跳转使用
        // home: HomePage()
    );
  }
}

  @override
  void initState() {
    super.initState();
    startTime()