我仍在学习 dart/flutter。我正在试验 ListView/ListTile，特别是来自 ListTile 的 onTap()。

我对 JS/Jquery 比较熟悉，但很难理解 JS 和 Flutter 之间的方法差异。

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

在 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() {
   // do something
});

点击处理程序“实时”应用。执行的代码知道单击了什么，并可以分析/与列表中的该项目交互。所以，你可以这样做:

$( ".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/等中提取相关值。

对于 flutter，我希望使用 ListView 和 ListTile 重新创建类似的功能。具体来说，ListTile 的 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
                  } 
                );
              }
            )
    );
  }

}

首先，我什至不确定我是否需要为每个 ListView 项目分配一个自定义键(基于数据库的主键)，但现在这无关紧要。

我遇到的问题是 onTap 处理程序似乎没有“$(this)”的等效项。 flutter 是否给每个 ViewTile 它是 onTap() 的“自己的”副本，并且每个相关的关键信息都“硬编码”到每个 ViewTile 中(对于每个 itemBuilder 循环， mapper.keys.elementAt(index).toString() 的当前值是替换为 onTap() )？

我可能没有正确描述我的困惑，我什至不确定我将遇到的所有问题。我确定我这样做的方式非常“陈旧”，并且与 React 和其他较新的方法/框架(在 UI 元素中组合数据)不一致。

我只是无法理解如何添加更复杂的逻辑(例如检查所点击内容的可用性)。

有没有人有任何引用资料或解释可以帮助我弥合这一差距？我什至不知道如何描述 $(this) 的概念以及与 flutter/etc 相比我将如何搜索它。我只知道感觉很不一样。

谢谢!

最佳答案

我理解您的困惑，可能是因为几个月前我刚开始使用 Flutter 时也遇到过类似的问题。这就是我的想法-

ListTile 项是否有它自己的 onTap() 副本并不重要。 A. 它没有自己的副本。 (下面的代码片段将解释)和 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 非常相似，其中 onTap 并不真正关心负载。它只执行指定的操作。

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

关于flutter - 点击监听器中 flutter onTap() 和 javascript/jquery $(this) 的区别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57202810/