在 Flutter 中将 GestureDector 添加到 Listview.builder 卡的正确方法？

Posted 2023-02-23

【中文标题】在 Flutter 中将 GestureDector 添加到 Listview.builder 卡的正确方法？

【英文标题】：Proper way to add GestureDector to Listview.builder card in Flutter?

【发布时间】：2018-03-07 01:28:50

【问题描述】：

我有一个 Expanded 小部件包裹在卡片的 Listview.builder 周围。我怎样才能让我的卡不仅能检测到onTap，还能将变量传递给我在导航上的新.dart 文件。我目前遇到尺寸错误？

已更新代码

这是我的代码：

new Expanded(
                child: new ListView.builder(
                    itemCount: id == null ? 0 : id.length,
                    itemBuilder: (BuildContext context, int index) 
                      return new Card(
                        child: new Column(
                          children: <Widget>[
                            new Image.network(video[index]),
                            new Padding(padding: new EdgeInsets.all(3.0)),
                            new Text(title[index],
                            style: new TextStyle(fontWeight: FontWeight.bold,
                            color: Colors.black),
                            ),
                            new GestureDetector(onTap: ()
                              print(id[index]);
                            ,)

                          ],
                        ),
                      );

                    ))

这里是抛出的异常：

The following assertion was thrown during performLayout():
RenderPointerListener object was given an infinite size during layout.
This probably means that it is a render object that tries to be as big as possible, but it was put
inside another render object that allows its children to pick their own size.

我想在 ios Swift 中传递 title[index] 和 video[index] 类似于 didSelectRowAtIndexPath。

【问题讨论】：

您能否澄清这部分请“将变量传递给我的新 .dart”，如果您添加代码以便能够看到您想要实现的目标会更好。

@aziza 我已经添加了我的代码并抛出了错误异常。

【参考方案1】：

您正在将GestureDetector 添加为Column 的一个子项，并且Flutter 不了解此GestureDetector 需要在哪一块UI 上检测不同的触摸事件（您没有具体说明您需要在哪里这个GestureDetector 正在执行它的任务）

如果您需要整个Card 进行交互，您需要将Card 包装在GestureDecetor 中，如下所示

var id = ["title 1", "title 2", "title 3", "title 4", "title 5",];

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      body: new ListView.builder(
          itemCount: id == null ? 0 : id.length,
          itemBuilder: (BuildContext context, int index) 
            return new GestureDetector( //You need to make my child interactive
              onTap: () => print(id[index]),
              child: new Card( //I am the clickable child
                child: new Column(
                  children: <Widget>[
                    //new Image.network(video[index]),
                    new Padding(padding: new EdgeInsets.all(3.0)),
                    new Text(id[index],
                      style: new TextStyle(fontWeight: FontWeight.bold,
                          color: Colors.black),
                    ),


                  ],
                ),),
            );
          ),
    );
  

【讨论】：

这对我的自定义 listView 有帮助；)

这很有帮助。谢谢

【参考方案2】：

与 aziza 的建议类似，您可以查看InkWell，它基本上是一个 GestureDetector，但具有材料设计飞溅。

您还询问了如何将变量传递给另一个类。您可以通过在实例化中将它们作为构造函数变量传递来做到这一点。看看代码示例中的 onTap 方法。

代码可能如下所示：

@override
Widget build(BuildContext context) 
  return new Scaffold(
    body: new ListView.builder(
      itemCount: id == null ? 0 : id.length,
      itemBuilder: (BuildContext context, int index) 
        return new InkWell(
          onTap: () 
            Navigator.push(
              context,
              new MaterialPageRoute(
                builder: (context) 
                  return new OtherClass(id[index], video[index]);
                ,
              ),
            );
          ,
          child: new Card(
            child: new Column(
              children: <Widget>[
                //new Image.network(video[index]),
                new Padding(padding: new EdgeInsets.all(3.0)),
                new Text(id[index],
                  style: new TextStyle(fontWeight: FontWeight.bold,
                      color: Colors.black
                  ),
                ),
              ],
            ),
          ),
        );
      ),
  );

*代码未测试

【讨论】：

这个解决方案比公认的解决方案更适合我，因为GestureDetector 我的ListView 项目（不是Cards，而是Containers）在空白区域是不可点击的

@JuliánMartínez 您可以将 hitTestBehaviour 设置为半透明，以便在手势检测器上检测到对空白区域的点击。