Flutter:iOS上的谷歌地图在Singlechildscrollview中的表现不如预期

Question

我在我的应用程序中使用谷歌地图插件，在单子滚动视图中，还有一些列表和其他小部件。问题是，当我向下或向上滚动时，谷歌地图小部件粘在顶部或底部，与其他小部件重叠，如下所示。我试图查看github和stackoverflow上存在的问题，但找不到任何解决方案。如果有人面临同样的问题或有解决方案，请帮助我。

问题->https://gifyu.com/image/YVZx

以下是重现相同问题的代码。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Completer<GoogleMapController> _controller = Completer();
static final CameraPosition _kGooglePlex = CameraPosition(
target: LatLng(37.42796133580664, -122.085749655962),
zoom: 14.4746,
);
static final CameraPosition _kLake = CameraPosition(
bearing: 192.8334901395799,
target: LatLng(37.43296265331129, -122.08832357078792),
tilt: 59.440717697143555,
zoom: 19.151926040649414);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('iOS Map'),
),
body: SingleChildScrollView(
child: Column(
children: [
ListView.builder(
itemCount: 20,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (ctx, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Text('Test item $index'),
),
);
}),
SizedBox(
height: 250,
child: GoogleMap(
mapType: MapType.hybrid,
initialCameraPosition: _kGooglePlex,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
),
),
ListView.builder(
itemCount: 50,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (ctx, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Text('Test item $index'),
),
);
}),
],
),
),
);
}
}

Answer 1

这是一个与Flutter引擎有关的问题，而不是Maps问题。

这是问题链接https://github.com/flutter/flutter/issues/76097

此问题已在最新的flutter 2.2版本中修复。

所以请升级到最新版本。

Answer 2

我修改了您的一些代码片段，不是在ScrollView中添加，而是在ListView中添加它，然后它将解决您的问题，

@overrideWidget build(BuildContext context) {return Scaffold(
appBar: AppBar(
title: Text('iOS Map'),
),
body: ListView(
children: [
ListView.builder(
itemCount: 20,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (ctx, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Text('Test item $index'),
),
);
}),
SizedBox(
height: 250,
child: GoogleMap(
mapType: MapType.hybrid,
initialCameraPosition: _kGooglePlex,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
),
),
ListView.builder(
itemCount: 50,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (ctx, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Text('Test item $index'),
),
);
}),
]
),

)；}