Flutter的路由router-页面跳转

在Flutter中，页面间的跳转主要通过Navigator类来实现。以下是一个简单的例子，展示了如何使用Navigator进行页面跳转。

首先，定义两个简单的页面，一个是主页HomePage，另一个是详情页DetailsPage。

import 'package:flutter/material.dart';
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('主页'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('跳转到详情页'),
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) => DetailsPage()));
          },
        ),
      ),
    );
  }
}
 
class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('详情页'),
      ),
      body: Center(
        child: Text('这是详情页'),
      ),
    );
  }
}

在HomePage中，当按钮被点击时，使用Navigator.push方法来跳转到DetailsPage。MaterialPageRoute是一个用于页面路由的Material Design风格的路由组件，它可以创建平台特定的路由动画。

接下来，在main.dart文件中，配置应用的首页：

import 'package:flutter/material.dart';
import 'pages/HomePage.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: HomePage(), // 设置首页为HomePage
    );
  }
}

以上代码展示了如何在Flutter中使用Navigator进行页面跳转的基本用法。