Flutter - 两个页面跳转

最新推荐文章于 2024-07-21 21:36:00 发布

原创最新推荐文章于 2024-07-21 21:36:00 发布 · 241 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#stack #dart #widget #app #栈

本文介绍了一个使用Flutter框架实现的基本应用程序，演示了如何在两个页面之间进行导航和切换。通过使用MaterialPageRoute和Navigator组件，文章详细展示了从第一个屏幕跳转到第二个屏幕，以及如何从第二个屏幕返回第一个屏幕的过程。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: 'Navigation Basics',
    home: new FirstScreen(),
  ));
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('First Screen'),
      ),
      body: new Center(
        child: new RaisedButton(
          child: new Text('Launch new screen'),
          onPressed: () {
            Navigator.push(
              context,
              new MaterialPageRoute(builder: (context) => new SecondScreen()),
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Second Screen"),
      ),
      body: new Center(
        child: new RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: new Text('Go back!'),
        ),
      ),
    );
  }
}