Question

我对Flutter很新，我一直在测试它只是为了看看它是什么样的，我有一个非常基本的问题。如何识别ListView项目上的点击以便我可以显示详细信息屏幕？

我知道ListView的基础知识，但我似乎无法在点击项目时找到如何附加回调。

到目前为止我的内容如下：

    class TestApp extends StatelessWidget {

      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: "Test app",
          home: new HomeScreen()
        );
      }
    }

    class HomeScreen extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        return new HomeState();
      }
    }

    class HomeState extends State {

      List<Item> _items;

      HomeState () {
        _items = [new Item("Item 1"), new Item("Item 2")];
      }

      @override
      Widget build(BuildContext context) {

        return new Scaffold(
          appBar: new AppBar(
              title: new Text("Test App")
          ),
          body: new Container(
              child: new ListView.builder(
                padding: new EdgeInsets.all(8.0),
                itemCount: _items.length,
                itemBuilder: (_, int index) => _items[index],
              )

          )
        );
      }

      void _onDetail(Item item) {
        print("ITEM TAPPED");
      }
    }

    class Item extends StatelessWidget {
      final String text;

      Item(this.text);

      @override
      Widget build(BuildContext context) {
        return new Container(
          padding: new EdgeInsets.all(8.0),
          child: new Center(
              child: new Text(this.text)
          )
        );
      }
    }

更具体地说，我需要为我的＆＃34; onDetail＆＃34;使用被点击的项目调用的方法？

感谢。

Answer 1

GestureDetector是你的朋友。或者，如果您正在使用材料设计，则InkWell和InkResponse。

只需将小部件包装在其中一个小部件中，然后添加onTap回调

即可

Answer 2

正如@Darky所说，解决方案是将每个小部件包装在GestureDetector中。解决方案是：

class TestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(title: "Test app", home: new HomeScreen());
  }
}

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new HomeState();
  }
}

class HomeState extends State {
  List<String> _items = ["Item 1", "Item 2", "Item 3"];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("Test App")),
      body: new Container(
        child: new ListView.builder(
          padding: new EdgeInsets.all(8.0),
          itemCount: _items.length,
          itemBuilder: (_, int index) {
            var item = _items[index];
            return new GestureDetector(
              onTap: () => _onDetail(item),
              child: new Item(item),
            );
          },
        ),
      ),
    );
  }

  void _onDetail(String item) {
    print("ITEM TAPPED: $item");
  }
}

class Item extends StatelessWidget {
  final String text;

  Item(this.text);

  @override
  Widget build(BuildContext context) {
    return new Container(
      padding: new EdgeInsets.all(8.0),
      child: new Center(
        child: new Text(this.text),
      ),
    );
  }
}

关于你应该记住的事情是你不需要对一个小部件保持一个参考，只要保持对将在其中显示的数据的参考。在你的情况下，保留一个字符串列表而不是项目列表。

如何在Flutter中实现主/细节？

2 个答案: