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

Question

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

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);
  }
}

Answer 1

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

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

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

在父Scafold.

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

Answer 2

为了防止键盘在 Flutter 应用程序中向上推动 FloatingActionButton (FAB)，您可以使用MediaQuery和Visibility小部件。

该MediaQuery小部件提供对有关当前设备屏幕的信息的访问。通过检查 的值viewInsets.bottom，我们可以判断键盘是打开还是关闭。如果viewInsets.bottom为零，则表示键盘关闭。

要实现此解决方案，请将 FAB 小部件与Visibility小部件包装在一起，并将属性设置visible为条件MediaQuery.of(context).viewInsets.bottom == 0.0。这可确保 FAB 在键盘关闭时保持可见，在键盘打开时保持隐藏。

Visibility与 FAB 一起使用：

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

通过此实现，当键盘关闭时，FAB 将可见，而当键盘打开时，FAB 将消失，从而提供一致的用户界面。

Answer 3

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

@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;