美文网首页Flutter
Flutter Navigator跳转到下一个页面并返回(页面之

Flutter Navigator跳转到下一个页面并返回(页面之

作者: charmingcheng | 来源:发表于2019-07-25 07:58 被阅读0次

    创建两个Flutter页面,FirstScreen与SecondScreen

    使用 Navigator.push()方法导航到下一界面

    使用 Navigator.pop()方法返回到上一个界面

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MaterialApp(
        title: 'Navigation Basics',
        home: FirstScreen(),
      ));
    }
    
    class FirstScreen extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('First Screen'),
          ),
          body: Center(
            child: RaisedButton(
              child: Text('Launch screen'),
              onPressed: () {
                Navigator.push( //跳转到第二个界面
                  context,
                  MaterialPageRoute(builder: (context) => SecondScreen()),
                );
              },
            ),
          ),
        );
      }
    }
    
    class SecondScreen extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Second Screen"),
          ),
          body: Center(
            child: RaisedButton(
              onPressed: () {
                Navigator.pop(context);//从第二个界面返回
              },
              child: Text('Go back!'),
            ),
          ),
        );
      }
    }
    

    相关文章

      网友评论

        本文标题:Flutter Navigator跳转到下一个页面并返回(页面之

        本文链接:https://www.haomeiwen.com/subject/parggqtx.html