json - 单击用户名时如何导航到个人资料详细信息页面
问题描述
你好,所以我在 Mockaroo 中创建了一个假数据来显示用户及其个人资料详细信息。我的目标是显示名称,单击时它将重定向到配置文件详细信息。
到目前为止,这是我的代码。我非常感谢您的帮助,因为我对此很陌生。
Future<List<Users>> _getUsers() async {
var data =
await http.get("https://my.api.mockaroo.com/users.json?key=8f9261404");
var jsonData = json.decode(data.body);
List<Users> users = [];
for (var u in jsonData) {
Users user = Users(
u["user_id"],
u["name"],
u["email"],
u["mobile"],
u["address"]);
users.add(user);
}
return users;
}
我做了一堂课
class Users {
Users(
{this.id,
this.name,
this.email,
this.mobile,
this.address});
final int id;
final String name;
final String email;
final String mobile;
final String address;
}
这是我的用户界面
body: SingleChildScrollView(
child: Column(
children: <Widget>[
FutureBuilder(
future: _getUsers(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.data == null) {
return Container(child: Center(child: Text("Loading...")));
} else {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
key: Key("$index"),
title: Text(snapshot.data[index].name),);
},
);
}
},
),
],
)),
同样,我的目标是在单击用户名时导航到配置文件详细信息页面。
解决方案
您可以ListTile
用 an包装GestureDetector
然后使用Navigator
,如下所示:
GestureDetector(
child: ListTile(
key: Key("$index"),
title: Text(snapshot.data[index].name),
onPressed: (){
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return DetailScreen(data: snapshot.data.documents[index]);
}),
},
)
在内部onPressed
导航到详细信息屏幕,然后将数据传递到详细信息屏幕。这是通过将数据作为参数传递到您的详细信息屏幕来完成的return DetailScreen(data: snapshot.data.documents[index]);
:然后,您可以使用参数在新的详细信息屏幕中访问您的数据data
。您必须首先创建您的详细信息屏幕,如下所示:
class DetailScreen extends StatelessWidget {
final DocumentSnapshot data;
DetailScreen({this.data})
@override
Widget build(BuildContext context) {
return Container(
//Do something with data
);
}
}
推荐阅读
- tensorflow - 如何从张量流中的列表中制作所有“唯一”对?
- android - git remote add 命令:如何在 .git/config 文件中编辑远程标签?
- scala - 火花数据帧是否懒惰地加载镶木地板数据?
- php - 按帖子 ID 从帖子中删除标签和分类
- javascript - 如果我们只知道 className 的一部分,如何删除 className?
- javascript - Scrollreveal.js 使用 afterreveal 调用函数
- ruby - ruby 将字符串转换为 int 而不使用 'to_i'
- c# - 正则表达式 - 在句点之前替换字符串中的特定零
- c# - 在控制器中没有任何换行符
- python - 加快索引“还原”