技術標籤：Flutter

Navigator.push和Navigator.pop

• Navigator.push：是跳轉到下一個頁面，它要接受兩個引數一個是上下文context，另一個是要跳轉的函式。

• Navigator.pop：是返回到上一個頁面，使用時傳遞一個context（上下文）引數，使用時要注意的是，你必須是有上級頁面的，也就是說上級頁面使用了Navigator.push。

下面給出示例：從HomePage主頁跳轉到GoodsDetail頁面：

import 'package:flutter/material.dart';
import '../pages/goods_detail.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text('優品酒家')),
      body: new Center(
        child: RaisedButton(
          child: new Text("檢視商品詳情"),
          onPressed: (){
            Navigator.push(context, new MaterialPageRoute(builder: (context)=>new GoodsDetail()));
          },
        ),
      )
    );
  }
}
 

GoodsDetail頁面：

import 'package:flutter/material.dart';
class GoodsDetail extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: new Text("商品詳情"),),
      body: Container(
        child:Center(
          child: new RaisedButton(
            child: Text("返回上一頁"),
            onPressed: (){
              //Navigator.push(context,new MaterialPageRoute(builder: (context)=>HomePage()));
              Navigator.pop(context);
            },
          ),
        ),
      ),
    );
  }
}
 

我的main.dart入口檔案程式碼是這樣的：

import 'package:flutter/material.dart';
import './pages/home_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
   @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        title: '優品酒家',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primaryColor: Colors.pink
        ),
        home: HomePage(),
      ),
    );
  }
}


 

效果如下：