Flutter 怎么判断TextField 的输入框在键盘底下

378 阅读1分钟

你可以使用FocusNode和ScrollController来判断TextField是否在键盘底下。

首先,你需要在你的TextField上添加一个FocusNode:

FocusNode focusNode = FocusNode();

然后,你需要在你的TextField的onChanged回调中检测输入框的焦点:

TextField(
  focusNode: focusNode,
  onChanged: (value) {
    // 检测输入框的焦点
    if (focusNode.hasFocus) {
      // 处理逻辑
    }
  }
)

最后,你需要创建一个ScrollController,并在TextField的onChanged回调中检测输入框是否在键盘底下:

请注意,在某些情况下,如果键盘未显示或已隐藏,键盘的高度可能为 0。因此,您可能需要检查该值是否大于零,以确保它是有效的。

// 创建ScrollController
final ScrollController controller = ScrollController();

TextField(
  focusNode: focusNode,
  onChanged: (value) {
    // 检测输入框的焦点
    if (focusNode.hasFocus) {
      // 获取键盘的高度
      double keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
      // 检测输入框是否在键盘底下
      if (controller.offset > keyboardHeight) {
        // 输入框在键盘底下
      } else {
        // 输入框不在键盘底下
      }
    }
  }
)

这样,你就可以判断TextField的输入框是否在键盘底下了。