当我使用 ListView 时，ListTile OnTap 正在工作。但是当我使用 ListWheelScrollView 时它不起作用

Question

当我使用 ListView 时，ListTile OnTap 正在工作。但是当我使用 ListWheelScrollView 时它不起作用。我的意思是它不会被窃听。视图发生变化。但我似乎无法点击它。我在很多地方和链接中寻找解决方案，但仍然找不到解决方案。

这些是我做的代码。

@override
  Widget build(BuildContext context) {
    return new ListWheelScrollView(
      physics:FixedExtentScrollPhysics(),
      children: getPostList(),
      itemExtent: 100.0,
    );
  }

  List<PostListItem> getPostList() {
    return _postModal
        .map((contact) => new PostListItem(contact))
        .toList();
  }

这就是我构建 ListTile 的地方

@override
  Widget build(BuildContext context) {
    return new ListTile(
      onTap:  () {
          var route = new MaterialPageRoute(
            builder: (BuildContext context) =>
                new OnTapPost(value: _postModal.fullName),
          );
          Navigator.of(context).push(route);
        },
        leading: new Image.asset('assets/images/logo.png'),
        title: new Text(_postModal.fullName),
        subtitle: new Text(_postModal.email)
    );

  }

在上面的代码中，列表项没有被点击。但是如果我用 ListView 替换 ListWheelScrollView ，如下所示，它可以完美运行。

@override
  Widget build(BuildContext context) {
    return new ListView(
      children: getPostList(),
    );
  }

  List<PostListItem> getPostList() {
    return _postModal
        .map((contact) => new PostListItem(contact))
        .toList();
  }

Answer 1

我遇到了同样的问题如果您仍然想在您的情况下使用 ListWheelScrollView 而不是 ListView，

您可以将 ListWheelScrollView 包装在 GestureDetector 内，并创建 _postModals 列表。使用 onSelectedItemChanged 确定当前选择的列表项索引，然后创建一个全局 Index 变量。这是我的意思的一个例子：

import 'package:flutter/material.dart';

class ListScrollWheelExample extends StatelessWidget {
@override
Widget build(BuildContext context) {

List<PostModal> _postModals = [
  //Add your postModals here
];
int Index;

return GestureDetector(
  onTap: (){
    var route = new MaterialPageRoute(
      builder: (BuildContext context) =>
      new OnTapPost(value: _postModals[Index].fullName),
    );
    Navigator.of(context).push(route);
  },
  child: ListWheelScrollView(
    onSelectedItemChanged: (int index){
      Index = index;
    },
    offAxisFraction: -0.85,
    diameterRatio: 0.75,
    physics: FixedExtentScrollPhysics(),
    itemExtent: 100,
    children: <Widget>[

      getPostList(),

    ],
  ),
);
}
}

并在您的 ListTile 中：

leading: new Image.asset('assets/images/logo.png'),
title: new Text(_postModals[Index].fullName),
subtitle: new Text(_postModals[Index].email)

我使用这种方式是因为我仍然喜欢滚轮外观，并且不想转换为 ListView，但尽量不要使 ListWheelScrollView 的直径太大，以保持点击功能按预期工作。

编辑：如果您希望多个项目可单击（3 或 4 个可见项目），您可以将 ListWheelScrollView 包装在具有 3 或 4 个手势检测器的堆栈中。然后使用 Index-1 和 Index+1 ，...等