如何在充满相同小部件的列表中导航到特定的路由？
提问于 2021-09-19 17:39:09
我有一个应用程序，用户可以将其添加到图书中，并将其上传到firestore数据库，然后我使用streamBuilder()接收所有数据，并将其显示在带有card()的GestureDetector()列表中。
下面是
final bookWidget = GestureDetector(
key: ValueKey(loggedInUser.email),
onTap: () {
print(title);
},
child: Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Stack(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width: 100,
height: 140,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(bookCoverURL)),
),
),
Container(
width: 230,
//color: Colors.red,
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Text(
category.toString(),
style: TextStyle(
color: Colors.grey,
fontStyle: FontStyle.italic,
),
),
Container(
margin: EdgeInsets.only(top: 10),
child: Text(
title.toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 17,
),
),
),
Container(
margin: EdgeInsets.only(top: 10),
child: Text(
(author),
style:
TextStyle(color: Colors.grey),
),
),
],
),
),
Icon(
Icons.arrow_forward_ios,
color: Colors.black,
size: 15,
)
],
),
],
),
//color: Colors.yellowAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
),
);
bookWidgets.add(bookWidget);然后我在屏幕上显示我的所有代码：
Column(
children: bookWidgets,
)
但是，当用户按下特定的card()时，我如何让应用程序导航到新的屏幕？因为它们都是相同的小部件，并且没有唯一标识符？
任何帮助都是非常感谢的！谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-09-19 20:11:11
GestureDetector(
key: ValueKey(loggedInUser.email),
onTap: () {
Navigator.pushNamed(
context,
'/routeNameHere',
arguments: id,
);
},
)在参数参数中: ID -您可以通过要导航到的卡的id来更改id。
您必须为卡片的显示详细信息创建一个页面，该页面仅显示参数中具有相同id的卡片。因此，在新页面上，创建一个用于接收参数的变量，例如：
final cardId = ModalRoute.of(context).settings.arguments as String;因此，页面可以根据cardId显示卡片。
Stack Overflow用户
发布于 2021-09-24 03:44:35
您将需要创建一个要传递的标识符(在本例中为“book”)。在Flutter中，当调用或传递对象时，这些是必需的。
但是，就使用Named Routes而言，这允许您发送不带标识符的数据，但在编码时被认为是不好的做法，因为您没有对调用的引用，也不能回溯整个数据。
记住以上内容，it is possible to use the OnTap() inside each child card container以便在处理点击或点击手势时，使用路由将用户带到不同的屏幕，因为它是GestureDetector类的一部分。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69248303
复制相关文章
点击加载更多
腾讯云开发者
