Flutter 從當前頁面進入一個新的頁面並返回

weixin_33890526發表於2018-09-19

在原來的Android開發中,頁面之間的導航是通過Active或者Fragmentt來實現的。而在Flutter中,秉承著一切都是widget的理念,頁面當然也可以看成是一個widget,而頁面切換是通過路由Route來實現的,通過Navigator路由管理器進行推入路由和退出路由實現頁面切換。

專案說明:首頁中間有個按鈕,點選後進入一個新的頁面,新頁面同樣有個按鈕點選後返回。

下面擼碼:

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
 
void main() => runApp(new MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'Navigator Demon',
      home: new MyHomePage(
        title: '第一個頁面',
      ),
    );
  }
}
 
/*
這是首頁面,包含一個IOS風格的按鈕,點選該按鈕可以導航到第二個頁面
 */
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);
  final title;
 
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Center(
          //這是一個IOS風格材質的按鈕,需要匯入cupertino檔案才能引用
          child: new CupertinoButton(
              color: Colors.blue,
              child: new Text('進入第二個頁面'),
              onPressed: () {
                Navigator.push(
                    context,
                    new MaterialPageRoute(
                        builder: (context) => new SecondePage(
                              title: '第二個頁面',
                         )
                     )
                  );
               }
            )
         ),
     );
  }
}
 
/*
這是第二個頁面,包含一個返回的按鈕
 */
class SecondePage extends StatelessWidget {
  const SecondePage({Key key, this.title}) : super(key: key);
  final title;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Center(
        //這是一個IOS風格材質的按鈕,需要匯入cupertino檔案才能引用
        child: new CupertinoButton(
            color: Colors.blue,
            child: new Text('返回第一個頁面'),
            onPressed: () {
              Navigator.pop(context);
            }
         ),
      ),
    );
  }
}

效果如下:
點選按鈕進入下一個頁面,點選返回回到第一個頁面。


14080895-5392affec58d70a1.png
Screenshot_20180915-155337.png

14080895-67e765be79c10e48.png
Screenshot_20180915-155344.png

相關文章