键盘在 PageView 中隐藏 TextField

Posted 2023-02-23

【中文标题】键盘在 PageView 中隐藏 TextField

【英文标题】：Keyboard hides TextField in a PageView

【发布时间】：2020-09-17 23:30:54

【问题描述】：

我有一个相当复杂的屏幕，其中包含一个页面视图和一个FutureBuilder。在 Pagebuilder 中，我还有一个 TextFormField，当我现在单击文本字段时，键盘会按预期打开。但它随后隐藏了文本字段和文本字段下方的按钮。 我已经搜索过解决方案，我尝试过的事情：

将resizeToAvoidBottomInset 设置为true 将外栏或综合浏览量放入SingleChildScrollView 在底部添加一些填充（键盘大小）

还有其他想法吗？

我只有一个脚手架。

【参考方案1】：

你试过了吗？

您应该使用 SingleChildScrollView 包裹您的页面，以便在您的内容因引入键盘而超过设备高度的情况下滚动。

解决方案

1)WidgetsBindingObservermixin的使用

2)将scrollController添加到SingleChildScrollView

3) 使用 didChangeMetrics 监听键盘存在的事件并根据需要滚动。

class _SignInState extends State<SignIn> with WidgetsBindingObserver

ScrollController _scrollController = new ScrollController();

void initState() 
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  

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

  @override
  void didChangeMetrics() 
    _scrollController.jumpTo(200); //as per your need
  

内部 Scaffold 小部件将控制器添加到 SingleChildScrollView

  body: SingleChildScrollView(
        controller: _scrollController,
    )

【参考方案2】：

使您的页面可滚动并像这样为按钮添加填充：

SingleChildScrollView(
   child: Column(
      children: 
         textInput,
         Padding(padding: ..., child: button) 
             ...

这将允许用户在编辑后滚动到按钮。

另一个解决方案是让按钮浮动 - 它总是在键盘上方

    return Stack(
      children: <Widget>[
        Positioned(
          child: SingleChildScrollView(
              child: Column(
                  children: [textInput]
                    ..add(Container(
                      height: 1111, // button heigh, so could scroll underlapping area
                    )))),
        ),
        Positioned(
          child: Align(
            alignment: Alignment.bottomCenter,
            child: button,
          ),
        )
      ],
    );

【讨论】：

我尝试了你的第一个解决方案，它没有改变任何东西。澄清：我的主要问题是键盘隐藏了文本字段。

你用的是什么flutter版本？

频道稳定版，v1.17.2

【参考方案3】：

您使用什么方法来获取键盘大小？最好的方法是添加一个将文本字段向上推的底部填充，您可能还希望将表单字段放在您提到的 SingleChildScrollView 内：

padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom + 10 

【讨论】：

您好，谢谢您的回答。但这对我也不起作用。还有其他想法吗？

这似乎是一个奇怪的问题，但您是否为您的应用实现了启动画面？另外，这是在android还是ios上，还是两者兼而有之？

是的，我有适用于 ios 和 android 的原生启动画面。该错误（如上所述）也出现在 ios 和 android（模拟设备和真实设备上）

抱歉，刚刚看到您的回复。我在 Android 上遇到了由 splash 而不是 ios 引起的问题。不过，看看这篇文章和我的回答以及其他人。它可能会有所帮助：***.com/questions/51335483/…