Question

我正在努力构建一个有效的ListView，该ListView会导致一组特定的条目，具体取决于我在ListView中点击的数据。

我只使用一个Firestore集合，其中包含三个条目，这些条目显示在一个简单的ListView中。这些条目中的每个条目都包含一个地图结构，该地图结构也填充了一组地图结构（请参见图片）。这个想法是，当我点击一个ListView条目时，Flexible将打开，在新列表和Google地图中显示该条目的特定地图结构中的信息。

与ListViews一起使用的映射和数组的使用并没有得到很好的介绍，所以我真的不知道我在这里做什么。

我猜我的ListView和Flexible之间没有连接，因为当我点击其中一项时，什么也没发生。我不知道我也必须在这里使用什么类型：子集合，映射或数组。这也是以后的计费问题。

此部分显示了i列表，其中包含用户可以选择的游览。轻按一个条目后，应该会显示一个Flex，其中包含兴趣点和一个与Google Flex中的ListView相对应的交互式Google地图。

return StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection('tours_collection').snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError)
          return new Text('Error: ${snapshot.error}');
        switch (snapshot.connectionState) {
          case ConnectionState.waiting: return new Text('');
          default:
            return new ListView(
              children: snapshot.data.documents.map((DocumentSnapshot document) {
                return new ListTile(
                  title: new Text(document['tourtitle']),
                  subtitle: new Text(document['region']),
                  //onTap-section can be modified
                  onTap: () async {
                    return Column(
                      children: <Widget>[
                        Flexible(
                          flex: 2,
                          child: TourMap(
                            documents: snapshot.data.documents,
                            initialPosition:  LatLng(document['mainlocation'].latitude,
                              document['mainlocation'].longitude,),
                            mapController: mapController,
                          ),
                        ),
                        Flexible(
                          flex: 3,
                          child: TourList(
                              documents: snapshot.data.documents,
                              mapController: mapController),
                        )
                      ],
                    );
                  },
                );
              }).toList(),
            );
        }
      },
    );

这部分是Flexible中的列表：


class TourList extends StatelessWidget {
  const TourList(
      {Key key, @required this.documents, @required this.mapController})
      : super(key: key);

  final List<DocumentSnapshot> documents;
  final Completer<GoogleMapController> mapController;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: documents.length,
      itemBuilder: (builder, index) {
        final document = documents[index];
        return new ListTile(
          trailing: new CircleAvatar(
            radius: 50.0,
            backgroundColor: Colors.white,
          ),
          title: Text(document['name']),
          onTap: () async {
            final controller = await mapController.future;
            await controller.animateCamera(
                CameraUpdate.newCameraPosition(CameraPosition(
                  target: LatLng(
                    document['location'].latitude,
                    document['location'].longitude,
                  ),
                  zoom: 15,
                )));
          },
        );
      },
    );
  }
}

这部分是Flexible中的Google地图：

class TourMap extends StatelessWidget {
  const TourMap({
    Key key,
    @required this.documents,
    @required this.initialPosition,
    @required this.mapController,
  }) : super(key: key);

  final LatLng initialPosition;
  final List<DocumentSnapshot> documents;
  final Completer<GoogleMapController> mapController;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        GoogleMap(
          initialCameraPosition: CameraPosition(
            target: initialPosition,
            zoom: 12,
          ),
          mapType: MapType.normal,
          markers: documents
              .map((document) => Marker(
              markerId: MarkerId(document['spot_id']),
              icon: BitmapDescriptor.defaultMarker,
              position: LatLng(
                document['location'].latitude,
                document['location'].longitude,
              ),
              infoWindow: InfoWindow(
                title: document['name'],
              )))
              .toSet(),
          onMapCreated: (mapController) {
            this.mapController.complete(mapController);
          },
        ),
      ],
    );
  }
}

由于onTap函数没有反应，我猜代码内肯定存在逻辑错误，因为代码本身是干净的。控制台还告诉我某些“ SurfaceComposerClient交易失败”数据。我不知道这是否有帮助。如果需要，我可以提供有关控制台的更多信息。我基本上将部分工作代码放在一起，但是它们实际上不能在同一文件中工作。

第一个开始的ListView 应该在onTap上打开的Flexible 我的数据库结构

如何使用Flutter ListView通过OnTap函数通过交互式地图打开第二个列表？

0 个答案: