web-dev-qa-db-ja.com

FlutterでGestureDectorをListview.builderカードに追加する適切な方法は？

カードの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のdidSelectRowAtIndexPathと同様にtitle[index]とvideo[index]を渡したいのですが。

navigationwidgetfluttergesturedetector
6
Charles Jr

GestureDetectorをColumnの1つの子として追加していますが、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),
                    ),


                  ],
                ),),
            );
          }),
    );
  }
18
aziza

Azizaの提案と同様に、基本的にはGestureDetectorである 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
                  ),
                ),
              ],
            ),
          ),
        );
      }),
  );
}

*コードはテストされていません

8
Rainer Wittmann