Flutter中点击图片跳转页面并传递选中图片的实现方法

核心逻辑 #

用InkWell（带波纹点击效果）或GestureDetector包裹图片添加点击事件，通过Navigator.push的RouteSettings.arguments传递图片及用户类型数据，目标页面通过ModalRoute获取参数并展示。

1. 实现用户类型选择页面（点击跳转） #

以下示例为网格布局的用户类型选择页，点击图片后跳转至个人资料页并传递数据：

import 'package:flutter/material.dart';
import 'profile_page.dart';

class UserTypeSelectPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('选择用户类型')),
      body: GridView.count(
        crossAxisCount: 2,
        padding: const EdgeInsets.all(16),
        gap: 16,
        children: [
          // 普通用户卡片
          InkWell(
            onTap: () => _goToProfile(context, 'assets/regular_user.png', '普通用户'),
            child: Column(
              children: [
                Image.asset('assets/regular_user.png', width: 120, height: 120),
                const SizedBox(height: 8),
                const Text('普通用户'),
              ],
            ),
          ),
          // VIP用户卡片
          InkWell(
            onTap: () => _goToProfile(context, 'assets/vip_user.png', 'VIP用户'),
            child: Column(
              children: [
                Image.asset('assets/vip_user.png', width: 120, height: 120),
                const SizedBox(height: 8),
                const Text('VIP用户'),
              ],
            ),
          ),
        ],
      ),
    );
  }

  void _goToProfile(BuildContext context, String imagePath, String userType) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => const ProfilePage(),
        // 传递包含图片路径和用户类型的参数
        settings: RouteSettings(
          arguments: {'imagePath': imagePath, 'userType': userType},
        ),
      ),
    );
  }
}

2. 实现个人资料页面（接收并展示数据） #

在目标页面获取传递的参数，展示选中的图片和用户类型，同时添加确认操作：

import 'package:flutter/material.dart';

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    // 解析路由参数
    final Map<String, dynamic> args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
    final String imagePath = args['imagePath'];
    final String userType = args['userType'];

    return Scaffold(
      appBar: AppBar(title: const Text('个人资料')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('已选择用户类型：$userType'),
            const SizedBox(height: 16),
            Image.asset(imagePath, width: 150, height: 150),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {
                // 可在此添加保存用户类型的业务逻辑
                Navigator.pop(context);
              },
              child: const Text('确认选择'),
            ),
          ],
        ),
      ),
    );
  }
}

拓展优化 #

• 如果使用网络图片，只需将Image.asset替换为Image.network，传递的imagePath换成对应网络URL即可。
• 若需更规范的数据传递，可自定义实体类：

class UserType {
  final String imagePath;
  final String typeName;

  UserType(this.imagePath, this.typeName);
}

传递时改为：

settings: RouteSettings(arguments: UserType('assets/regular_user.png', '普通用户')),

接收时：

final UserType selectedType = ModalRoute.of(context)!.settings.arguments as UserType;

内容的提问来源于stack exchange，提问作者Ahmed El Hamshary