Question

我正在尝试创建一个简单的待办事项应用程序，其底部带有一个“浮动操作”按钮，单击该按钮时将显示一个“警报对话框”，以将项目添加到列表中。每次我单击按钮时，键盘都会向上推动操作按钮，从而导致溢出错误。打开键盘时，有什么方法可以避免将操作按钮向上推？这是我拍摄的快照： 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);
  }
}

Answer 1

您可以检查是否显示键盘，并根据该键盘创建浮动按钮。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: keyboardIsOpened ? 
          null ://or an empty contatiner
          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;

Answer 2

使用了MediaQuery和Visibility小部件

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

Answer 3

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

我使用以下属性解决了此问题：

resizeToAvoidBottomPadding: false,

在父级Scafold上。

我用您的代码对其进行了测试，它也解决了该问题。

Answer 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

键盘在Flutter应用中将FloatingActionButton向上推

4 个答案: