Question

我有一个ListView，并且我想导航到项目单击的下一页。

我需要一个ListView中被点击项目的索引。我知道可以使用Controller完成此操作。但是我找不到任何例子。

Answer 1

在为GestureRecognizer（或按钮）添加onTap时，您的闭包可以捕获在itemBuilder中传递的索引。

例如

 body: ListView.builder(
            itemBuilder: (BuildContext context, int index) {
              return GestureDetector(
                child: Text(index.toString()),
                onTap: () => Scaffold
                    .of(context)
                    .showSnackBar(SnackBar(content: Text(index.toString()))),
              );
            },
            itemCount: 10));

此代码将显示一个小吃店，其中包含您已点击的ListItem的索引。

一旦有了该项目的索引，便可以使用此问题的其他答案提供的代码导航到新页面。

Answer 2

如果您使用的是ListView.builder，则可以使用ListTile添加一个onTap。这将确保您具有材料波纹效果。

...

List<Post> posts = ...; // your list of contents.

... 


child: ListView.builder(
  itemBuilder: (BuildContext context, int index) {
    var post = posts[index];

    return ListTile(
      title: Text(post.title),
      subtitle: Text('My new post'),
      onTap: () => onTapped(post),
    );
  },
  itemCount: posts.length,
),


...

void onTapped(Post post) {
    // navigate to the next screen.
}

Answer 3

另一种替代方法是使用InkWell。 InkWell的抽头上有不错的涟漪效果，GestureDetector没有。

https://api.flutter.dev/flutter/material/InkWell-class.html

像这样使用：

return Scaffold(
    appBar: AppBar(title: Text("Hello World")),
    body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return InkWell(
            child: Text(index.toString()),
            onTap: () => Scaffold.of(context)
                .showSnackBar(SnackBar(content: Text(index.toString()))),
          );
        },
        itemCount: 10)
);

Answer 4

您应该在ListView中的项目中使用onPressed方法（或添加GestureDetector），然后使用Navigator，类似于下面的代码段，其中AboutScreen是您要转到的下一页。

onPressed: () {
 Navigator.push(
   context,
   MaterialPageRoute(builder: (context) => AboutScreen()),
 );
}

Answer 5

在Flutter文档中有一个example实际上就是这种情况（在单击项目时导航到下一页）。

正如其他人所说，在onTap中的项目上使用ListView.builder。只是以为我会在示例中添加链接，以防其他人需要更完整的解释。

Send data to a new screen - flutter.io

...    

final List<Todo> todos;

...

ListView.builder(
  itemCount: todos.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(todos[index].title),
      onTap: () {
        //Go to the next screen with Navigator.push
      },
    );
  },
);

Flutter ListView项目单击侦听器

5 个答案: