Question

我有几个小部件作为Stack小部件的子级。我想向堆栈中添加一个OffstageWidget / Visible并通过单击按钮使其可见和不可见。小部件应显示在地图上方，高度为50

主要挑战是，当我使用定位放置小部件时，它仍然可见。

    body: Stack(children: <Widget>[
        Positioned.fill(
          //if map is empty show empty const loc copsonroad https://stackoverflow.com/a/56227535/10409567
          child: GoogleMap(
            myLocationEnabled: true,
            mapType: MapType.normal,
            onMapCreated: (GoogleMapController controller) async {
              _currentLocation();
              _controller.complete(controller);
            },
            polylines: Set<Polyline>.of(_mapPolylines.values),
            compassEnabled: true,
            myLocationButtonEnabled: true,
            initialCameraPosition: CameraPosition(

              target: LatLng(
                  latitude_current ?? -4.0428, longitude_current ?? 39.6725),
              zoom: 16.0,
            ),
          ),
        ),
...

我要添加的小部件

 Offstage(offstage:false,
                  child: Container(
                    height: 50,
                    child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[
                        Text(widget.distance),
                        Text(widget.time)
                    ],),
                  ),),

Answer 1

您可以使用AnimatedOpacity小部件。

body: Stack(children: <Widget>[
        AnimatedOpacity(
          opacity: opacityLevel,// maintain this as state variable
          duration: Duration(seconds: 3),
          child: Positioned.fill(
          //if map is empty show empty const loc copsonroad https://stackoverflow.com/a/56227535/1040956
          child: GoogleMap(
            myLocationEnabled: true,
            mapType: MapType.normal,
            onMapCreated: (GoogleMapController controller) async {
              _currentLocation();
              _controller.complete(controller);
            },
            polylines: Set<Polyline>.of(_mapPolylines.values),
            compassEnabled: true,
            myLocationButtonEnabled: true,
            initialCameraPosition: CameraPosition(

              target: LatLng(
                  latitude_current ?? -4.0428, longitude_current ?? 39.6725),
              zoom: 16.0,
            ),
          ),
        ),
        ),

有关此的更多信息，请参见此处的官方文档和示例 https://api.flutter.dev/flutter/widgets/AnimatedOpacity-class.html

Answer 2

这是我的实现方式，点击FAB按钮以显示隐藏标签

Completer<GoogleMapController> _controller = Completer();
  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  bool visible = true;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Navigation Demo'),
      ),
      body: Stack(
        children: <Widget>[
      GoogleMap(
        myLocationEnabled: true,
        mapType: MapType.normal,
        onMapCreated: (GoogleMapController controller) async {
          _controller.complete(controller);
        },
        compassEnabled: true,
        myLocationButtonEnabled: true,
        initialCameraPosition: _kGooglePlex,
      ),
      Visibility(
        visible: visible,
        child: Container(
          color: Colors.lime,
          height: 50,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text('45'),
              Text('10'),
            ],
          ),
        ),
      ),
    ],
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      setState(() {
        visible = !visible;
      });
    },
  ),
);
  }

将小部件叠加在堆栈中并更改其可见性n按钮单击

2 个答案: