如何在Flutter的ThemeData路由中配置带参数的PostImage页面？

我在Flutter项目中使用ThemeData配置路由，当前路由配置如下：

routes: {
  '/': (context) => const LoginScreen(),
  '/sign-up-screen': (context) => const SignUpScreen(),
  '/sign-in-screen': (context) => const SignInScreen(),
  '/map-screen': (context) => MapScreen()
}

但我还有一个带参数的PostImage页面，其代码片段如下：

import 'dart:io';
import 'package:dash_mement/poststory/check_image.dart';
import 'package:dash_mement/providers/pushstory_provider.dart';
import 'package:dash_mement/style/mmnt_style.dart';
import 'package:dash_mement/style/story_textstyle.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:provider/provider.dart';

class PostImage extends StatelessWidget {
   Widget _inform = Image.asset("assets/images/check_image.png");
   final ImagePicker _picker = ImagePicker();
   late Function _backButton;
   double? lat_y;
   double? lng_x;

   PostImage(this._backButton) {}

   PostImage.newPin({required double latitude_y, required double longitude_x}) {
      lat_y = latitude_y;
      lng_x = longitude_x;
   }
....
}

请问该如何将这个带参数的PostImage页面添加到main.dart的ThemeData路由配置中？

Flutter的routes配置表仅支持定义无需动态参数的页面路由。对于需要传递自定义参数（如示例中的回调函数、经纬度）的页面，需要通过onGenerateRoute来处理动态路由匹配，具体步骤如下：

1. 配置onGenerateRoute #

在main.dart的MaterialApp中，保留原有routes的同时，新增onGenerateRoute属性处理PostImage的路由：

MaterialApp(
  theme: ThemeData(...), // 你的主题配置
  routes: {
    '/': (context) => const LoginScreen(),
    '/sign-up-screen': (context) => const SignUpScreen(),
    '/sign-in-screen': (context) => const SignInScreen(),
    '/map-screen': (context) => MapScreen()
  },
  onGenerateRoute: (settings) {
    // 匹配PostImage的路由名称，这里命名为'/post-image'
    if (settings.name == '/post-image') {
      final args = settings.arguments;
      
      // 根据参数类型创建对应PostImage实例
      if (args is Function) {
        // 对应PostImage(this._backButton)构造函数
        return MaterialPageRoute(
          builder: (context) => PostImage(args),
        );
      } else if (args is Map<String, double>) {
        // 对应PostImage.newPin构造函数，用Map传递经纬度参数
        final latitude = args['latitude_y']!;
        final longitude = args['longitude_x']!;
        return MaterialPageRoute(
          builder: (context) => PostImage.newPin(
            latitude_y: latitude,
            longitude_x: longitude,
          ),
        );
      }
      // 参数不匹配时返回默认页面
      return MaterialPageRoute(builder: (context) => const LoginScreen());
    }
    // 未匹配的路由返回null，将走默认的unknownRoute（若已配置）
    return null;
  },
);

2. 跳转时传递参数 #

• 使用PostImage(this._backButton)构造函数跳转：

Navigator.pushNamed(
  context,
  '/post-image',
  arguments: () {
    // 这里写_backButton的逻辑，比如返回上一页
    Navigator.pop(context);
  },
);

• 使用PostImage.newPin构造函数跳转：

Navigator.pushNamed(
  context,
  '/post-image',
  arguments: {
    'latitude_y': 30.1234,
    'longitude_x': 120.5678,
  },
);

可选优化：用类封装参数 #

为避免参数类型混淆，可创建参数类统一管理：

// 定义参数类
class PostImageArgs {
  final Function? backButton;
  final double? latitude;
  final double? longitude;

  // 带回调函数的构造
  PostImageArgs.backButton(this.backButton)
      : latitude = null,
        longitude = null;

  // 带经纬度的构造
  PostImageArgs.newPin(this.latitude, this.longitude)
      : backButton = null;
}

修改onGenerateRoute逻辑：

onGenerateRoute: (settings) {
  if (settings.name == '/post-image') {
    final args = settings.arguments as PostImageArgs;
    
    if (args.backButton != null) {
      return MaterialPageRoute(
        builder: (context) => PostImage(args.backButton!),
      );
    } else if (args.latitude != null && args.longitude != null) {
      return MaterialPageRoute(
        builder: (context) => PostImage.newPin(
          latitude_y: args.latitude!,
          longitude_x: args.longitude!,
        ),
      );
    }
    return MaterialPageRoute(builder: (context) => const LoginScreen());
  }
  return null;
},

跳转时使用参数类：

// 带回调函数跳转
Navigator.pushNamed(
  context,
  '/post-image',
  arguments: PostImageArgs.backButton(() => Navigator.pop(context)),
);

// 带经纬度跳转
Navigator.pushNamed(
  context,
  '/post-image',
  arguments: PostImageArgs.newPin(30.1234, 120.5678),
);

内容的提问来源于stack exchange，提问作者DW_Cod