我对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;使用被点击的项目调用的方法?
感谢。
答案 0 :(得分:3)
GestureDetector
是你的朋友。或者,如果您正在使用材料设计,则InkWell
和InkResponse
。
只需将小部件包装在其中一个小部件中,然后添加onTap
回调
答案 1 :(得分:1)
正如@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),
),
);
}
}
关于你应该记住的事情是你不需要对一个小部件保持一个参考,只要保持对将在其中显示的数据的参考。在你的情况下,保留一个字符串列表而不是项目列表。