flutter 无法使用ProviderPackage更改自定义小部件的状态

vybvopom  于 2023-01-02  发布在  Flutter
关注(0)|答案(2)|浏览(157)

我有一个图标是在Map的顶部,基本上它是一个位置大头针图标。我想显示或隐藏时,一个按钮被点击。最初我设置了可见性隐藏,但当我点击按钮,它不会显示
下面是小部件的代码

import 'package:flutter/material.dart';

class MapPickerController {
  Function? mapMoving;
  Function? mapFinishedMoving;
}

class MapPicker extends StatefulWidget {
  final Widget child;
  final Widget iconWidget;
  final bool showDot;
  final MapPickerController mapPickerController;
  final bool showMapPicker;

  MapPicker(
      {required this.mapPickerController,
      required this.iconWidget,
      this.showDot = true,
      required this.child,
      required this.showMapPicker});

  @override
  _MapPickerState createState() => _MapPickerState();
}

class _MapPickerState extends State<MapPicker>
    with SingleTickerProviderStateMixin {
  late AnimationController animationController;

  @override
  void initState() {
    super.initState();
    animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    widget.mapPickerController.mapMoving = mapMoving;
    widget.mapPickerController.mapFinishedMoving = mapFinishedMoving;
  }

  void mapMoving() {
    (widget.showMapPicker);
    if (!animationController.isCompleted || !animationController.isAnimating) {
      animationController.forward();
      print("Map Moving");
    }
  }

  void mapFinishedMoving() {
    animationController.reverse();
    print("Map Finished Moving");
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        widget.child,
        Container(),
        if (widget.showMapPicker)
          AnimatedBuilder(
              animation: animationController,
              builder: (context, snapshot) {
                return Align(
                  alignment: Alignment.center,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Transform.translate(
                        offset: Offset(0, -10 * animationController.value),
                        child: widget.iconWidget,
                      ),
                      if (widget.showDot)
                        Container(
                          width: 5,
                          height: 5,
                          decoration: BoxDecoration(
                              color: Colors.black,
                              borderRadius: BorderRadius.circular(5)),
                        )
                    ],
                  ),
                );
              }),
      ],
    );
  }
}

这是提供程序的代码

bool showMap = false;

  void showMapPicker(bool showMapP) {
    showMap = showMapP;

    notifyListeners();
  }

这是使用GestureDetector隐藏和显示微件的按钮

GestureDetector(
    onTap: () {
        Provider.of < AppData > (context, listen: false)
            .showMapPicker(true);
    },
    child: SvgPicture.asset(
        "assets/edit_loc.svg",
        height: 60,
    ),
),

最后是小部件本身,我想显示和隐藏,

child: MapPicker(
    iconWidget: SvgPicture.asset(
        //color: Colors.deepPurple,
        "assets/pin.svg",
        height: 40,
    ),
    //add map picker controller
    mapPickerController: mapPickerController,

    showMapPicker:
    Provider.of < AppData > (context, listen: false).showMap,

    child: (GoogleMap(
        mapKey: _mapKe)),

),

但是什么都没有发生。布尔值showMapPicker最初被设置为false,我相信在点击GestureDetector后它已经变成True了,但是状态没有改变。我需要添加其他东西吗?setState(){}还是什么?提供程序包不应该处理这个问题吗?

oxcyiej7

oxcyiej71#

在MapPicker小部件中,您不会侦听提供程序的任何新更改,而只是阅读其值一次。您可以将listen参数设置为true或根本不定义它:

showMapPicker: Provider.of<AppData>(context, listen: true).showMap,
ndh0cuux

ndh0cuux2#

child: Consumer < AppData > (
    builder: (context, value, child) => MapPicker(
        iconWidget: SvgPicture.asset(
            //color: Colors.deepPurple,
            "assets/pin.svg",
            height: 40,
        ),
        //add map picker controller
        mapPickerController: mapPickerController,

        showMapPicker: value.showMap,

        child: (GoogleMap(
            mapKey: _mapKey)),
    ),
),

相关问题