Блог

Главная - Вопросы по программированию - Флаттер уменьшает размытие фона разборного виджета по мере его дальнейшего перетаскивания вниз

Флаттер уменьшает размытие фона разборного виджета по мере его дальнейшего перетаскивания вниз

#flutter

Вопрос:

Я отображаю на своем экране недопустимый диалог. Это делает фон размытым, когда он отображается, и чем дальше он перетаскивается, тем меньше он уменьшается. Этот пример работает, но моя проблема в том, что в Listener виджете его методы onPointerMove, onPointerDown, onPointerSignal реагируют только на вводимые пользователем данные, и когда я немного опускаю его, чтобы отклонить, и вынимаю из него палец, переход размытого фона в отсутствие размытия меняется слишком внезапно. Он работает плавно только тогда, когда я перетаскиваю модал до упора, но когда я убираю с него палец, он просто отслеживает последнюю позицию, в которой я держал палец на экране, а затем удаляет размытие фона, когда диалоговое окно полностью закрывается.

Я делаю это, потому что хочу отслеживать, насколько сильно перетаскивается модал, чтобы я мог взять процент и скорректировать значение ImageFilter.blur .

О чем я тоже думал, чтобы дать key какой-то виджет MyDialogModal и получить его позицию, но проблема в том, что я могу получить его, только если буду держать палец на экране, когда onPointerMove он активируется, иначе он не будет работать.

Есть ли способ добавить слушателя, который всегда будет слушать мой модальный и всегда возвращать свою позицию, чтобы соответствующим образом корректировать размытый фон? Или, может быть, кто-нибудь, пожалуйста, может предложить лучший способ решения этой проблемы?

   @override
  Widget build(BuildContext context) {
    return Positioned.fill(
          child: Container(
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 15 * _percentageHeight, sigmaY: 15 * _percentageHeight),
              child: Align(
                alignment: Alignment.bottomCenter,
                child: Listener(
                  onPointerMove: (PointerMoveEvent event) {
                    double percentage = 1 - (_initialPosY! - event.position.dy).abs() / _keyMyDialog.currentContext!.size!.height;
                  setState(() => _percentageHeight = percentage);
                  },
                  onPointerDown: (PointerDownEvent event) {
                    _initialPosY = event.position.dy;
                  },
                  onPointerSignal: (PointerSignalEvent event) {},
                  child: Dismissible(
                    key: const Key('my-dialog'),
                    direction: DismissDirection.down,
                    onDismissed: () {
                      Navigator.of(context).pop();
                    },
                    child: MyDialogModal();
                  ),
                ),
              ),
            ),
          ),
        );
  }

Комментарии:

1. не могли бы вы, пожалуйста, поделиться его изображением, чтобы я мог его полностью понять

Ответ №1:

Вы можете использовать onPointerUp для случаев, когда пользователь перестает перетаскивать Dismissible вниз и _percentageHeight не находится на 0, что означает, что Dismissible он не полностью опущен.

Вы можете использовать анимацию, которая идет от _percentageHeight 1 до 1, чтобы восстановить размытие на 100% с помощью пользовательского Duration интерфейса .

в onPointerUp вы должны позвонить _yourTween.animate(_animationController) , а затем listen изменить его значение, вызывая setState каждый раз, пока оно не остановится на 1.

Метки: