頁面間導航
跳轉到另一個頁面及返回
首先，定義主頁面。
編寫第一個界面FirstScreen。
界面上有一個button，點擊會跳轉到第二個界面。跳轉後第一個頁面不會消失，相當於把第二個頁面push到頁面棧中。
push時需傳遞兩個參數，第一個參數是上下文參數，即build方法中傳的參數context；第二個參數是要做的事情的方法，此處爲flutter提供的一個路由組件MaterialPageRoute。路由組件MaterialPageRoute的builder屬性裏面放一個函數，即要做的事情：把上下文context傳遞過來作爲參數，跳轉到另一個界面SecondScreen。
編寫跳轉到的界面SecondSrceen。
該頁面中有一個按鈕，點擊返回上一個頁面。使用從頁面棧中pop的方法返回上一個頁面。
運行結果：
點擊“查看詳情”可跳轉至第二個頁面。點擊“返回”或返回箭頭可返回第一個頁面。
頁面間傳參
最終效果：
點擊“商品1”，跳轉至詳情頁面。頁面傳遞參數體現在第二頁面的AppBar和body中。
首先抽象出商品信息類。
class Product{
final String title; // 商品名稱
final String description; // 商品描述
Product(this.title,this.description); //構造函數
}
接着定義主界面。界面中是一個ProductList組件，之後進行定義。
void main(){
runApp(MaterialApp(
title: '導航傳參',
home: ProductList( // ProductList組件在後面定義
// 第一個參數是要生成多少個數據
// 第二個參數使用匿名函數構造這20個數據
products:List.generate(
20,
(i)=>Product('商品$i','這是一個商品詳情，編號爲$i')
)
)
));
}
接下來定義組件ProductList。在點擊事件onTap內定義事件函數體。跳轉到的新頁面組件ProductDetail在後面定義。根據後續定義的該組件的構造函數，需傳參數product，在此處傳遞的參數的值爲products[index]。
class ProductList extends StatelessWidget {
final List<Product> products; //接收參數
//構造函數
ProductList({Key key, @required this.products}):super(key:key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:Text('商品列表')),
body:ListView.builder(
itemCount:products.length,
itemBuilder: (context,index){
return ListTile(
title: Text(products[index].title),
onTap: (){
Navigator.push(
context,
MaterialPageRoute(builder: (context)=>ProductDetail(product:products[index]))
);
},
);
}
)
);
}
}
最後定義跳轉到的詳情頁面ProductDetail。
class ProductDetail extends StatelessWidget {
final Product product; //接收參數
ProductDetail({Key key, @required this.product}):super(key:key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('${product.title}'),),
body:Center(child: Text('${product.description}'))
);
}
}
頁面返回時傳參
最終效果：
第一個頁面中有一個“搜索”按鈕，點擊按鈕跳轉到第二個頁面。
點擊“這是搜索結果1”將返回第一個頁面，並在頁面底部以SnackBar的形式傳遞相關參數；點擊“這是搜索結果2”也將返回第一個頁面，並在頁面底部以SnackBar的形式傳遞相關參數。
先定義主函數。
void main() {
runApp(MaterialApp(title: '頁面跳轉返回數據', home: FirstPage()));
}
定義FirstPage。頁面中有一個組件RouteButton，在後面進行定義。
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('這個圖片是什麼')),
body: Center(
child: RouteButton(),
));
}
}
定義組件RouteButton。組件中含有的是一個RaisedButton，在點擊事件中是一個自定義的靜態響應事件_navigateToSearch(BuildContext context)。該事件是一個異步事件，即需要獲取到數據後才進行下一步，因此需使用async和await。使用SnackBar在第一個頁面的底部顯示。
class RouteButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () {
_navigateToSearch(context);
}, //響應事件，自定義一個靜態方法
child: Text('搜索'),
);
}
_navigateToSearch(BuildContext context) async {
//異步方法
//等待參數傳遞過來，使用await
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => SearchPage()),
);
Scaffold.of(context).showSnackBar(SnackBar(content: Text('$result')));
}
}
定義跳轉到的頁面SearchPage。使用Navigator.pop(context, route)返回上一個頁面並傳遞參數。
class SearchPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('搜索結果'),
),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
child: Text('這是搜索結果1'),
onPressed: () {
Navigator.pop(context, '這是一隻兔子的概率是85%');
},
),
RaisedButton(
child: Text('這是搜索結果2'),
onPressed: () {
Navigator.pop(context, '這是一隻狗的概率是15%');
},
),
],
),
),
);
}
}
