如何为包装在 Listview 中的容器提供 onTap 功能

Question

我有一个包含在列表视图中的容器列表，我需要提供一个 onTap 功能，例如当用户点击容器时它应该给我一个特定容器的值，下面是我的代码，我尝试使用 Inkwell 函数但它会抛出一个错误，说垂直端口视图。帮助我并提前感谢。

dynamic _allVehiclesDataView = new ListView(
  children: List.generate(this._allVehiclesData.length,
    (i) => new Container(
      decoration: new BoxDecoration(
        border:  Border(
          bottom:  BorderSide(width: 1.0, color: Colors.grey[300]),
        ),
      ),
      padding: const EdgeInsets.all(32.0),
      child: Row(
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  padding: const EdgeInsets.only(bottom:5.0),
                  child: Text(
                    this._allVehiclesData[i]["vehicle"]["registration"],
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 20.0,
                    ),
                  ),
                ),
                Text(
                  'Location :',
                  style: TextStyle(
                    fontSize: 15.0,
                    color: Colors.grey,
                  ),
                ),
                Text(
                  (this._allVehiclesData[i]["address"] == null || 
                    this._allVehiclesData[i]["address"] == 'Not determined') ? 
                    "No data available" : ""+this._allVehiclesData[i]["address"]["LongLabel"],
                  style: TextStyle(
                    fontSize: 13.0,
                    fontWeight: FontWeight.bold,

                  ),
                ),
                Text(
                  'Last known update :',
                  style: TextStyle(
                    fontSize: 15.0,
                    color: Colors.grey[500],
                  ),
                ),
                Text(
                  (this._allVehiclesData[i]["deviceTime"]),
                  style: TextStyle(
                    fontSize: 13.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                this._allVehiclesData[i]["fuel"] != "null"?
                new Row(
                  children: <Widget>[ 
                    Text(
                      'Fuel Level :',
                      style: TextStyle(
                        fontSize: 15.0,
                        color: Colors.grey[500],
                      ),
                    ),
                    new Container(
                      decoration: new BoxDecoration(
                        shape : BoxShape.circle,
                        border: new Border.all(
                          color: Colors.blue[300],
                          width: 5.0,
                        )
                      ),
                    ),
                    Text(
                      (this._allVehiclesData[i]["fuel"].toString()),
                      style: TextStyle(
                        fontSize: 13.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ) : Text(''),
                this._allVehiclesData[i]["temperature"] != "null" ?
                new Row(
                  children: <Widget>[
                    Text(
                      'Temp :',
                      style: TextStyle(
                        fontSize: 15.0,
                        color: Colors.grey[500],
                      ),
                    ),
                    new Container(
                      decoration: new BoxDecoration(
                        shape : BoxShape.circle,
                        border: new Border.all(
                          color: Colors.red[300],
                          width: 5.0,
                        )
                      ),
                    ),
                    Text(
                      (' '+this._allVehiclesData[i]["temperature"].toString()+'  C'),
                      style: TextStyle(
                        fontSize: 13.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ):Text(""),
              ],
            ),
          ),
          status(i),
          // new InkWell(),
        ],
      ),
    ),
  ),
);

Answer 1

您也可以使用GestureDetector 来做同样的事情

使用 onTap 回调将 Container 包装在 GestureDetector 中

GestureDetector(
  // When the child is tapped, do your work
  onTap: () {
    ...
    ...
  },
  // Container
  child: Container(
    ...
  ),
);