颤振检测键盘隐藏动画的结尾 [英] Flutter detect end of keyboard hide animation

问题描述

我在Flutter中有一个页面，其中包含几个小部件，包括一个TextField(我们称其为View1).当用户单击TextField时，我将重建仅显示TextField和键盘的页面(将其称为View2).当用户使用TextField完成操作时，我将重新构建页面，如以前一样显示所有小部件(尽管将其称为View1，但仍将其称为View3).除了一件事，这工作正常.我得到一个临时的黄色/黑色指示器(处于调试模式)，该指示器指示没有足够的空间来显示View3中的所有小部件.该指示器仅持续了很短的时间，我最终发现它似乎是因为Flutter试图在键盘还没有完成动画移动时显示所有小部件.键盘完成动画设置后，黄色/黑色条消失了，这说明了我认为为什么它只是短暂出现的原因.

I have a page in Flutter with a couple of widgets including a TextField (lets call this View1). When the user clicks the TextField I rebuild the page showing only the TextField and keyboard (lets call this View2). When the user finishes with the TextField I rebuild the page again showing all the widgets as before (lets call this View3 although note that it is the same as View1). This works fine except for one thing. I get a temporary yellow/black indicator (in debug mode) showing that there is not enough room to display all of the widgets in View3. The indicator only lasts a short time and I eventually worked out that it appears becasue Flutter is trying to display all the widgets while the keyboard has not yet finished animating away. Once the keyboard has finished animating away the yellow/black bar disappears and this explains I think why it only appears briefly.

在回调完成时请求View3的构建是很巧妙的，该回调在键盘完成动画设置后执行，但我看不到有任何方法可以做到这一点.也许我缺少了什么?

It would be neat to request the build of View3 in a callback that executes when the keyboard has finished animating away but I don't see any way of doing that. Perhaps I'm missing something?

我能想到的解决此问题的另一种方法是在构建View3之前插入一个延迟，以使键盘有时间消失，但​​这似乎有点不客气.还有其他想法吗?

Another way I can think of to work around this would be to insert a delay before building View3 to allow time for the keyboard to disappear but this seems a little hacky. Has anyone any other ideas?

编辑

我添加了以下延迟，并且可以正常工作.不过，似乎还是有点古怪.

I added a delay as follows and it works. Still seems a bit hacky though.

Timer(Duration(milliseconds: 500),(){setState((){});});

推荐答案

尝试使用 WidgetsBindingObserver 并覆盖 didChangeMetrics 方法，如下所示:

Try using WidgetsBindingObserver and override the didChangeMetrics method like this:

  class KeyboardTogglePage extends StatefulWidget {
    @override
    _KeyboardTogglePageState createState() => _KeyboardTogglePageState();
  }

  class _KeyboardTogglePageState extends State<KeyboardTogglePage>
      with WidgetsBindingObserver {
    @override
    void initState() {
      super.initState();
      WidgetsBinding.instance.addObserver(this);
    }

    @override
    void dispose() {
      WidgetsBinding.instance.removeObserver(this);
      super.dispose();
    }

    var isKeyboardOpen = false;

    ///
    /// This routine is invoked when the window metrics have changed.
    ///
    @override
    void didChangeMetrics() {
      final value = MediaQuery.of(context).viewInsets.bottom;
      if (value > 0) {
        if (isKeyboardOpen) {
          _onKeyboardChanged(false);
        }
        isKeyboardOpen = false;
      } else {
        isKeyboardOpen = true;
        _onKeyboardChanged(true);
      }
    }

    _onKeyboardChanged(bool isVisible) {
      if (isVisible) {
        print("KEYBOARD VISIBLE");
      } else {
        print("KEYBOARD HIDDEN");
      }
    }

    @override
    Widget build(BuildContext context) {
      return Container(
        child: Center(
          child: TextField(),
        ),
      );
    }
  }

这篇关于颤振检测键盘隐藏动画的结尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！