flutter - Flutter:将新值传递给 Stateful 小部件并更新视图 onTap
问题描述
我已经实现了,每当用户单击带边框的矩形内任意位置的不同路线时google_maps_fltuter
,我需要用新坐标更新地图上的路线(见下图)。最初渲染视图时,地图会安装第一条路线的坐标,但我还需要能够显示不同的路线。
我有一个GestureDetector
小部件可以让这种情况发生,但它不会触发RouteMap
任何课程。
class _PlanJourney extends State<PlanJourney> {
...
GestureDetector(
onTap: () => RouteMap(from, to, routeCoordinates, i),
child: Container(...)
)
...
}
这是根据传递给类的坐标创建地图的类。
class RouteMap extends StatefulWidget {
final fromCoordinate;
final toCoordinate;
final routeCoordinates;
final routeIndex;
RouteMap(this.fromCoordinate, this.toCoordinate, this.routeCoordinates, this.routeIndex);
@override
_RouteMap createState() => _RouteMap(fromCoordinate, toCoordinate, routeCoordinates, routeIndex);
}
class _RouteMap extends State<RouteMap> {
final fromCoordinate;
final toCoordinate;
final routeCoordinates;
final routeIndex;
_RouteMap(this.fromCoordinate, this.toCoordinate, this.routeCoordinates, this.routeIndex);
Completer<GoogleMapController> _controller = Completer();
GoogleMapController mapController;
LatLng _setCenter() {
return LatLng(double.parse(this.toCoordinate.split(',').toList()[1]),
double.parse(this.toCoordinate.split(',').toList()[0]));
}
final Set<Marker> _markers = {};
Map<PolylineId, Polyline> _mapPolylines = {};
int _polylineIdCounter = 1;
void _onMapCreated(GoogleMapController controller) {
_setCenter();
mapController = controller;
_controller.complete(controller);
// the coordinates coming from the API are in LonLat format
// Google map only accepts LatLon format so we have to swap the around
LatLng latLng_1 = LatLng(double.parse(this.fromCoordinate.split(',').toList()[1]),
double.parse(this.fromCoordinate.split(',').toList()[0]));
LatLng latLng_2 = LatLng(double.parse(this.toCoordinate.split(',').toList()[1]),
double.parse(this.toCoordinate.split(',').toList()[0]));
setState(() {
_markers.clear();
addMarker(latLng_1, "Title", "description");
addMarker(latLng_2, "Title", "description");
});
_add(routeIndex);
}
...
更新
我稍微更改了代码,但问题仍然存在。SetState
更新我需要发送给RouteMap
类的值,但类本身不会更新。
class _PlanJourney extends State<PlanJourney> {
...
GestureDetector(
onTap: () {
setState(() {
routeIndex = i; // this is the value I need to send to RouteMap class
// print(routeIndex) -> the routeIndex changes
});
},
child: Container(...) // *note the map is not in this container
)
...
}
...
// the map is initially created here
Container(
margin: EdgeInsets.only(bottom: 10),
height: 400,
child: RouteMap(widget.from, widget.to, routeCoordinates[routeIndex], journeyData['routes'][routeIndex])
)
...
...
class RouteMap extends StatefulWidget {
final fromCoordinate;
final toCoordinate;
final routeCoordinates;
final routeIndex;
RouteMap(this.fromCoordinate, this.toCoordinate, this.routeCoordinates, this.routeIndex);
@override
_RouteMap createState() => _RouteMap();
}
class _RouteMap extends State<RouteMap> {
Completer<GoogleMapController> _controller = Completer();
GoogleMapController mapController;
final Set<Marker> _markers = {};
Map<PolylineId, Polyline> _mapPolylines = {};
int _polylineIdCounter = 1;
...
}
...
解决方案
在 onTap() 中,您可以更新选定的值,如下所示:
GestureDetector(
onTap: () => setState(() {
selectedFrom = from;
selectedTo = to;
selectedRuteCoordinates = routeCoordinates;
}),
child: Container(
child: RouteMap(from, to, routeCoordinates, i),
)
)
推荐阅读
- python - tf 通用句子编码器运行我们的内存
- asp.net-mvc - 如何在管理员中显示已删除的评论
- android - Ionic Live Reload Capacitor Gradle 构建 - 失败!找不到 Java 运行时
- css - 如何在 React Native 的两个不同屏幕上将一个项目放在一个组件的中心?
- http - 在 golang 应用程序的任何地方使用 responsewriter - 中间件
- c++ - 2-3-4 树的 C++ 实现
- javascript - 在电子 js 中处理冻结线程的最佳方法
- node.js - npm 没有启动。错误:找不到模块“webpack-cli/bin/config-yargs”
- hadoop - Apache Hue 无法运行仅运行 MapReduce 作业的配置单元查询
- django - 如何拥有嵌套的 Orderable?