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

Question

我有一个 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。

Answer 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),
                    ),


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

Answer 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
                  ),
                ),
              ],
            ),
          ),
        );
      }),
  );
}

*代码未测试