【自学Flutter】28.1 路由的使用及跳转

最新推荐文章于 2025-03-05 20:20:33 发布

原创最新推荐文章于 2025-03-05 20:20:33 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #Android

自学Flutter 专栏收录该内容

64 篇文章

订阅专栏

本文介绍了在Flutter中如何使用路由进行页面跳转，通过源代码详细解析了从一个页面跳转到另一个页面，并提供了返回上一页面的方法。示例代码展示了如何创建两个页面并实现它们之间的导航。

28.1 路由的使用及跳转

1.源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("路由的跳转"),),
        body: Center(
          child: Builder(builder: (context){
            return RaisedButton(
              child: Text('打开第二个页面'),
              onPressed: (){
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Second()),
                );
              },
            );
          })
        ),
      ),
    );
  }
}

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('第二个页面'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('返回上个页面'),
            onPressed: () {
              Navigator.pop(context);
            }
        ),
      ),
    );
  }
}

2.解释源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("路由的跳转"),),
        body: Center(
          child: Builder(builder: (context){
            return RaisedButton(
              child: Text('打开第二个页面'),
              onPressed: (){
                //跳转到第二个页面
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Second()),
                );
              },
            );
          })
        ),
      ),
    );
  }
}

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('第二个页面'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('返回上个页面'),
            //返回第一个页面
            onPressed: () {
              Navigator.pop(context);
            }
        ),
      ),
    );
  }
}

3.效果图

在这里插入图片描述