Flutter click listener中Flatter onTap（）和javascript/jquery$（此）之间的差异

我还在学习飞镖/颤振。我正在试验ListView/ListTile，特别是ListTile中的onTap（）

我对JS/Jquery有点熟悉，在理解JS和flifter之间的不同方法时遇到了困难

请尝试忽略下面代码中的任何语义或技术错误。我更关心的是理论/方法，而不是这是否是一个格式完美、语法正确的示例

在JS中，常见的做法是对API进行AJAX调用，从数据库中获取待售商品列表。假设API返回了4个字段（主键ID、isAvailable、商品名称和商品价格）。然后处理该列表并创建/插入DOM元素以供显示

<div id="234" data-isavailable="y" class=".itemsForSale">TV: $800</div>
<div id="345" data-isavailable="y" class=".itemsForSale">Microwave: $200</div>
<div id="456" data-isavailable="n" class=".itemsForSale">Book: $30</div>
<div id="567" data-isavailable="y" class=".itemsForSale">Sofa: $450</div>

单击处理程序“实时”应用。执行的代码知道单击了什么，可以分析列表中的项目/与之交互。因此，您可以执行以下操作：

$( ".itemsForSale" ).click(function() {
    var isAvailable = $(this).attr('data-isavailable');
    if( isAvailable == 'n' )
      alert('sorry but that item is out of stock!');
    else
      addItemToCart( $(this).attr('id') );
});

关键是，单击处理程序不一定知道或关心每个项目的底层数据。它在运行时会感知“上下文”，然后从UI/etc中提取相关值

对于flifter，我希望使用ListView和ListTile重新创建类似的功能。具体来说，ListTile的onTap（）。我感到困惑，因为似乎一切都是“提前”编码的

这是一个基本的例子（暂时忽略，我不显示价格等）

首先，我甚至不确定是否需要为每个ListView项分配一个自定义键（基于数据库的主键），但这与现在无关

我一直认为onTap处理程序似乎没有“$（this）”的等价物。Flatter是否为每个ViewTile提供了它自己的onTap（）副本，并且每个相关的键信息都被“硬编码”到每个视图中（对于每个itemBuilder循环，mapper.keys.elementAt（index）.toString（）的当前值被替换到onTap（）中）

我可能没有恰当地描述我的困惑，我甚至不确定我将遇到的所有问题。我确信我这样做的方式非常“旧”，并且不符合react和其他更新的方法/框架（在UI元素中组合数据）

我只是不知道如何才能添加更复杂的逻辑（比如检查点击内容的可用性）

有没有人有任何参考资料或解释可以帮助我弥合这一差距？我甚至不知道如何描述$（this）的概念，以及如何与flifter/等进行比较来寻找它。我只知道有些东西感觉非常不同

---

谢谢

我理解你的困惑，可能是因为几个月前我刚开始学习《颤栗》时，我也问了一个类似的问题。这就是我的想法-

ListTile项是否有自己的onTap（）副本并不重要。答：它没有自己的副本。（下面的代码片段将解释）和B.每种编程语言/SDK/任何东西都有自己的工作方式。你想说的可能是你有一辆宝马。它有某些类型的中断。而你正试图在奥迪汽车上实现准确的突破。这样做可能不正确，因为与中断相关的其他系统可能无法以优化的方式工作

现在，请查看以下代码段：

@override
  Widget build(BuildContext context) {
    return ListView.separated(
      separatorBuilder: (context, index) => ListViewDivider(),
      itemCount: faceRecTransactions.length,
      itemBuilder: (BuildContext context, int index) {
        return FacerecTransactionListItem(facerecTransaction: faceRecTransactions[index], onTap:()=> _onTap(faceRecTransactions[index],context),);
      },
    );

  }

  void _onTap(FacerecTransaction facerecTransaction, BuildContext context) {
    print('Status : ${facerecTransaction.userId}');
    Navigator.push(context, MaterialPageRoute(builder: (context) => FacerecDetailPage(
      facerecTransaction: facerecTransaction,
      criminalList: this.criminalList,)));

  }

没有每个列表项的onTap副本。因为我们在ListView中编写onTap，所以它只是“感觉”到了它。如果您查看上面的示例，当用户点击某个项目时，onTap将接收信息。我们不创建onTap数组

因为没有onTaps的副本，所以它不是真正的超前代码。它的工作原理与Ajax非常相似，在Ajax中，onTap并不真正关心有效负载。它只执行指定的操作

---

现在，在上面的示例中，详细页面可以检查特定项目的可用性。如果项目不可用，则可以显示相应的消息。根据需要，我们可以在onTap中编写此代码，也可以在下一页中编写。简言之，onTap可以根据需要处理复杂的逻辑。

另外一个想法是，由于$（这一点），您可以查看DOM中的前/后兄弟节点，甚至可以访问父节点并检查父节点的属性。诸如此类的事情只会根据屏幕的组织方式等帮助您更加了解用户在做什么。非常感谢您的详细回复！知道没有如您所说的onTap数组是很有帮助的。它仍然感觉有点“超前”，但我认为这只是因为它是一种非常不同的编码方法。是的，绝对是。

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {

  var mapper = {
    '234': 'TV',
    '345': 'Microwave',
    '456': 'Book',
    '567': 'Sofa'
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Second Screen"),
        ),
        body:
            ListView.builder(  
              padding: const EdgeInsets.all(8.0),
              itemCount: mapper.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  key: new Key(mapper.keys.elementAt(index).toString()),
                  title: Text('${mapper.values.elementAt(index)}'),
                  onTap: () {
                    print('you clicked: ' + mapper.keys.elementAt(index).toString() );
                    addToShoppingCart( mapper.keys.elementAt(index).toString() ); // this doesnt exist yet and is just an example
                  } 
                );
              }
            )
    );
  }

}

@override
  Widget build(BuildContext context) {
    return ListView.separated(
      separatorBuilder: (context, index) => ListViewDivider(),
      itemCount: faceRecTransactions.length,
      itemBuilder: (BuildContext context, int index) {
        return FacerecTransactionListItem(facerecTransaction: faceRecTransactions[index], onTap:()=> _onTap(faceRecTransactions[index],context),);
      },
    );

  }

  void _onTap(FacerecTransaction facerecTransaction, BuildContext context) {
    print('Status : ${facerecTransaction.userId}');
    Navigator.push(context, MaterialPageRoute(builder: (context) => FacerecDetailPage(
      facerecTransaction: facerecTransaction,
      criminalList: this.criminalList,)));

  }