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

问题描述：

我有一个扩展的小部件包裹在卡的Listview.builder周围。我怎样才能让我的卡不仅检测到onTap，而且还将变量传递给导航上的新.dart文件。我目前正在收到大小错误？在Flutter中添加GestureDector到Listview.builder卡的正确方法？

*更新了代码*

这里是我的代码...

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.

我想通过title[index]和'video [index]'类似于SWIFT中的didSelectRowAtIndexPath

你能澄清这部分请“变量传递到我的新.dart”，如果你还添加代码，它会更好能够看到你想要达到的目标。 – aziza

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

答

您正在将GestureDetector添加为Column的一个子项，而Flutter不明白此GestureDetector需要在哪些UI上检测到不同的触摸事件（您未指定您需要使用此GestureDetector执行其任务的确切位置）

如果您需要整个Card是互动的，你需要一个GestureDecetor内换你Card如下

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


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

答

类似阿齐扎的建议，你可以有看看InkWell，它基本上是一个手势检测器，但具有材料设计飞溅。

您还问过如何将变量传递给另一个类。您可以通过将它们作为构造函数变量交给实例化来实现。查看代码示例中的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 
       ), 
       ), 
       ], 
      ), 
     ), 
     ); 
     }), 
); 
}

*代码未测试

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

相关推荐