Question

我正在将数据从api加载到类UserProductType List<UserProductType> _visibleUserProductTypes = api();中。然后，我使用ListView.builder创建具有子GestureDetector的卡片，以便我可以注册点击。（然后，我想更改卡的背景，一旦按下按钮，就将选择的ID发送给其他功能...）

问题在于此代码未调用函数onTap: () => selectItem(product),

代码的相关部分：

  void selectItem(UserProductType product) {
      print(product.name);
  }

  Container listSection() {
    return Container(
        child: Expanded(
          child: ListView.builder(
            itemCount: _visibleUserProductTypes.length,
            itemBuilder: (context, index) {
              var product = _visibleUserProductTypes[index];
              return new Card(
                elevation: 2,
                child: GestureDetector (
                  onTap: () => selectItem(product),
                  child: Container(
                    padding: EdgeInsets.all(15.0),
                    child: Row(
                      children: <Widget>[
                        Icon(_icons[index], color: Colors.grey,),
                        SizedBox(width: 10.0,),
                        Text(_visibleUserProductTypes[index].name,
                          style: TextStyle(color: _colors[index]),
                        ),
                      ],
                    ),
                  ),
                ),
              );
            },
          ),
        )
    );
  }

问题出在哪里？

Answer 1

将整个Card小部件包装在GestureDetector小部件中。以下代码可以解决您的问题：

return GestureDetector(
    onTap: () => selectItem(product),
    child: Card(
        elevation: 2,
        child: Container(
            padding: EdgeInsets.all(15.0),
            child: Row(
                children: <Widget>[
                    Icon(_icons[index], color: Colors.grey,),
                    SizedBox(width: 10.0,),
                    Text(
                        _visibleUserProductTypes[index].name,
                        style: TextStyle(color: _colors[index]),
                    ),
                ],
            ),
        ),
    ),
);

Answer 2

您可以使用ListTile代替Card。

return ListTile(
  onTap: () => selectItem(product),
  leading: Icon(_icons[index], color: Colors.grey),
  title: Text(_visibleUserProductTypes[index].name,
    style: TextStyle(color: _colors[index]),
  ),
);

Answer 3

点击卡内的容器可能会执行该功能。或者只是将手势检测器放在卡上，然后点击水龙头，即可为您提供所需的输出

如何使ListView在颤抖中可点击？

3 个答案: