Question

我正在尝试在FlexibleSpaceBar内部使用Google地图制作固定的ScrollView。

有带有SliverAppBar和主体内容的NestedScrollView。 SliverAppBar内是google map小部件，应用栏占据了设备的整个视图。还有一个FloatingActionButton，按下时应滚动到视图底部，以显示NestedScrollView的正文内容，并将地图移至应用程序栏，反之亦然。从技术上讲，它可以正常工作，如果有人想要查看它的外观，则有一个代码：

@override
State<MapPage> createState() => MapPageState();
}

const LatLng _coordinates = LatLng(37.43296265331129, -122.08832357078792);

class MapPageState extends State<MapPage> with SingleTickerProviderStateMixin {
ScrollController _scrollController;
Completer<GoogleMapController> _controller = Completer();
double _scrollExtent;
bool _buttonState;

static final CameraPosition _kGooglePlex = CameraPosition(
  target: _coordinates,
  zoom: 14.4746,
);

@override
void initState() {
  _buttonState = true;
  _scrollController = ScrollController(initialScrollOffset: 0.0);
  super.initState();
}

@override
void dispose() {
  _scrollController.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  _scrollExtent = MediaQuery.of(context).size.height;
  return Scaffold(
    floatingActionButton: FloatingActionButton(
      child: Icon(Icons.keyboard_arrow_down),
      backgroundColor: Colors.white,
      foregroundColor: Colors.red,
      onPressed: (){
        if(_buttonState){
          _scrollController.animateTo(_scrollExtent, duration: Duration(seconds: 1), curve: Curves.fastOutSlowIn);
          _buttonState = false;
        }
        else{
          _scrollController.animateTo(-_scrollExtent, duration: Duration(seconds: 1), curve: Curves.fastOutSlowIn);
          _buttonState = true;
        }
      },
    ),
    body: NestedScrollView(
        controller: _scrollController,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: MediaQuery.of(context).size.height,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text("Title",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                    )),
                background: GoogleMap(
                  mapType: MapType.normal,
                  initialCameraPosition: _kGooglePlex,
                  markers: _createMarker(),
                  onMapCreated: (GoogleMapController controller) {
                    _controller.complete(controller);
                  },
                ),
              ),
            ),
          ];
        },
        body: Container(
          padding: EdgeInsets.all(24.0),
          child: Text(
            'Content'),
        ),
      ),
  );
}
Set<Marker> _createMarker() {
  return <Marker>[
    Marker(
      markerId: MarkerId("marker_1"),
      position: _coordinates,
      infoWindow: InfoWindow(title: 'Marker"'),
    ),
  ].toSet();
}

}

重要的部分在这里：

NestedScrollView(
      controller: _scrollController,
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            expandedHeight: MediaQuery.of(context).size.height,
            floating: false,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text("Title",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16.0,
                  )),
              background: GoogleMap(
                mapType: MapType.normal,
                initialCameraPosition: _kGooglePlex,
                markers: _createMarker(),
                onMapCreated: (GoogleMapController controller) {
                  _controller.complete(controller);
                },
              ),
            ),
          ),
        ];
      },

有3个问题：

我不明白如何防止用户滚动手势。

我希望仅由滚动控制器控制它。我尝试将NestedScrollView的物理设置为NeverScrollableScrollPhysics（），但没有任何效果。

可滚动窗口小部件中的地图手势检测异常

您无法正确拖动它，它似乎只能在水龙头上使用。例如，在ListView中，它在NeverScrollable物理学中表现良好。

每次在应用程序栏中重建它时，似乎都会导致某种形式的内存泄漏，并且我会收到下一个警告。

E/flutter (10644): #0      _AsyncCompleter.complete (dart:async/future_impl.dart:39:31)
E/flutter (10644): #1      MapPageState.build.<anonymous closure>.<anonymous closure> (package:flutter_app/map_page2.dart:83:35)
E/flutter (10644): #2      _GoogleMapState.onPlatformViewCreated (package:google_maps_flutter/src/google_map.dart:259:14)
E/flutter (10644): <asynchronous suspension>
E/flutter (10644): #3      AndroidViewController._create (package:flutter/src/services/platform_views.dart:599:15)  
...

如果任何人都可以帮助解决这些问题，或者可能知道这种实现的示例，我将非常感激。

Answer 1

我遇到了同样的问题，找到了解决方法here。

                background: GoogleMap(
                  gestureRecognizers: [
                    Factory<OneSequenceGestureRecognizer>(
                      () => EagerGestureRecognizer(),
                    ),
                  ].toSet(),

在SliverAppBar中实现GoogleMap

1 个答案: