键盘在颤振应用程序中向上推动 FloatingActionButton答案

【问题标题】：Keyboard is pushing the FloatingActionButton upward in flutter app键盘在颤振应用程序中向上推动 FloatingActionButton
【发布时间】：2019-06-04 12:44:40
【问题描述】：

我正在尝试创建一个简单的待办事项应用程序，底部有一个浮动操作按钮，单击该按钮时会显示一个警报对话框以将项目添加到列表中。每次单击按钮时，键盘都会向上推动操作按钮，导致溢出错误。打开键盘时，有什么办法可以避免向上推动操作按钮？这是我拍的快照： Snapshot 源码下方：

import 'package:flutter/material.dart';
import '../model/todo_item.dart';

class ToDoScreen extends StatefulWidget {
  @override
  _ToDoScreenState createState() => _ToDoScreenState();
}

class _ToDoScreenState extends State<ToDoScreen> {
  TextEditingController _textEditingController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: Column(
        children: <Widget>[ToDoItem("Going for a Walk", "12 January, 2019")],
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Add Item',
        child: Icon(Icons.add),
        backgroundColor: Colors.red,
        onPressed: _showFormDialog,
      ),
    );
  }

  void _showFormDialog() {
    var alert = AlertDialog(
      content: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              controller: _textEditingController,
              autofocus: true,
              decoration: InputDecoration(
                  labelText: "Item",
                  hintText: "eg. Buy Vegetables",
                  icon: Icon(Icons.note_add)),
            ),
          )
        ],
      ),
      actions: <Widget>[
        FlatButton(
          onPressed: () {
            // _handleSubmit(_textEditingController.text);
            _textEditingController.clear();
          },
          child: Text("Save ToDo"),
        ),
        FlatButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text("Cancel"),
        )
      ],
    );
    showDialog(context: context, builder: (BuildContext context) => alert);
  }
}

【问题讨论】：

使用ListView 而不是Column
感谢您的回复。是的，我知道我可以使用 ListView 而不是 Column 但我的问题是如何停止浮动按钮以在每次打开键盘时被提升。有什么办法可以解决这个问题吗？

标签： android mobile flutter flutter-layout

【解决方案1】：

我遇到了同样的问题，我的浮动操作按钮会被向上推。

我使用属性解决了这个问题：

resizeToAvoidBottomPadding: false, // fluter 1.x
resizeToAvoidBottomInset: false // fluter 2.x

在父 Scafold.

我用你的代码测试了它，它也解决了这个问题。

【讨论】：

这样就解决了问题。但是，如果我希望 Scafold 中的其他小部件调整大小，而不是浮动操作按钮，该怎么办？
如果我们需要这个属性为真怎么办，例如我有一个文本字段，它会在打开时被键盘隐藏。我也有浮动操作按钮。有什么想法吗？
在 Flutter 2.0 中，该属性已更改为 resizeToAvoidBottomInset

【解决方案2】：

您可以检查键盘是否显示，并在此基础上创建浮动按钮。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: keyboardIsOpened ? 
          null ://or an empty container
          FloatingActionButton(
          tooltip: 'Add Item',
          child: Icon(Icons.add),
          backgroundColor: Colors.red,
          onPressed: _showFormDialog,
      ),
    );
  }

在 build 方法中，您可以使用 MediaQuery.of(context).viewInsets.bottom 了解键盘是否出现，并将其值保存在 bool 变量 keyboardIsOpened 中，如下面的代码。

@override
Widget build(BuildContext context) {
  bool keyboardIsOpened = MediaQuery.of(context).viewInsets.bottom != 0.0;

【讨论】：

我用了这个方法。这是一个解决问题的简单解决方案。此外，您可以将浮动操作按钮包装在 Visibility() 小部件中。然后只需根据keyboardIsOpened 变量设置可见性参数。 ~~~ floatingActionButton: Visibility( 可见性：keyboardIsOpened ? false : true, child: FloatingActionButton(), ); ~~~ 这样就不会出现打开键盘时浮动操作按钮收缩的烦人动画了。
我第一次使用这个解决方案，但我遇到了浮动按钮的问题，因为它仍然在屏幕上，但它只是不可见，所以如果你错误地触摸了键盘上方的屏幕，你可以按下它。所以我更愿意在我用完键盘之前将其移除。
这个答案很危险。 viewInsets 不仅仅适用于键盘。
@apxcode 除了使用这个和resizeToAvoidBottomInset: false??，你还有什么建议
有一个用于检测键盘的库，称为键盘可见性@Ahmad Khan

【解决方案3】：

使用MediaQuery 和Visibility

Visibility(
          visible: MediaQuery.of(context).viewInsets.bottom == 0.0,
          child: FloatingActionButton(
            onPressed: () {},
            child: Icon(Icons.chat),
          ),
        ),

当键盘打开时，底部不会为零，这会导致fab变得不可见。

【讨论】：

当 resizeToAvoidBottomPadding 设置为 false 时，MediaQuery.of(context).viewInsets.bottom 似乎总是返回 0。
如果你设置了这个resizeToAvoidBottomPadding:false，键盘不会向上推FloatingActionButton

【解决方案4】：

把你的完整代码封装在这个

 new Container(
child: Column(
children: <Widget>[
        Expanded(
          child: SingleChildScrollView(
            child: Stack(
              children: <Widget>[
              // Your body code
              ] // Widget
             ), // Stack
            ), // SingleChildScrollView
           ), // Expanded
        Container(
        alignment: Alignment.bottomCenter,
        padding: EdgeInsets.all(10.0),
        child : 
        // button code here 
        // to make button full width use minWidth: double.infinity,
         ,
        ), //Container
        ], // Widget
        ), // Column
        ), // Container

【讨论】：