flutter:页面之间专递参数

一,代码:

main.dart

import 'package:flutter/material.dart';

import 'pages/HomePage.dart';
import 'pages/DetailPage.dart';

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

class MyApp extends StatelessWidget {

  final routes = {
        '/': (context, {arguments}) => HomePage(),
        '/detail': (context, {arguments}) => DetailPage(arguments: arguments),
   };

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      //home: const MyHomePage(title: 'Flutter Demo Home Page'),
      // 默认加载的页面
      initialRoute: '/', // 首页面
        // 当页面跳转时进行参数处理
        onGenerateRoute: (RouteSettings settings) {
          // 获取声明的路由页面函数
          var pageBuilder = routes[settings.name];
          if (pageBuilder != null) {
            if (settings.arguments != null) {
              // 创建路由页面并携带参数
              return MaterialPageRoute(
                  builder: (context) =>
                      pageBuilder(context, arguments: settings.arguments));
            } else {
              return MaterialPageRoute(
                  builder: (context) => pageBuilder(context));
            }
          }
          return MaterialPageRoute(builder: (context) => HomePage());
        },
    );
  }
}

pages/HomePage.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text("首页"),
      ),

      body: Center(
        child: ElevatedButton(
          child: Text("这里是首页,点击进入详情页面"),
          onPressed: () {
            print("这里是首页,点击进入详情页面");
            // 跳转到第二个界面
            Navigator.of(context).pushNamed('/detail',arguments:{'title': "苏东坡新传",'id': 7});
          },
        ),
      ),

    );
  }
}

pages/DetailPage.dart

import 'package:flutter/material.dart';

class DetailPage extends StatefulWidget {
  final Map arguments;
  // 为title设置一个默认参数,这样的跳转该界面时可以不传值。
  DetailPage({super.key, required this.arguments});
  @override
  State<DetailPage> createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.primaryContainer,
        title: Text(widget.arguments["title"]),
      ),

      body: Center(
        child: ElevatedButton(
          child: Text("我是详情界面,点击我返回首页"),
          onPressed: () {
            print("我是详情界面,点击我返回首页");
            print("商品名称:"+widget.arguments['title']);
            print("id:"+widget.arguments['id'].toString());
            // 跳转到第二个界面
            Navigator.pop(context);
          },
        ),
      ),

    );
  }
}

二,测试效果:

 

posted @ 2025-03-22 10:31  刘宏缔的架构森林  阅读(15)  评论(0)    收藏  举报