使用Flutter中的Navigator.pushNamed()函数在屏幕之间传递数据



需要使用函数Navigator.pushNamed function (context, '/ collection', arguments: data)CollectionCard小部件中的数据传输到CollectionPage屏幕。当我这样做并尝试使用函数捕获参数的值时

final data =
ModalRoute.of (context) !. settings.arguments as Map <String, String?>;

出现错误:

_CastError(类型"Null"不是类型转换中类型"Map<String,String?>"的子类型(。

发生此错误是因为从上面的函数获得的值始终为null。

小部件/collection_card.dart:

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_feather_icons/flutter_feather_icons.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:memories/models/collection.dart';
import 'package:memories/theme/colors.dart';
class CollectionCard extends StatelessWidget {
CollectionModel collection;
CollectionCard({
Key? key,
required this.collection,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
final data = collection.toJson();
Navigator.pushNamed(
context,
'/collection',
arguments: data,
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
(collection.coverPhotoUrl == null)
? Container(
width: 140.w,
height: 140.h,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7.r),
color: backgroundColor,
),
child: Align(
alignment: Alignment.center,
child: Icon(
FeatherIcons.image,
size: 50.w,
),
),
)
: Container(
width: 140.w,
height: 140.h,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7.r),
color: backgroundColor,
image: DecorationImage(
image: NetworkImage(collection.coverPhotoUrl!),
fit: BoxFit.cover,
),
),
),
SizedBox(height: 3.h),
Text(
collection.title,
style: Theme.of(context).textTheme.headline3,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
),
],
),
);
}
}

路由器/路由器.dart

import 'package:flutter/material.dart'; import 'package:memories/presentation/pages/add_collection/add_collection.dart'; import 'package:memories/presentation/pages/add_memory/add_memory_page.dart'; import 'package:memories/presentation/pages/collection/collection_page.dart'; import 'package:memories/presentation/pages/edit_collection/edit_collection_page.dart'; import 'package:memories/presentation/pages/edit_memory/edit_memory_page.dart'; import 'package:memories/presentation/pages/edit_user_info/edit_user_info_page.dart'; import 'package:memories/presentation/pages/home/home_page.dart'; import 'package:memories/presentation/pages/memory/memory_page.dart'; import 'package:memories/presentation/pages/more_info/more_info_page.dart'; import 'package:memories/presentation/pages/profile_options/profile_options_page.dart'; import 'package:memories/presentation/pages/reset_password/reset_password_page.dart'; import 'package:memories/presentation/pages/signin/signin_page.dart'; import 'package:memories/presentation/pages/signup/signup_page.dart'; import 'package:memories/router/routes.dart';
Route generateApplicationRouter(RouteSettings settings) {   switch (settings.name) {
case homeRoute:
return MaterialPageRoute(
builder: (BuildContext context) => const HomePage());
case memoryRoute:
return MaterialPageRoute(
builder: (BuildContext context) => const MemoryPage());
case collectionRoute:
return MaterialPageRoute(
builder: (BuildContext context) => const CollectionPage());
case addCollectionRoute:
return MaterialPageRoute(
builder: (BuildContext context) => const AddCollectionPage());
case addMemoryRoute:
return MaterialPageRoute(
builder: (BuildContext context) => const AddMemoryPage());
case editCollectionRoute:
return MaterialPageRoute(
builder: (BuildContext context) => const EditCollectionPage());
case editMemoryRoute:
return MaterialPageRoute(
builder: (BuildContext context) => const EditMemoryPage());
case settingsRoute:
return MaterialPageRoute(
builder: (BuildContext context) => const ProfileOptionsPage());
case moreInfoRoute:
return MaterialPageRoute(
builder: (BuildContext context) => const MoreInfoPage());
case resetPasswordRoute:
return MaterialPageRoute(
builder: (BuildContext context) => const ResetPasswordPage());
case editProfileRoute:
return MaterialPageRoute(
builder: (BuildContext context) => const EditUserInfoPage());
case signInRoute:
return MaterialPageRoute(
builder: (BuildContext context) => const SigninPage());
case signUpRoute:
return MaterialPageRoute(
builder: (BuildContext context) => const SignupPage());
default:
return MaterialPageRoute(
builder: (BuildContext context) => const HomePage());   } }

路由器/路由.dart

const String homeRoute = '/';
const String addMemoryRoute = '/add-memory';
const String editMemoryRoute = '/edit-memory';
const String memoryRoute = '/memory';
const String addCollectionRoute = '/add-collection';
const String editCollectionRoute = '/edit-collection';
const String collectionRoute = '/collection';
const String editProfileRoute = '/edit-profile';
const String settingsRoute = '/settings';
const String resetPasswordRoute = '/reset-password';
const String signInRoute = '/sign-in';
const String signUpRoute = '/sign-up';
const String moreInfoRoute = '/more-info';

演示/收藏/收藏_page.dart

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_feather_icons/flutter_feather_icons.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:memories/theme/colors.dart';
class CollectionPage extends StatelessWidget {
const CollectionPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final data =
ModalRoute.of(context)!.settings.arguments as Map<String, String?>;
print(data);
return Scaffold(
appBar: AppBar(
title: Text(
"Naslov kolekcije",
overflow: TextOverflow.fade,
),
actions: [
Padding(
padding: EdgeInsets.only(right: 10.w),
child: PopupMenuButton(
child: Icon(
FeatherIcons.moreVertical,
size: 30.w,
),
itemBuilder: (context) => [
PopupMenuItem(
value: 'edit-memory',
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
FeatherIcons.edit3,
size: 24.w,
),
SizedBox(
width: 10.w,
),
const Text('Izmijenite kolekciju'),
],
),
),
PopupMenuItem(
value: 'edit-memory',
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
FeatherIcons.trash2,
size: 24.w,
),
SizedBox(
width: 10.w,
),
const Text('Obrišite kolekciju'),
],
),
),
],
),
)
],
),
body: SafeArea(
minimum: EdgeInsets.fromLTRB(20.w, 0.h, 20.h, 0.h),
child: NotificationListener<OverscrollIndicatorNotification>(
onNotification: (overscroll) {
overscroll.disallowIndicator();
return true;
},
child: SingleChildScrollView(
physics: const ClampingScrollPhysics(),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 50.h,
),
Container(
width: double.infinity,
height: 150.h,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7.r),
color: backgroundColor,
),
child: Align(
alignment: Alignment.center,
child: Icon(
FeatherIcons.image,
size: 50.w,
),
),
),
SizedBox(
height: 20.h,
),
const Text('2 uspomene'),
SizedBox(
height: 20.h,
),
],
),
),
),
),
);
}
}

我建议您直接在generateApplicationRouter:中传递数据

Route generateApplicationRouter() {
switch (settings.name) {
// ...
case collectionRoute:
return MaterialPageRoute(
settings: settings, // Just adding settings to your route might also work
builder: (_) => CollectionPage(settings.arguments as Map<String, String?>),
);
// ...
}
}
class CollectionPage extends StatelessWidget {
const CollectionPage(Map<String, String?> data, {Key? key})
: super(key: key);
@override
Widget build(BuildContext context) {
print(data);
// ...
}
}

最新更新