前面學習了如何觸發頁面跳轉的功能,今天要來學習如何發送參數到其他頁面
1.建造傳遞參數的頁面(這邊沿用上一篇文的程式碼)
在第一頁的程式碼中,寫入我要傳送的參數,這邊一樣使用MaterialPageRoute
來定義要傳送的參數、以及跳轉頁面
MaterialPageRoute(
builder: (context) => SecondPage(message: '頁面以跳轉!'),
),
2.建構參數傳遞的目標頁面
由第一頁發送到第二頁
class SecondPage extends StatelessWidget {
// 接收從第一頁傳遞過來的參數
final String message;
SecondPage({required this.message});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('第二頁'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('$message'), // 顯示接收到的參數
ElevatedButton(
onPressed: () {
// 返回到第一頁
Navigator.pop(context);
},
child: Text('返回第一頁'),
),
],
),
),
);
}
}
完整程式碼
類似於上一篇的程式碼,只是我在按下跳轉第二頁的按鈕時,同時傳遞"頁面以跳轉"這段文字到下一個頁面
mport 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: FirstPage(),
));
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('第一頁'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// 跳轉到第二頁並傳遞參數
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage(message: '頁面以跳轉!'),
),
);
},
child: Text('去第二頁'),
),
),
);
}
}
class SecondPage extends StatelessWidget {
// 接收從第一頁傳遞過來的參數
final String message;
SecondPage({required this.message});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('第二頁'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('$message'), // 顯示接收到的參數
ElevatedButton(
onPressed: () {
// 返回到第一頁
Navigator.pop(context);
},
child: Text('返回第一頁'),
),
],
),
),
);
}
}
結果
page1
page2:出現該段文字