Flutter ListView 项目点击监听器答案

【问题标题】：Flutter ListView Item Click ListenerFlutter ListView 项目点击监听器
【发布时间】：2018-12-27 04:09:03
【问题描述】：

我有一个ListView，我想在点击项目时导航到下一页。

我需要我的ListView 的点击项的索引。我知道这可以使用Controller 来完成。但我找不到任何例子。

【问题讨论】：

不需要flutter-sdk标签，参见flutter标签的描述

【解决方案1】：

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

ListView.builder(
  itemBuilder: (_, i) {
    return ListTile(
      title: Text('$i'),
      onTap: () {}, // Handle your onTap here. 
    );
  },
)

【讨论】：

【解决方案2】：

另一种选择是使用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)
);

【讨论】：

请注意 InkWell 是一个材质小部件，在 iOS 中不起作用

【解决方案3】：

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

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

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
      },
    );
  },
);

【讨论】：

@Volleyball 不同之处只是包含来自 Flutter 文档的链接和示例代码。

【解决方案4】：

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

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

【讨论】：

为什么投反对票？答案对于从 ListView 中的项目（或至少一种方式）导航到另一个屏幕是正确的。也许你应该解释一下，也许提供一个不同的解决方案。
回调的名称取决于它是如何实现的，如果 ListView 中的项目是某种按钮（FlatButton，图标按钮等）。如果您使用 GestureDetector，那么您可以使用 onTap。您需要查看 Class 文档以了解哪个回调最适合您的用例。

【解决方案5】：

为您的 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 的索引。

获得项目索引后，您可以使用此问题的其他答案提供的代码导航到新页面。

【讨论】：

我会选择InkWell 而不是GestureDetector，因为它会增加点击涟漪，并且还有onTap()。