iT邦幫忙

2023 iThome 鐵人賽

DAY 20
0
Mobile Development

初窺Flutter系列 第 20

路由及導航-頁面跳轉傳送參數

  • 分享至 

  • xImage
  •  

前面學習了如何觸發頁面跳轉的功能,今天要來學習如何發送參數到其他頁面

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
https://ithelp.ithome.com.tw/upload/images/20231005/20162684SXIIN60PGg.png
page2:出現該段文字
https://ithelp.ithome.com.tw/upload/images/20231005/20162684ZT1CrPhVwb.png


上一篇
路由及導航-頁面跳轉
下一篇
路由及導航-頁面跳轉返回參數
系列文
初窺Flutter30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言