Question

我已经通过FutureBuilder实现了ListView ...我有一个问题，就是将列表单击项的代码放在哪里。...

这是我的FutureBuilder：

new FutureBuilder < List < City >> (
    future: fetchCountry(new http.Client()),
    builder: (context, snapshot) {
      if (snapshot.hasError) print(snapshot.error);
      return snapshot.hasData ?
        new CityList(city: snapshot.data) :
        new Center(child: new CircularProgressIndicator());
    }
  ),

这是我的list.dart文件：

@override
Widget build(BuildContext context) {
  return new ListView.builder(
    itemCount: city == null ? 0 : city.length,
    itemBuilder: (BuildContext context, int index) {
      return
      new Card(
        child: new Container(
          padding: EdgeInsets.all(6),
          child: new Center(
            child: SingleChildScrollView(
              child: new Row(
                // Stretch the cards in horizontal axis
                //       crossAxisAlignment: CrossAxisAlignment.stretch,
                children: < Widget > [
                  new CircleAvatar(
                    backgroundColor: Colors.transparent,
                    radius: 15,
                    child: new Image.network(city[index].icon.isEmpty ? "https://www.lightlinksolutions.com/tollfreeadmin/images/ic_cat.png" : city[index].icon)
                    //           child:new Image.asset('images/launcher_icon.png')
                  ),
                  Padding(
                    padding: EdgeInsets.all(8.0),
                    child: new Text(
                      // Read the name field value and set it in the Text widget
                      city[index].cat_name,
                      softWrap: true,
                      // set some style to text
                      style: new TextStyle(
                        fontSize: 16.0, color: Colors.lightBlueAccent),
                    ),
                  ),
                  /*    new Text(
                        // Read the name field value and set it in the Text widget
                        "Category:- " + city[index].cat_name,
                        // set some style to text
                        style: new TextStyle(
                            fontSize: 20.0, color: Colors.amber),
                      )*/
                ],
              ),
            )),
        ),
      );
    });
}

Answer 1

如果要在单击某个项目时添加单击事件，则可以用以下墨水瓶包装要按的内容。

 InkWell(
      onTap: () {
        model.selectProduct(product.productID);
        Navigator.pushNamed<bool>(
                context, '/product/' + model.getSelectedProduct.productID)
            .then((_) => model.selectProduct(null));
      },
      child: //your content here
    ),
  );

Answer 2

将点击侦听器添加到CityList中的每个列表项。

对每个列表项使用ListTile。或者，如果您想实现自己的设计，则可以使用Inkwell或GestureDetector。

以上所有内容均使您可以访问onTap回调。

示例

 @override
  Widget build(BuildContext context) {
    return new ListView.builder(
        itemCount: city == null ? 0 : city.length,
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
              ontap: () {},
              Card(
                  child: new Container(
                    padding: EdgeInsets.all(6),
                    child: new Center(
                        child: SingleChildScrollView(
                          child: new Row(
                            children:<Widget>[
                                new CircleAvatar(
                                backgroundColor: Colors.transparent,
                                radius: 15,
                                child:new Image.network(city[index].icon.isEmpty?"https://www.lightlinksolutions.com/tollfreeadmin/images/ic_cat.png":city[index].icon)
                                ),
                                Padding(
                                  padding: EdgeInsets.all(8.0),
                                  child: new Text(
                                    city[index].cat_name,
                                    softWrap: true,
                                    style: new TextStyle(
                                        fontSize: 16.0, color: Colors.lightBlueAccent),
                                    ),
                              ),
                            ],
                          ),
                        )),
                  ),
                ),
          );
        });
  }

Answer 3

首先看一下how to ask a good question。现在，在CityList类/小部件中，您可以执行几项操作。可能最简单的方法是将卡包装在InkWell中。这是您发布的经过编辑的list.dart文件的示例：

@override
Widget build(BuildContext context) {
  return new ListView.builder(
    itemCount: city == null ? 0 : city.length,
    itemBuilder: (BuildContext context, int index) {
      return InkWell(
          onTap: () {
            // put some code here.
            print(city[index]);
          },
          child: new Card(
        child: new Container(
          padding: EdgeInsets.all(6),
          child: new Center(
            child: SingleChildScrollView(
              child: new Row(
                // Stretch the cards in horizontal axis
                //       crossAxisAlignment: CrossAxisAlignment.stretch,
                children: < Widget > [
                  new CircleAvatar(
                    backgroundColor: Colors.transparent,
                    radius: 15,
                    child: new Image.network(city[index].icon.isEmpty ? "https://www.lightlinksolutions.com/tollfreeadmin/images/ic_cat.png" : city[index].icon)
                    //           child:new Image.asset('images/launcher_icon.png')
                  ),
                  Padding(
                    padding: EdgeInsets.all(8.0),
                    child: new Text(
                      // Read the name field value and set it in the Text widget
                      city[index].cat_name,
                      softWrap: true,
                      // set some style to text
                      style: new TextStyle(
                        fontSize: 16.0, color: Colors.lightBlueAccent),
                    ),
                  ),

                  /*    new Text(
                        // Read the name field value and set it in the Text widget
                        "Category:- " + city[index].cat_name,
                        // set some style to text
                        style: new TextStyle(
                            fontSize: 20.0, color: Colors.amber),
                      )*/
                ],
              ),
            )),
        ),
      );
    }),  
  );
}

如何在Flutter ListView中添加click事件？

3 个答案: