单击用户名时如何导航到个人资料详细信息的页面

Question

您好，所以我在 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),);
                  },
                );
              }
            },
          ),
        ],
      )),

同样，我的目标是在点击用户名时导航到个人资料详细信息页面。

Answer 1

您可以用GestureDetector 包裹您的ListTile，然后使用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
    );
  }
}