当键盘出现时,白框会遮挡视图

Posted

技术标签:

【中文标题】当键盘出现时,白框会遮挡视图【英文标题】:White Box Obscures View When Keyboard Appears 【发布时间】:2019-04-01 20:22:30 【问题描述】:

由于某种原因,在更新 Flutter 后,我的应用程序的某个部分已损坏。我在 SingleChildScrollView 中设置了一个文本表单小部件列表。每当我按下其中一个文本表单时,键盘就会出现,并且一个空白的空白框会自动进入视野,从而遮挡文本输入框。

在我遵循此链接的建议之前,在列表视图中的文本输入遇到了一些问题:https://www.didierboelens.com/2018/04/hint-4-ensure-a-textfield-or-textformfield-is-visible-in-the-viewport-when-has-the-focus/

它有效地解决了我之前遇到的键盘出现时文本输入框不可见的问题。但是现在出现了 while 框并遮住了视图。我也确保使用:

resizeToAvoidBottomPadding: false

按照常规建议。

这里也是文本字段小部件代码之一的问题代码:

  @override
Widget build(BuildContext context) 

return new Scaffold(

  body: new SafeArea(
      child: new Form(

          key: _formKey,

          child: new SingleChildScrollView(

            padding: const EdgeInsets.all(16.0),

            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,

              children: <Widget>[

                circumstances(),
                divider(),
                description(),
                divider(),
                externalHappenings(),
                divider(),
                internalHappenings(),
                divider(),
                reflectionsAndCorrections(),
                divider(),
                abatement(),
                divider(),
                footerButtons()

              ],

            ),

          )

      )
  ),

  resizeToAvoidBottomPadding: false,
);



Widget circumstances() 

  return new EnsureVisibleWhenFocused(
  focusNode: _focusNodeCircumstances,
  child: new TextFormField(

    controller: _circumstancesController,
    maxLines: maxLines,

    decoration: const InputDecoration(
      border: const OutlineInputBorder(
          borderRadius: const BorderRadius.all(const Radius.circular(0.0)),
          borderSide: const BorderSide(color: Colors.black, width: 1.0)
      ),

      filled: true,

      labelText: "Circumstances",
      hintText: "Who was there? Where were you?",
    ),

    autofocus: true,

    validator: (value) 

      _activeJournalEntry.setCircumstances(value);

      if(value == null || value.isEmpty) 
        return "Please enter some circumstances.";
      

    ,

    focusNode: _focusNodeCircumstances,

  ),
);


【问题讨论】:

你有嵌套的脚手架吗? 我遇到了同样的问题。参考我在这里给出的这个答案***.com/a/51336745/7940500 【参考方案1】:

对该主题的回复为我指明了解决问题的正确方向。

我有三个嵌套的脚手架,其中最里面的两个有这个集合:

resizeToAvoidBottomPadding: false

但是,我最外面的 Scaffold 没有,导致了这个问题。所以事实证明,嵌套的 Scaffolds 很好,但您必须确保它们中的每一个都设置了该属性以避免这个问题。

另见,

https://github.com/flutter/flutter/issues/7036

【讨论】:

以上是关于当键盘出现时,白框会遮挡视图的主要内容,如果未能解决你的问题,请参考以下文章

iOS-当输入框被键盘遮挡时让整个view上移

请问js高手,我想做一个动态的消息提示框,但是用绝对定位的提示框会随滚动条的移动被遮挡?

当键盘出现时,UIPopoverController 在 iOS 7 上奇怪地移动

iPad键盘分裂时调整UIPopover

当键盘出现滚动视图时文本字段消失

当键盘出现时视图仅大于屏幕时,如何在 iOS 中滚动?